Cara memasang widget Related Post/artikel terkait dengan thumbnail di blog

Sobat blogger bentar lagi kan lebaran saya punya tutorial baru nih tentang Widget "Artikel terkait" apa sih artikel terkait?.Artikel terkait adalah Daftar link yang berhubungan dengan sebuah artikel yang kita baca.Kalo masih bingung langsung aja praktekin,tapi sebelum itu kalian wajib follow blog saya dulu setelah itu kita mulai:

1.Login ke akun blogger anda

2.Pilih tab rancangan

3.Pilih Edit html

4.Back up dulu templatenya biar kalo salah bisa dikembaliin backup dengan cara klik "Download template lengkap"

5.Kemudian centangExpand Template Widget

6.Kemudian cari kode </head> (agar lebih mudah mencarinya gunakan f3)
7.Letakkan kode berikut di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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 src='https://sites.google.com/site/webmiftah/js/relatedpostthumbnail.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

8.Kemudian cari kode <div class='post-footer-line post-footer-line-1'>  kalo gak ketemu jangan panik bisa car kode seperti ini <p class='post-footer-line post-footer-line-1'> 
9.Kalo udah ketemu salah satu letakkan kode dibawah ini di bawah kode yang anda barusan temukan:

<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

10.Tinggal di Save deh

KETERANGAN:

-Ganti tulisan yang berwarna MERAH dengan kode wana sesuai kesukaanmu
-Ganti tulisan yang berwarna KUNING sesuai jumlah artikel terkait yang ingin anda munculkan
-Ganti tulisan yang berwarna  CYAN dengan Tulisan yang ingin anda tampilkan (judul) di atas related post

SELAMAT MENCOBA

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di webmiftah.blogspot.com