Membuat Related Post / Artikel Terkait Dengan Gambar Thumbnail

19.24 // 0 komentar // Unknown // Category: Tutorial Blog //

Agar supaya pengunjung atau pembaca blog kita tahu apa aja yang berhubungan dengan artikel yang dibaca, maka perlu kita buatkan Related Post / artikel terkait pada setiap halaman artikel apa lagi dengan gambar dari artikelnya (Related Post Thumbnail), ini akan memamncing pengunjung untuk membukanya. Mungkin tutorial ini sudah banyak di blog-blog tetangga, tapi disini saya akan mencoba dengan tampilan yang sedikit berbeda. Kurang lebih tampilannya seperti gambar di bawah ini :



Sebelumnya, jika di blog anda sudah terpasang Widget Related Post Biasa (tanpa gamabar) dan ingin menggantinya dengan Related Post Thumbnail, silahkan hapus terlebih dahulu kode Widget Related Post Biasa anda.

Oke, langsung aj ke caranya:

1, Ke Layout, lalu Edit HTML
2, Sisipkan kode CSS di bawah ini di atas kode ]]></ b: skin>

#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:0px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
text-align:center;
margin:0px 10px 0px 12px;
}
#related-posts a:hover{
color:#B8240D;
}

3, Kemudian Sisipkan kode di bawah ini dibawah kode ]]></ b: skin>

<script src="http://tutorialmacho.googlecode.com/files/relatedthumbs.js" type="text/javascript">

4, Selanjutnya cari kode <div class='post-footer-line post-footer-line-1'> Kalau anda tidak menemukan kode tersebut, cari kode ini :<p class='post-footer-line post-footer-line-1'>  
Letakkan/Copas kode di bawah ini DI BAWAH salah satu kode tersebut di atas. Berikut kodenya :

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

5, Simpanlah Template

NB:
- Related Post Thumbnail akan menampilkan 5 Artikel terkait berdasarkan label artikel. silahkan tambah atau mengurangi jumlah Related Post yang ditampilkan dengan mengganti angka 5 (Lima) pada kode var maxresults=5; menjadi lebih banyak atau lebih sedikit.