Cara Membuat Related Posts Dengan Thumbnail ~ Ron1st Blog

Pada artikel yang akan saya bagikan ini, kita akan membahas tentang Related Posts atau Artikel Terkait, Artikel Terkait Berguna Untuk Membantu Pengunjung Untuk mencari artikel lain yang berhubungan dengan artikel tersebut, Artikel Terkait biasanya berada di bawah postingan blog.

Ada yang berbentuk daftar atau pun Thumbnail, Akan saya bagikan ini berbentuk Thumbnail dan keunggulan widget ini adalah di sedia gambar bentuk yang menarik, Langsung saja kita coba membuatnya, Tutorialnya seperti dibawah ini :

Pertama Kita login ke blogger
Terus, Pergi menu ''Template''
Klik ''Edit HTML''
Setelah itu, cari kode </head> Setekah ketemu masukan kode dibawah ini di atas / sebelum kode tersebut

<b:if cond='data:blog.pageType == "item"'>

<style type='text/css'>

#related-posts {

float:center;

height:100%;

min-height:100%;

padding-top:10px;

padding-left:15px;

padding-right:15px;

}

#related-posts h2{

font-size: 1.3em;

color: black;

font-family: Arial;

margin-bottom: 0.75em;

}

#related-posts a{

color:black;

}

#related-posts a:hover {

background-color:#eeeeee;

}

</style>

<script type='text/javascript'>

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB8lM2Y9klUPmvmgQpeZaYCItCnsZYgP_kfYvtiUpok30mAbb1VqaPATgqn_jOVypYu5Gv9INW6rzRZfyrKMP21LKnTzjHpwyByhFUUGD0B3G4kekav7tQortLgjRjks7173cLHiO1NWtw/";

var maxresults=5;

var splittercolor="#cccccc";

var relatedpoststitle="Related post";

</script>

</b:if>

Terus cari lagi kode, <p class='post-footer-line post-footer-line-1'/> atau post-footer-line,Setelah ketemu COPY kode dibawah ini diatas salah satu kode diatas

<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>