Cara Membuat Related Post dengan Gambar

Sumber Gambar: http://ndigit-media.blogspot.com/2014/03/stempel.html

POSTING tentang cara membuat related post dengan foto atau gambar thumbnail (Related Posts with Thumbnail Image) diperlukan untuk posting terkait yang menampilkan foto dan judul.

Demo

Sobat boleh mempraktekan ini. Caranya, sebelumnya HAPUS dulu SEMU kode di template yang bertuliskan “related post”, lalu lakukan dua langkah mudah berikut ini

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 merah 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 biasanya ada dua kode begini, 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 merah adalah jumlah related post, bisa diubah sesuai selera, bisa lebih besar atau lebih kecil.

Jangan lupa SAVE Template! Good Luck and Happy Blogging!

Sumber Artikel