Cara Membuat Related Post atau Artikel Terkait yang Keren di Blogspot

Halo Temans Bukandotnet yang sedang asyik ngeblog - Seperti yang anda lihat pada gambar diatas, itu merupakan tampilan related post atau artikel terkait yang biasanya berada di bagian akhir postingan artikel

Dengan adanya fitur tersebut, selain untuk menambah dan memperkaya varian fitur di blog, juga bisa berfungsi untuk mengarahkan para pengunjung menemukan artikel terkait lainnya dengan mudah sehingga mereka bisa langsung menemukan artikel yang ada kaitannya dengan artikel yang sebelumnya dia baca

Ok ... setelah kita tahu manfaat dari fitur related post tersebut, sekarang saatnya Anda pun harus mencoba memasangnya di blog kesayangan sobat

Ikuti langkah-langkahnya dibawah ini:

1. Seperti biasa, login dulu ke akun blogger sobat

2. Pada dashboard, klik Theme/ Template >> Edit HTML

3. Cari kode ]]></b:skin> (Gunakan Ctrl+f untuk memudahkan pencarian)

4. Setelah kodenya ketemu, silahkan Copy kode dibawah ini kemudian Paste-kan tepat diatas kode ]]></b:skin> tersebut

#related_posts{margin-top:15px}

#related_posts h4{color:#000;background:#f0f0f0;padding:10px;margin:0 0 5px;font-size:80%;}

#related_img{margin:0;padding:0;}

#related_img:hover{background:0}

#related_img ul{list-style-type:none;margin:0;padding:0}

#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}

#related_img li a{color:#2672a0;}

#related_img li a:hover{text-decoration:underline}

#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}

#related_img .news-text{display:block;text-align:justify;font-weight:normal;text-transform:none;color:#333;font-size:12px;}

#related_img img{float:left;margin-right:7px;border:1px solid #ccc;padding:2px;width:60px;height:60px;max-width:100%;background:#fff}

5. Cari kode <data:post.body/> (Gunakan Ctrl+f untuk memudahkan pencarian)

biasanya kode tersebut berjumlah 2 atau lebih

6. Copy kode dibawah ini kemudian Paste-kan di bagian bawah kode <data:post.body/> tersebut atau silahkan sobat pilih mau menampilkannya di bagian mana

Patokannya usahakan penyimpanan kodenya diatas/ sebelum kode <div class='post-footer'>

<!-- Related Post Widget Start -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script src='https://cdn.rawgit.com/mowdot/mysitemap/master/relatedpost_gambar.js' style='text/javascript'/>

<div style='clear:both;'/>

<div id='related_posts'>

<h4>Artikel Terkait :</h4>

<b:loop values='data:post.labels' var='label'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>

</b:loop>

<ul id='related_img'>

<script type='text/javascript'>relatpost();</script>

</ul>

</div>

</b:if>

<!-- Related Post Widget End -->

*Tulisan Artikel Terkait boleh sobat ganti dengan kalimat yang sesuai dengan selera sobat

Hasilnya akan terlihat seperti gambar dibawah:

7. Jika sudah, silahkan Save Theme/ Template dan coba buka salahsatu postingan sobat, apakah posisinya sudah tampil dengan benar? Jika belum silahkan sobat utak-atik lagi posisinya sampai terlihat matching ...

Berikut adalah penampakannya di blog:

Jika dari tampilannya dirasa kurang, entah itu ukuran font, jenis font, atau background nya, sobat tinggal edit saja lagi kode CSS nya sesuai keinginan

Demikianlah tutorial Cara Membuat Related Post atau Artikel Terkait yang Keren di Blogspot, semoga bermanfaat dan anda berhasil memasangnya di blog kesayangan anda

Silahkan isi komentar dibawah jika ada yang kurang dimengerti ...

Referensi: duarupa.blogspot.com