Membuat Related Post bergambar

Memasang related post atau artikel terkait pada postingan dapat memberikan memberikan keuntungan bagi pemilik blog. tapi yang akan saya jelaskan adalah related post yang bergambar .saat postingan kita di buka dan jika ada label yang sama dengan dengan label (kategory) yang pernah kita buat, maka disetiap bawah postingan akan tampil dengan Artikel lainnya dengan Category yang sama, ini hampir sama saja dengan postingan saya sebelumnya Membuat Artikel Terkait atau Related Post, hanya saja bedanya Artikel yang terkait akan berisi gambar

1. Login ke Blogger
2. Design (Rancangan) ---->> Edit HTML ---> Centang Expand Widget Template
3. Cari Kode tag </head> (cari dengan Ctrl+F)
4. Letakkan kode Script di bawah ini tepat di atas kode tag </head> tadi


<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{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

5. Kemudian Cari Kode Tag <div class='post-footer'>

6. Masukkan Kode Script di bawah ini tepat diatas kode tag <div class='post-footer'>

<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>
<b:if cond='data:blog.pageType == "item"'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

7. Save Template

pada kode var maxresults=8; diatas, angka 8 bisa sobat ganti sesuai dengan yang sobat mau.

Semoga bermanfaat bagi kita semua untuk cara Membuat Related Post Bergambar (Artikel Terkait Bergambar)

TERIMA KASIH

BERITA BOLA