Membuat Related Post Bergambar Atau Thumbnail

Text Resizer: Click for Resizer

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 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://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.

Artikel Terkait:

Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Membuat Related Post Bergambar Atau Thumbnail
Dalam Kategori : Widget
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.