Cara membuat related post dengan thumbnail | gambar

<p>Your browser does not support iframes.</p>

Cara membuat related post, artikel terkait, baca juga, dengan thumbnail | gambar. Sebuah tampilan menu artikel dibawah postingan yang memudahkan pengunjung blog dapat dengan mudah memilih artikel postingan yang ingin di bacanya. Penasaran dengan widget yang satu ini anda bisa perhatikan gambar diatas atau pada halaman berikut ini klik disini. Pada gambar dan halaman tersebut menampilkan sekilas judul artikel beserta gambarnya sering disebut dengan related post, artikel terkait, baca juga dll dengan thumbnail atau gambar. Untuk memasang widget ini ikuti langkahnya sebagai berikut ini.
1. Login blog anda kemudian ke menu edit HTML.
2. Beri tanda centang pada Expand template widget seperti berikut ini.

Expand Template Widget

3. Sekarang cari kode dibawah ini dengan menekan F3 atau CTRL+F agar lebih memudahkan dalam pencarian.

</head>

4. Setelah kode diatas ditemukan letakan kode dibawah ini diatasnya.

<!--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://madiuncoolblog.googlecode.com/files/thumbsnail.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Langkah selanjutnya cari kode di bawah ini.

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

Bila anda menemukan 2 kode seperti diatas pilih yang pertama.

6. Letakan kode berikut dibawah kode nomer 5.

<!-- 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=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Silahkan ubah angka yang berwarna hijau dengan jumlah artikel yang akan anda tampilkan
Silahkan ubah teks yang berwarna pink dengan kalimat sesuka anda misal Baca juga, Artikel yang lain, dll

7 . Bila sudah seleseai semua silahkan simpan template kemudian silahkan di cek bila belum berhasil silahkan ulangi kembali sesuai langkah-langkah diatas.

sumber: http://madiuncool.blogspot.com