Membuat Related article dengan Thumbnails

Dengan Artikel Terkait yang disertai gambar tentu saja akan menarik pembaca untuk meng klik dan melihat isi dari tulisan kita yang lain yang masih ada hubungannya dengan artikle yang mereka baca sebelumnya. Dan hasil akhir yang bisa kita dapatkan adalah page view blog kita jadi menungkat, orang akan betah untuk berlama-lama di blog kita.  langsung saja kita praktekkan :

Cara Membuat Artikel Terkait dengan Disertai Thumbnails
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. copy code di bawah ini dan paste kode di atasnya </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, &#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-->

7. Cari kode di bawah ini

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

Atau jika tidak menemukannya cari kode berikut ini

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

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas (no.7)

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

9. Kita juga dapat menganti beberapa kode css, seperti berikut ini
var maxresults=5;
Berarti artikel terkait yang akan kita tampilkan adalah 5
var relatedpoststitle="Related Posts";
Judulnya adalah Related Posts

10. klik tombol Simpan Template jika sudah selesai.dan lihat hasilnya.
have fun.

Artikel Terkait:

Seputar Blog

• Cara Penulisan / Kode Berbagai Style di CBOX
• Cara Membuat Banner Iklan di Blog
• Cara Membuat Banner Animasi Secara Online
• Cara Memasang Iklan di Bawah Judul Postingan Blogger / Blogspot
• Shoutmix Tidak Gratis Lagi Sekarang
• Cara Menghapus Komentar di C-BOX
• Cara Upload JavaScript Menggunakan Google Code
• Merubah Tampilan Cursor Saat Diarahkan Ke Link
• Cara Menghapus Comment Di ShoutMix
• Cara Cepat Terindeks Google dengan Ping Service
• Memasang Sistem Komentar DISQUS pada Blogspot
• JS-kit Comment: Modifikasi Sistem Komentar di Blogger
• Merubah Kotak Komentar Dengan Intensedebate
• Cara Mengganti Tulisan Posting Lama,Beranda,Posting Baru
• Membuat Google Translate Tabbed untuk MengHemat Tempat
• Cara Menyembunyikan Rolling Widget Buku Tamu
• Membuat Rolling Widget Buku Tamu (Widget Bergeser)
• Membuat Kotak Komentar Tampil Beda
• Membuat Tampilan Komentar Berbeda Untuk Pemilik Blog
• Merubah Tampilan Labels Blog
• Merubah Tampilan Skin Label Di Blogger
• Memasang Musik di Blogger
• Memasang Music Pada Background Blog
• Memasang System Tuker Link Otomatis Pada Blog
• Membuat Banner Untuk Header