Cara Memasang Widget Related Post Dengan Thumbnails ~ Seven Hsa

pada postingan kali ini saya ingin membahas cara memasang widget related post dengan thumbails. widget related post (artikel terkait) sendiri mempunyai fungsi untuk memudahkan pengunjung membaca artikel - artikel yang lain dengan cepat. Cara dibawah saya dapatkan dari Blog mas agung talaga.
langsung saja kita praktekin dan berikut langkah - langkahnya :
langkah pertama :
tentunya kita harus login dulu di blogger dan klik menu dashboard. disana kita akan meng -edit HTML. pada tampilan edit HTML , centang expand widget template dan cari kode </head> lalu letakkan kode di bawah ini tepat di atas kode </head>.

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px;}
#related-posts h2 {font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em;}
#related-posts a {color:black;}
#related-posts a:hover {color:black;}
#related-posts a:hover {background-color:#d4eaf2;}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiijBX_iiVRPoMtrpdLyExMk1cZfntRdYv-qLAZ7MTKgYgK03DMlaaxKJFVC7ZqUoTLeNSodu7jjBBzSvfa1pEDeRIB9O5qIohw_islEwxdIF4qky93fnPMA2q9T04054WY83K7X59T9dE/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>

Untuk kode di atas, sobat bisa merubah angka yang saya kasih warna biru dengan keinginan sobat berapa artikel yang akan ditampilkan pada widget related post-nya serta silahkan juga ganti kata Related Posts dengan judul widget yang sobat inginkan. Kemudian link gambar yang saya kasih warna biru merupakan link gambar default yang akan ditampilkan pada widget related post jika artikel pada blog sobat tak disertakan dengan gambar. Sobat bisa menggantinya dengan link gambar yang sobat inginkan.

Langkah Kedua
Pada langkah kedua ini, silahkan cari lagi kode <div class='post-footer-line post-footer-line-1'>, pada template blog saya kode ini ada dua maka silahkan letakkan kode di bawah ini tepat di bawah kode <div class='post-footer-line post-footer-line-1'>.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
<div style='clear:both'/>
</b:if>

Jika sudah selesai semuanya diatur sesuai dengan tampilan blognya, silahkan save templatenya dan coba buka salah satu artikel sobat, apakah widgetnya sudah muncul atau belum. Jika belum muncul, silahkan tanyakan kembali. Kurang lebih hasil pemasangan kode di atas seperti gambar di bawah ini.

Demikian informasi dari saya tentang tips blog , semoga bermanfaat buat sobat sekalian. Pertanyaan dan kritikan silahkan sobat tuliskan pada komentar di bawah ini...