Artikel Terkait Bergambar Pengganti LinkWithin

Sekian lama blog ini saya isi dengan artikel-artikel seru (ngeles deh kalo lagi males mikir :D), saatnya saya isi blog ini dengan artikel tips ngeblog di blogspot lagi. Apakah anda ingin memasang tampilan Artikel terkait seperti gambar diatas...?? Mari kita coba bersama-sama membuatnya. Dulu saya mencoba membuat artikel terkait bergambar dengan linkwithin, tetapi karena setelah membaca-baca saya dapat alternatif lainnya, ya saya share saja ke teman2 blogger, siapa tahu ada yang berminat.

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 kategory dan susunan postingan di katagory tersebut.

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

Langsung saja kita coba pasang :

1. Pertama, buka halaman Edit HTML.

2. Jangan lupa backup templatenya sebelum utak-atik template dengan klik Download Template Lengkap

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="Postingan Terkait di Kulimandiri.Com";

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.

Semoga bermanfaat

Zona Iklan
(Silahkan di klik satu kali saja)