Tips Menciptakan Kolom Baca Juga Didalam Postingan Blog
- Dalam kesempatan kali ini saya kembali lagi akan memperlihatkan sebuah tips seru lainnya berkaitan dengan cara membuat kolom baca juga didalam postingan ibarat yang nampak pada gambar diatas. Dalam menciptakan sebuah konten berupa artikel untuk diposting kedalam sebuah blog atau web kita semua tentu ingin menampilkan yang terbaik biar konten terlihat lebih rapi dan menarik untuk dilihat.
Kali ini saya akan memperlihatkan tips biar tampilan peletakan backlink terlihat lebih menarik dan rapi alasannya ialah berada didalam sebuah kolom yang otomatis akan muncul bila kita tambahkan sebuah script yang memuat backlink, dan cara penggunaannya juga tergolong sangat gampang bahkan para newbie juga akan dengan gampang menerapkannya pada blog mereka.
Baiklah kini kita akan masuk pada cara pembuatan kolom baca juga didalam postingan, dan caranya ialah sebagai berikut.
Langkah Pertama kalian login terlebih dahulu pada blogger atau blog yang akan kalian sematkan tabel otomatisnya. Langkah selanjutnya masuk pada bab Tema - HTML - cari isyarat </head> - dan pastekan script dibawah ini sempurna diatas isyarat </head> tersebut.
<style type="text/css">
/*Artikel Terkait*/
.bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
.bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}
.bacajuga ul{padding:11px 41px 0;list-style:none}
.bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}
.bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
</style>
/*Artikel Terkait*/
.bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
.bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}
.bacajuga ul{padding:11px 41px 0;list-style:none}
.bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}
.bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
</style>
Script diatas merupakan komponen utama dari pembuatan kolom baca juga secara otomatis, jadi jangan hingga lupa untuk meletakkan isyarat tersebut. Jika isyarat script sudah diletakkan selanjutnya simpan.
Langkah Kedua kalian masuk pada sajian postingan dan buat postingan baru. Tulis artikel ibarat biasa hingga final kemudian tentukan dimana kalian ingin meletakkan kolom tersebut apakah mau ditengah atau dibawah itu terserah kalian mengaturnya. Jika peletakan sudah ditentukan kalian tinggal copy dan paste script dibawah ini sempurna dimana kalian ingin meletakan kolom tersebut. Ketika ingin mempaste script pastikan terlebih dahulu kalian masuk pada mode HTML, bila sudah dipaste kembalikan kemode Compose.
<div class="bacajuga">
<h4>Baca Juga</h4>
<ul>
<li><a href="Link Tujuan">Judul Tulisan</a></li>
<li><a href="Link Tujuan">Judul Tulisan</a></li>
</ul>
</div>
<h4>Baca Juga</h4>
<ul>
<li><a href="Link Tujuan">Judul Tulisan</a></li>
<li><a href="Link Tujuan">Judul Tulisan</a></li>
</ul>
</div>
Untuk goresan pena yang berwarna orange ganti dengan link tujuan kepostingan mana kalian ingin mengarahkan, dan goresan pena yang berwarna merah ganti dengan judul goresan pena konten yang diarahkan tadi.
Langkah Ketiga kalian tinggal posting artikel tersebut dan lihat kesudahannya kolom kotak baca juga akan tampil secara otomatis didalam postingan kalian. Sedikit catatan sebelum artikel dipublikasi memang kolom tidak akan terlihat, namun bila sudah dipublikasi kolom akan muncul dengan sendirinya.
Nah bagaimana tips menciptakan kolom baca juga tadi, sangat gampang bukan? Demikianlah tips singkat yang saya bagikan tadi semoga bermanfaat bagi kita semua biar lebih berkembang kedepannya.
Sumber script : Mastamvan