Cara Membuat Related Post dengan Thumbnails pada Blog

Assalamualaikum sobat blogger semua, gimana kabarnya? semoga baik-baik saja yah.. Hmm.. Kali ini saya akan memberikan tips dan trik blogger tentang Cara Membuat Related Post dengan Thumbnails pada Blog. Jika sebelumnya sobat hanya melihat related post hanya menampilkan judul postingannya saja, maka sekarang akan ada perubahan yaitu ditambahkan thumbnails atau gambar. Wah.. Tentunya hal ini bisa membuat blog sobat semakin keren dah, sobat juga pasti sudah tau kan kalau memasang related post merupakan salah satu teknik SEO On page?

Nah, bagaimana cara membuat relate post dengan thumbnails ini? Langsung saja ke TKP:

• Login ke akun blogger sobat.
• Pilih menu Template, jangan lupa backup template sobat.
• Klik Edit HTML
• Cari Kode </head>, kemudian letakkan kode diberikut tepat diatas 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='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

• Kemudian, cari lagi kode <div class='post-footer-line post-footer-line-1'> dan letakkan kode berikut ini tepat diatas kode <div class='post-footer-line post-footer-line-1'>:

<!-- 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><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<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-->

• Simpan template blog sobat.

Demikianlah tips dan trik blogger tentang  Cara Membuat Related Post dengan Thumbnails pada Blog dari saya, semoga bermanfaat bagi sobat blogger semuanya. Jangan lupa juga baca postingan saya sebelumnya tentang:

1. Cara Memasang Emoticon pada Komentar Blog
2. Cara Membuat Reply Comment pada Blog
3. Meta Tag Dinamis Terbaik
4. Cara Membuat Highlight pada Postingan
5. Cara Mempercepat Loading Halaman
6. Cara Mengubah Blog Nofollow menjadi Dofollow
7. Kelebihan dan Kekurangan Blog Dofollow