Artikel Terkait Bergambar Pengganti LinkWithin

Sekarang saya akan berbagi sedikit dan mudahan berguna tentang Artikel Terkait bergambar. Dan mungkin sobat sudah tahu Artikel Terkait Link Within. Kali ini saya akan memberitahukan model lain dari artikel terkait bergambar, seperti di blog saya ini yang berada dibawah postingan.

Kalau dilihat sekilas sih Widget Atikel Terkait (Related Posts) yang disertai dengan thumbnail ini memang sangat mirip dengan widget dari LinkWithin. Bedanya, kalau LinkWithin mengacak semua postingan, kalo widget ini akan menampilkan sesuai dengan katagory dan susunan postingan di katagory tersebut.

Widget ini sangat banyak diminati, karena simple dan sangat bagus untuk mempercantik blog kita.

Ikuti langkah berikut:
1. Sekarang tuju Edit HTML.
2. Eeiittt jangan lupa backup template sobat dulu

3. Klik Expand Template Widget.
4. Kemudian letakkan kode berikut ini, tepat diatas kode </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-->

5. Kemudian cari kode berikut ini :

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

atau jika tidak ada, cari kode seperti dibawah ini :

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

6. Jika sudah ketemu, kemudian letakkan kode berikut tepat setelah kode diatas :

<!-- 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 tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

7. Simpan atau Save Template.

Catatan : mengganti jumlah related posts-nya, silahkan edit var maxresults=4, angka 4 adalah jumlah post yang akan ditampilkan, gantilah dengan angka yang sesuai lebar postingan blog sobat. Sedangkan untuk mengganti judul dari related posts, silahkan edit var relatedpoststitle="Related Posts", ganti dengan kalimat sesuai keinginan sobat.