Memasang Related Post/ Artikel Terkait dengan Thumbnail

"Related post atau Artikel terkait"
Pernahkah Sobat mendengar kata2 di atas?? Pasti pernah dong,,,,
Related post atau Artikel terkait sangat penting perannya dalam blog. Karena ini untuk memudahkan pembaca blog dalam mencari artikel yang berhubungan dengan yang di baca. Ini juga membantu menaikkan trafik pengunjung blog Sobat. Tips kali ini akan membahas bagaimana cara memasang Related post dengan Thumbnail di Blog Sobat.



Berikut langkah2nya:

1. Masuk pada akun Blog anda

2. Masuk pada Dashboard > Template > Edit HTML

3. Jangan lupa centang kotak Expand Template Widget

4. Cari kode </head>
    Tips: Untuk memudahkan pencarian gunakan F3

5. Setelah itu copy-paste kode dibawah ini diatas kode </head>


<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage=&quot;https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-prn1/536915_588524101173206_997886717_n.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->  


angka warna hijau pada var maxresults=5 dapat diganti sesuai keinginan Sobat, berapa banyak related post yang ingin anda tampilkan

6. Jika sudah cari kode <data:post.body/> lalu copy-paste kode dibawah ini tepat dibawah kode tadi

 <!-- 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=5&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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://d-copy.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkhm4XuNh8SdJMcISTR-lMYXk5YF13iTc3zHHz0p0Nge1jC_fFhtAY2Agun1ke9pBFmikxjBQbBHwCQN5zDWKy5tUCtR9a4sQH3eGHpwBJz2tOWFf_1Hfox6MAFzuZutsGbzaF1T8tOIeR/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->



Angka 5 yang berwarna hijau bisa Sobat ganti sesuai dengan thumbnail yang Sobat inginkan
Jika pada blog Sobat terdapat kode <data:post.body/> lebih dari 1, Sobat dapat mencobanya satu persatu.
Untuk di Blog saya, saya tempatkan setelah kode yang ke2

7. Setelah itu Simpan Template Sobat, dan berdoa semoga aja berhasil,,, heheheh

Demikian tips Cara memasang Related post di blog Sobat. Semoga membantu dan bermanfaat.