Cara Membuat Related Post dengan Gambar

Tutorial | Cara Membuat Related Post dengan Gambar / Thumbnail - Berikut ini cara membuat related post dengan gambar yang terletak dibawah postingan blog.
Fungsi related post ini untuk menyajikan artikel lain kepada pengunjung blog. Biasanya related post diambil dari label dan tidak ada gambarnya, tapi related post kali ini berbeda, terdapat cuplikan atau thumbnail agar menarik pengunjung agar meng klicknya, Berikut ini cara membuatnya :

• Login
• Design > Edit HTML > Centang expand widget templates.
• Cari kode </head> (Ctrl+F untuk mempermudah pencarian) kemudian paste kode di bawah ini tepat di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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{</head></head><!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {float:center;
text-transform:none;
height:100%;
min-height:100
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicikThcQKIAjAZ5NBuJF0GdhIppuATlfR5cM5Lwb4CKoY5v72UaLJ4-PcVTPkB56L-aQmRm2cOunrjzoYRDsDvFxLmRVJwqYnxas298DDHibXYgVvSscDExP8aVUF0PTVTP0hVqb8SQaI/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

• Lanjut lagi, cari kode seperti dibawah ini

<div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>

• Kalau sudah ketemu, sekarang paste kode berikut di bawah kode tadi.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>

• Save template dan selesai.

Sekian sahabat Blogger Tutorial, postingan selanjutnya ditunggu aja yah :)

source:http://trickstipsblog.blogspot.com/2012/12/cara-membuat-related-post-dengan-gambar.html