Membuat Related Post dengan Thumbnail


Dahulu sekali saya pernah share tentang cara membuat "anda mungkin juga meminati" [linkwithin] di blog. Bentuknya hampir sama dengan yang ini, namun perbedaanya pada post yang ditampilkan. Kalau yang dulu menampilkan postnya secara acak, tidak ada hubungannya dengan artikel atau kategori yang sudah dibuat. Namun jika kita menggunakan script ini, maka post yang akan ditampilkan akan ditampilkan menurut label/kategori. Langsung saja begini caranya.

1. Cadangkan dulu template kamu, buat jaga-jaga.
2. Cari kode </head> (gunakan ctrl+F untuk mencarinya), lalu ganti/replace kode tersebut dengan kode ini

<!--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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihM8navrY33x2E0-jYwZJEvfO9e6ShlsWDOdx6HqDM9kl5QYalXmNXkGzXCwPFP_qBRaLpJO7aDVikf_2PDWKVWhCtC7FPrBLRJSNviJR5_elsSJg8m62smRZYQYOtenzROfxG-nG6Auw/s400/noimage.png&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</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-->
</head>


3. Selanjutnya kamu cari
<div class='post-footer-line post-footer-line-1'> 
atau
<p class='post-footer-line post-footer-line-1'>
atau
<data:post.body/>
pilih salah satu dari kode diatas

4. Lalu tepat dibawah kode yang kamu pilih diatas, pastekan kode berikut

<!-- 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 alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='http://image.bloggerplugins.org/blogger-templates.png' style='border: 0'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

5. Selesai, simpan.

Tambahan :
untuk yang warna merah bisa di edit sendiri atau tetap dibiarkan seperti itu.

Semoga berhasil ya sobat, senang bisa berbagi :)
[tested and work by me] lihat related post saya dibawah...

Comments