Membuat Artikel Terkait dengan Thumbnail

Sekarang saya akan membahas tentang Trik Blog yang sudah saya beri judul Membuat Artikel Terkait dengan Thumbnail. Nah, kalo kita lihat di beberapa blog yang membahas tentang Artikel Terkait, tampilannya yang paling utama adalah di bawah posting. Trik yang akan saya jelaskan juga begitu namun bedanya menggunakan thumbnail. Eh, tapi kayaknya udah banyak yang membahas Membuat Artikel Terkait dengan Thumbnail tapi saya beda. Mereka biasanya menggunakan pihak ketiga yaitu LinkWithin dan saya tidak memakainya (hehe). Untuk screenshot kita dapat melihat gambar berikut ini:

Dari pada moler-moler nggak karuan, ayo deh kita lakukan caranya:

1. Login di Blogger —> Layout/Tata Letak —> Edit HTML
2. Centang pada expand template widget
3. Cari kode </head> dan ganti dengan kode berikut ini:

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

Kemudian cari kode berikut:

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

Kalau tidak ada coba kode ini:

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

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

<!-- 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.deltanetkabunan.com/2011/04/membuat-artikel-terkait-dengan.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.deltanetkabunan.com/' style='display:none;'>Delta Net</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-->

Anda dapat menyesuaikan jumlah maksimum Artikel terkait yang tampil dengan mengedit kode yang berwarna biru (judul)

Jika terdapat kesalahan, mohon beritahu saya dengan mengisi kotak komentar, nanti akan secepatnya saya jawab
Semoga bermanfaat…