Sebelumnya saya sudah pernah memposting mengenai
cara membuat related post untuk menampilkan list judul postingan yang berhubungan dengan postingan utama. Sehingga memudahkan pembaca untuk mencari topik yang berkaitan. Untuk mengetahui lebih banyak tentang related post baca
disini.
Nah kali ini saya ingin membahas cara membuat related post yang lebih menarik yaitu dengan
menambahkan thumbnail atau gambar didalamnya.
Agar lebih jelas perhatikan gambar dibawah ini.
Menarik bukan? Cara ini bisa digunakan bersamaan dengan related post tanpa thumbnail. Bagi anda yang tertarik untuk memasangnya, ikuti langkah-langkah berikut:
1. Buka menu Design -> Edit HTML
2. Beri centang pada "Expand Widgets Templates"
3. Letakkan kode berikut diatas </head>
<!--Related Posts with thumbnails Start-->
<!-- remove --><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/AVvXsEjl0xq38FHI42ICgnuiIB8sfTHOhVFH52BzNvADTxIsx_C28kScPscgY0krCdhcV0u9x4-pRAEcj6Is4z9gQZnBS2v1IIEac90XTnaToYz3NgeHD3ONFudyrMHFRWEW5wCcEfjXmEE54deD/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="You might also like:";
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->
4. Lalu cari
<p class='post-footer-line post-footer-line-1'/>
5. Kalau tidak ketemu coba cari
post-footer-line
6. Letakkan kode berikut dibawahnya.
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->
7. Kalau sudah Save template anda.
Sumber : http://www.hermanblog.com
