Membuat Related Post Bergambar (Thumbnail) di Blogspot

Banyak sekali model-model related post,seperti model related post standart,model related post fungsi scroll dll. Begitupula dengan related post yang satu ini yakni related post bergambar atau dalam bahasa inggris thumbnail related post, dinamakan related post bergambar atau thumbnail related post karena tampilannya cukup menarik dengan adanya gambar atau thumbnail. Sehingga akan tampak lebih menarik dan merupakan salah satu cara untuk mempercantik blog yang kita miliki. Sebagai contohnya pada blog  http://www.m-edukasi.web.id/  lihatlah gambar 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://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

kode diatas silahkan download disini

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, anda tinggal masukan semua kode dibawah ini dibawah salah satu dari kode diatas yang anda 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-->

kode diatas silahkan download disini

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.

BACA SELENGKAPNYA »