Cara Membuat Related Post Dengan Efek Thumbnail

kali ini saya akan berikan satu tutorial yaitu cara membuat related post dengan menyertakan thumbnail. Related post atau artikel terkait dapat memudahkan pembaca untuk mencari topik yang berkaitan. Umumnya template blogger sekarang sudah di katakan rata-rata telah memenuhi kreteria sebagai template user friendly.

Salah satu komponen pada template yang user friendly adalah related post, tapi berbeda dengan template standar bawaan dari blogger, template tersebut belum di sertai dengan komponen related post sehingga anda harus menambahkan sendiri konten tersebut pada template anda.

Jadi bagi anda yang tertarik untuk memasangnya. Berikut cara membuat Related Post di bagian Bawa Content blog dengan Thumbnail.

1. Login telebih dahulu ke Blogger anda
2. Klik > Edit HTML
3. Centang dulu "Expand Widgets Templates"
4. Letakkan kode berikut diatas </head>

SCRIPT CODE                                                                                                                         </>

<!--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 #dcdcdc;}
#related-posts a:hover{background: #4682B4;}
#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:1px solid #dcdcdc;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 #dcdcdc;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-->

5. Selanjutnya cari  <div class='post-footer'>
6. Kemudian letakkan kode berikut tepat di atas kode <div class='post-footer'>

SCRIPT CODE                                                                                                                         </>

<!-- 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-->

7. Terakhir Save template anda

Sekian cara membuat Cara Membuat Related Post dengan Thumbnail.