Related Posts With Thumbnail



Related posts for blogger is a widget that help you to show your related blog posts below your every posts page, and this widget also show the thumbnail of posts to make this widget better.

Menampilkan Related Post (postingan terkait) membantu menambah jumlah pageview (tampilan halaman) blog sobat, pengunjung akan terpancing untuk melihat artikel terkait yang disajikan dalam bentuk thumbnail.
Untuk menampilkan artikel terkait widget ini akan menggunakan gambar yang di upload dari postingan sobat, seperti yang terlihat pada screenshot gambar dibawah ini....

Preview :


Untuk membuatnya simaklah langkah-langkah di bawah ini....

Langkah 1

Masuk ke dashboard blogger Anda dan arahkan ke Layout> Edit HTML dan centang "Expand Template Widget" kotak centang.

Langkah 2

Cari kode </head> dan gantikan dengan kode dibawah ini
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove -->
<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 type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>

<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

Langkah 3

Sekarang anda cari kode berikut (gunakan CTRL + F)
<div class='post-footer-line post-footer-line-1'>
atau
<p class='post-footer-line post-footer-line-1'>

Langkah 4

Letakkan kode dibawah ini setelah kode nomer 3 diatas.
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Selamat mencoba.
7 Comments
Related Post

Join the Discussion!

apasadjaBLOG
March 07, 2012 2:49 AM | Delete comment

kode langkah 4 itu taruh di sebelah mana bro?
udah coba taruh diatas dan dibawah "kode langkah 3" tapi ttp ga jadi. mohon bimbingannya
Thanks

MW crew
March 12, 2012 12:34 PM | Delete comment

@apasadjaBLOG ditaruh setelah kode nomor 3 bro. kalau masih belum bisa coba cek lagi dengan teliti, soalnya di blog ini bisa.

Dont give a spam please!
Untuk menyisipkan video, gunakan
Untuk menyisipkan gambar, gunakan
Untuk menyisipkan kode, gunakan
Untuk menyisipkan beberapa baris kode, gunakan
Untuk menyisipkan catatan, gunakan
Untuk menciptakan efek teks tebal gunakan