Cara Membuat Related Post Bergambar Pada Blog

Assalamu'alaikum Warahmatullahi Wabarakaatuh...

Abstract Dimension - Berjumpa lagi dengan Blog yang sederhana ini, pada kesempatan kali ini saya mecoba berbagi tentang cara Membuat Related Post Pada Blog, Related Post ini lumayan keren lah, hehe, karena ada gambar Thumbnail-nya. Related Post digunakan untuk menampilkan postingan-postingan terkait pada blog sobat, berdaraskan Label/ Kategori Artikel yang sobat posting.

Berikut nih Screenshoot Related Post-nya. Kebetulan Related Post ini saya pakai juga pada blog saya. :)

Untuk mempersingkat waktu langsung aja praktek deh....

• Pertama Silahkan login pada blog sobat.
• Klik Template kemudian Edit HTML
• Beri Centang pada Expands Templates Widget
• Cari kode </head> dan taruh/ copy kan Script Code berikut  tepat sebelum/ diatas kode  </head>. Gunakan Ctrl + F untuk memudahkan sobat dalam mencari kode </head>.

<!--Start Related Posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:90%;
min-height:90%;
padding-top:0px;
padding-left:8px;
}
#related-posts h2{
font-size: 1.0em;
font-weight: bold;
color: black;
font-family: Arial,Georgia,Serif;
margin-bottom: 0.8em;
margin-top:0em;
padding-bottom:0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#009df2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNkfVJs3zkUffkcTwNtTbXSyWgLhS8HmtE8Yif-s1wglgc9PWh-bZak9vrWyQWNDmv9GDx2HJozt_GNvjGIhkAcwlkYgofgghQwrB3q62H_E4yUTGz2f6JJ-ERC-vlj9rtjO7JmdZsoLs/s1600/NoImage.jpg&quot;;
var maxresults=8;
var splittercolor=&quot;#FFFFFF&quot;;
var relatedpoststitle=&quot;Related Post:&quot;;
</script>
<script src='http://backup-panda.googlecode.com/files/RelatedPoststhumb3.js' type='text/javascript'/>
</b:if>
<!--End Related Post-->

• Lalu copy-kan Script Code berikut setelah Code <data:post.body/>. Jika blog sobat menggunakan fitur Read More Pada Homepage Blog sobat, biasanya akan ada 2 atau lebih Code <data:post.body/> pada blog sobat. Taruh saja setelah kode yang ke 2. 

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

•  Kemudian klik Simpan Template dan lihat pada salah satu postingan sobat.

Pada Script Code diatas ada yang sengaja saya beri warna. Untuk code yang berwarna biru itu adalah code warna, untuk yang berwarna ungu adalah gambar thumbnail default dari postingan sobat yang tidak ada gambarnya. Untuk yang berwarna merah adalah Judul dari Related post sobat, dan angka 8 yang berwarna oranye adalah maksimal artikel yang akan ditampilkan pada Related Post. Sobat bisa merubah itu semua sesuai dengan keinginan sobat.

Demikianlah posting How To kali ini, yang membahas tentang Cara Membuat Related Post Bergambar Pada Blog, semoga dapat bermanfaat untuk sobat pembaca, jika masih ada yang ditanyakan mohon komentar. Sekian dan Terimakasih,.