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.
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 == "item"'>
<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, “Times New Roman”, 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-->
<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' 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="<data:post.url/>";
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-->
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)
4 komentar:
menarik.. :)
bisa aja kang.... gak da apa2 nya ma punya akang neh... heheheheeeee... langsung web GES
Thanks atas informasinya, , ,
Langsung ke TKP. . .
Salam kenal ya. . .
Kunjungi Blog ku ya. . .http://ahmad-roni.blogspot.com
wowo, keren bosss
Posting Komentar