Cara Membuat Related Post Bergambar Pada Blog

Ketemu lagi dengan kami Fachry 18 blog, kali ini saya akan membahas tetntang bagaimana Membuat Related Post Pada Blog, Related post ini sangat berguna untuk blog kita agar para pengunjung mudah mencari postingan-postingan kita, selain berguna juga Related post ini juga sangat keren, apalgi di tambah dengan gambar Thumbnailnya, contohnya seperti gambar di bawah ini.

Untuk mempersingkat waktu langsung aja praktek deh....

• Pertama Silahkan login pada blog sobat.
• Klik Template kemudian Edit HTML
• 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/AVvXsEirX114uo4jqvCeQ68SEhpug4NCR3zNrsq07mTIyICXk7wfoTIgo5OeZt6gYNENq1g5uYMy5cKOSljplhjWnO0q6OfKqQVMbWqbJeEkK1j-N-wG81dC_QBRCUx0AJUk_mJWb6EpgnNs32M/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 hijau 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.

Terimakasih sudah mampir di fachry 18 blog

Tweet