Membuat Related Post dengan Gambar

Membuat Related Post dengan Gambar

Cara Membuat Related Post dengan Gambar di Blogspot

1. Copy + Paste kode di bawah ini DI ATAS kode </head>

 <!--Related Posts with thumbnails Start-->
<b:if cond=data:blog.pageType == &quot;item&quot;>
<style type=text/css>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:100px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type=text/javascript src=http://helplogger.googlecode.com/svn/trunk/relatedposts.js />
</b:if>
<!--Related Posts with thumbnails End-->

 Catatan: kode berwarna biru adalah ukuran gambar/foto yang akan ditampilkan, bisa diubah sesuai selera, bisa lebih besar atau lebih kecil.

2. Copy + Paste kode di bawah ini DI ATAS kode <div class=post-footer> (di template yang saya pake ada dua kode seperti ini,dan saya pilih kode YANG KEDUA):

<!-- Related Posts with Thumbnails Code Start-->
<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><b:if cond=data:blog.pageType == &quot;item&quot;>
<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=5&quot; type=text/javascript/></b:if></b:loop>
<script type=text/javascript>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class=clear/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

 Catatan: kode berwarna biru adalah jumlah related post, bisa diubah sesuai selera, bisa lebih besar atau lebih kecil.

download file now