Cara Membuat Related Post dengan Gambar

Tutorial | Cara Membuat Related Post dengan Gambar / Thumbnail - Berikut ini cara membuat related post dengan gambar yang terletak dibawah postingan blog.
Fungsi related post ini untuk menyajikan artikel lain kepada pengunjung blog. Biasanya related post diambil dari label dan tidak ada gambarnya, tapi related post kali ini berbeda, terdapat cuplikan atau thumbnail agar menarik pengunjung agar meng klicknya, Berikut ini cara membuatnya :

Login
Design > Edit HTML > Centang expand widget templates.
Cari kode </head> (Ctrl+F untuk mempermudah pencarian) kemudian paste kode di bawah ini tepat di atas kode </head>

<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{</head></head>
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {float:center;
text-transform:none;
height:100%;
min-height:100
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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr4DxgtYxbtnwbNEjEbHG0dxttlJGjA1eahn2-AUHAK_azXPDNtheCL3MtvFLPh5FoLlwR8VF69OyLZrBt2NAhm5u9-_Vnxe3qMqE1mMmDakAJDok-gZWFYCJgnc1W0jQEGL0FW3Zd9Rw/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

Lanjut lagi, cari kode seperti dibawah ini

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

Kalau sudah ketemu, sekarang paste kode berikut di bawah kode tadi.

<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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>