Cara Membuat Related Post dengan Tumbnail pada Blogspot

Biasanya kita melihat related post atau artikel terkait hanya tulisan saja, Tutorial blogspot kali ini kita akan belajar cara membuat related post dengan gambar / tumbnail.

Seperti yang kita tau memasang related post juga merupakan salah satu tekhnik SEO page. Cara membuatnya sebagai berikut:

1. Login ke Blogger. Klik menu Design / Rancangan >> Edit HTML

2. Beri tanda centang pada “Expand Widget Template“

3. Lalu cari kode </head> untuk mempermudah tekan Ctrl + F pada keyboard anda.

4. Jika sudah ketemu copy dan paste kode berikut tepat diatasnya.

<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

5. Kalo sudah kemudian carilah kode <div class='post-footer-line post-footer-line-1'> kalo sudah ketemu, copy pastekan kode berikut tepat diatasnya.

<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>
<b:if cond='data:blog.pageType == "item"'>
<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: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="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>