Membuat Related Post Mirip Widget LinkWithin

Sahabat blogger pemula yang baik hatinya, sepertinya sobat tidak asing lagi dengan widget related post dari linkwithin, dimana wiget ini menampilkan artikel terkait di bawah postingan lengkap dengan thumbnailsnya. Berikut screenshot widget linkwithin yang biasa kita gunakan :

Nah sahabat blogger pemula kali ini saya akan share cara membuat artikel terkait mirip dengan widget linkwithin, untuk mempersingkat waktu mari kita mulai pembahasanya..

• Login ke akun blogger sobat
• Masuk ke pengaturan Template
• Klik Edit Template
• Cari kode </head> dan letakkan kode berikut tepat di atasnya

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

• Langkah selanjutnya adalah cari kode  <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'> 
• Letakkan kode berikut tepat di bawah salah satu kode di atas

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

Catatan :
Perhatikan tulisan yang berwarna biru :

1. var maxresults=5; ganti angka 5 untuk menambah atau mengurangi jumlah artikel terkait yang ingin di tampilkan
2. var relatedpoststitle="Related Posts"; ganti atau sesuaikan dengan titel yang sobat kehendaki

Selamat dan semoga berhasil