MODIFIKASI RELATED POST DENGAN THUMBNAIL

Mungkin artikel tentang cara membuat related post sudah banyak dan mudah kita cari,tinggal bertanya ama mbah goggle aja,sudah muncul ribuan tutorial cara membuat related post untuk blogger,tapi gpp saya tetap membuat postingan ini,siapa tau ada yang baca dan ingin tau tentang cara modifikasi related post dengan thumbnail pada blogger. .oke langsung saja sob,ke cara membuatnya. . ! !

CARA MEMBUAT RELATED POST DENGAN THUMBNAIL

1. Login ke blogger kalian masing-masing
2. Pada menu klik tempelate>edit HTML
3. Tapi download atau backup dulu tempelate anda,untuk berjaga-jaga kalau terjadi kesalahan
4. Selanjutnya Cari kode </head> pada tempelate anda
5. Jika sudah ketemu copy kode di bawah ini,dan letakan di atas kode </head> tadi

<!--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{
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/AVvXsEg0hQjmA-Fg-M-JiYhj0lpU2exlz034-N0RBXms2A_zp3-vpZ5CrLUPUEsxOVrHkeOc2UxpeWlJzMTfjuhfr5KCAKz4vSMpnEMwX3tQtkLmBb3EQbD6STTIAzWq4T6Vo3-6SCzQfq7N8_A/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

KETERANGAN:

• Kode yang berwarna BIRU judul dari widget related post,silahkan ganti dengan kata-kata yang anda inginkan
• Dan kode yang Berwarna MERAH itu adalah jumlah related postnya,silahkan di seesuaikan

Masih di edit tempelate,selanjutnya cari kode <data:post.body/> (jika pada tempelate anda menggunakan readmore otomatis biasanya kode <data:post.body/> ada dua,cari kode yang kedua.) Copy kode dibawah ini dan letakan dibawah <data:post.body/> yang kedua.

<!-- 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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End--> 

Klik preview dulu,jika tidak error save tempelate anda,selesai sekarang di tempelate anda sudah terpasang realted post dengan thumbnail. .
Begitulah cara membuat related post dengan thumbnail,semoga bermanfaat dan selamat mencoba.