Trik Membuat Widget Related Post | Artikel Terkait dengan Thumbnail

Sobat Blogger pembaca setia artikel Blog dan SEO di web saya ..

edisi kali ini saya postkan untuk anda tips membuat widget related post | artikel terkait dengan thumbnail alias bergambar (kalau postingnya pake gambar, maka gambarnya tampil disana)..

Okeh deh, begini caranya :
1. Masuk ke akun bloggermu, lalu pilih rancangan lalu klik edit html, jangan lupa centang expand widgetnya, kalau masih pemula, download dulu templatenya ya ...
2. aktifkan mode pencarian dengan menekan CTRL+F ; lalu cari kode ini : </head>
3. setelah ketemuan , lalu copy code dibawah ini dan taruh diatas kode point 2 tadi :

<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}


#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}


#related-posts a{
color:black;
}


#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ0QoXIt88SRNKYCQ3p9w6LSttgyudWT5pLj-Pl5lBbsE4EFydgdGAG_Qy2JqX9izSkXClv203kDShkq2iAyUjyLynQG_KcNn-ARyObNqANRZ3NEhHn8uBEQN9eeYOTaGFyqIX4prH3AhY/&quot;;
var maxresults=10;
var splittercolor=&quot;#cccccc&quot;;
var relatedpoststitle=&quot;Artikel Terkait dengan Posting ini&quot;;
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->

4. selanjutnya cari kode dibawah ini dan taruh sesudah kode point 3 tadi :
<div class='post-footer-line post-footer-line-1'> 

atau 


<p class='post-footer-line post-footer-line-1'>

5. setelah ketemu, kemudian copy paste kode berikut :


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

Nah untuk mengatur jumlah postingan yang ditampilkan nanti atur kode var maxresults=10; dengan angka yang kamu inginkan.

Nah untuk mengatur judulnya maka silahkan ganti yang dicetak merah var relatedpoststitle=&quot;Artikel Terkait dengan Posting ini&quot;;

Selanjutnya anda save, dan lihat hasilnya ... jreeeng .. ok kan ? nah modifikasi deh sendiri ya biar lebih kereeeen ....iyaaaaa kaaaaan ???? minum dulu jahe merah karomah nya aaaah .... order yu...