Cara Membuat Related Post dengan Thumbnails

Assalamualaikum wr wb pada kesepatan hari ini saya mendiskusikan cara membuat Related Post dengan Thumbnails sebelum kita bahas tutorial ini mungkin buatuh penjelasan tentang related post sebelumnya di artikel Memasang related post di Blogger tapi yang kemaren related post biasa tanpa Thumbnails mungkin butuh sedikit penjelasan tentang apa itu Thumbnails? Thumnails adalah gambar yang terdapat dalam post yang akan tampil dalam widget tertentu (itu adalah pendapat saya) gak pakek panjang lebar lagi langsung ke pokok intinya 

• Seperti biasa kalian login di Blogger

• Jangn lupa untuk Expand Template Widget kemudian cari kode script </head> denga tekan CTRL + F
• Kemudian Masukkan kode script di bawah ini sebelum/di atas </head> 

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

• Setelah itu cari lagi kode 

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

• Dan letakkan script ini di bawahnya  

<!-- 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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End--> 

• Simpan Template

NOTE : var maxresults=5; Jumlah Artikel yang akan di tampilkan var relatedpoststitle="Related Posts"; Nama yang widget related post

Demikian diskusi kita kali ini tentang cara membuat Related Post dengan Thumbnails Terimakasih dan selamat beraktifitas

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari O_Om.com di inbox anda: