Membuat Related Post Bergambar Atau Thumbnail

Bagi sobat yang sudah mencoba related post bergambar Atau Thumbnail tentu akan lebih tertarik lagi menggunakannya, karena tampilannya yang cukup menarik dengan adanya gambar (thumbnail) Sebagai Backroundnya. Kekurangan dari related post bergambar ini adalah related post ini terlalu memakan tempat pada halaman blog sobat. Sehingga kita tidak dapat menampilkan jumlah artikel secara maksimal. Nah ada salah satu cara untuk memaksimalkan related post ini ialah dengan alternatif marquee atau berjalan

Keuntungan dari trik ini adalah sobat dapat menampilkan artikel blog sobat dengan jumlah banyak tanpa memakan tempat pada halaman blog yaitu dengan marquee atau berjalan.untuk demonya klik tombol demo dibawah ini.

Bagaimana setelah anda melihat contoh diatas apakah sobat tertarik untuk membuatnya. Jika tertarik untuk membuat related post bergambar, langkah-langkahnya sebagai berikut :

1.Log in ke blogger.com dengan ID yang dimiliki
2.Klik Rancangan pada dashboard menu
3.Klik Edit HTML, jangan lupa memberi tanda centang pada "Expand Widget Templates"
4.Selanjutnya cari kode berikut </head>
5.Letakkan kode di bawah ini sebelum kode tersebut :

<!--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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

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

6. Sekarang cari lagi kode dibawah

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

Jika tidak menemukan kode diatas, coba cari kode seperti ini

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

Kalo sudah ketemu, sobat tinggal masukan semua kode dibawah ini dibawah salah satu dari kode diatas yang sobat temukan.

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

7. Langkah terakhir Simpan Template kemudian lihat hasilnya.

Keterangan : kode yang berwarna merah dapat diganti sesuai dengan yang sobat inginkan, #585858 (kode background), Angka 5 menunjukkan jumlah artikel yang tampil pada related post, Related Posts (Judul yang diinginkan).

Selamat mencoba dan Semoga bermanfaat,silahkan tulis komentar dibawah ini jika ada pertanyaan. Silahkan baca juga artikel selanjutnya tentang membuat relatedpost bergambar dan bergerak.