Membuat Related Posts image di Bawah Postingan Blog

 Cara Membuat Related Posts image atau Artikel Terkait bergambar di Bawah Postingan Blog seperti pada contoh gambar

Langkah pertama silahkan anda copy paste kode Related posts di bawah ini di atas  ]]></b:skin> Jika sebelumnya Template sudah menggunakan related Posts silahkan hapus dan di ganti dgn yg ini.

ul#related-posts{font:bold 12px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #000;display:block;height:90px;position:relative;width:90px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li a:hover .overlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjakOypZCdkJSdPmvYpQqAyRHabaLgW01tb67AZ-uusVbo3ogbXQ-_8yaxJOvJYrTN6QaxhZR7myXgC2tYmBIfSz9h5XcwKYaoiLIPNn2I1LCohcUhVeIgNPS9HsxgBvPBcmZRNzBdJG9c/s1600/transparant.png);display:block!important;}
ul#related-posts li img{border-radius: 8%; bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
ul#related-posts li .overlay {position:absolute;bottom:0;padding:0!important}

Selanjutnya anda cari <b:else/><data:post.body/></b:if>  pada templete jika sudah ketemu lalu copy kan kode script related Posts di bawah ini pada templete
<b:else/><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2zLp2sepEYajn-7sxwWrnfiU6ayDWvha72k3i7q_j39yzEG6850scWS5JpcDME3QTToJScTUUfwIlfgzI81RS1h77WEfd1VcGJUqxh95eE4o-gIhg7ubQuPkT_J3cgzxKOIHTlEmIvbA/s1600/no+image.jpg&quot;;
var maxresults=4;
</script>
<script src='http://yourjavascript.com/41217221222/relatedimage.js' type='text/javascript'/>
<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=6&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if>
<div class='clear'/>
Lalu simpan dan lihat perubahan setelah berhasil Membuat Related Posts image di Bawah Postingan Blog