TIPS AND TRIK BLOG: Artikel Terkait Bergambar Pengganti LinkWithin

posted by rhoel macazzart:)

Wah lama sekali ya saya tidak posting, maklum akhir tahun jadi agak sibuk dalam urusan pekerjaan rutin didunia nyata. Saya juga mengucapkan permohonan maaf kalo komentar sobat-sobat agak terlambat saya balas, apalagi pesan di soutmix adduuuhhh udah 10 hari belum dibalas-balas, Insya Allah kalo udah posting ini saya akan balas semua kunjungan sobat.

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 buatan dari Aneesh ini sangat banyak diminati, karena simple dan sangat bagus untuk mempercantik blog kita.

Langsung aja ya…..

1. Sekarang tuju Edit HTML.
2. Eeiittt jangan lupa backup template sobat dulu yaa
3. Klik Expand Template Widget.
4. Kemudian letakkan kode berikut ini, tepat diatas kode </head>

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

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 :

<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="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

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 ya..

Read more: http://www.bloggerafif.com/2011/01/membuat-auto-readmore-pada-blogspot.html#ixzz1SMV0Oahe