Membuat Artikel Terkait dengan Thumbnail

Related Post atau Artikel Terkait sangat berguna untuk meningkatkan Page View blog kita, selain terlihat menarik juga memudahkan pemilik blog atau web untuk mengarahkan pengunjung agar berbetah-betah ria atau bahkan berputar-putar dalam blog bersangkutan, ini tentu saja menjadi hal yang sangat menguntungkan pemilik blog..he..he...
Nah kali ini saya ingin berbagi cara membuat related post yang lebih menarik yaitu dengan menambahkan thumbnail atau gambar didalamnya. Agar lebih jelas perhatikan gambar dibawah ini. 

Adapun cara membuatnya sobat ikuti langkah-langkah berikut:

1. Silahkan Masuk >>Login ke akun blog sobat
2. Lalu Klik >> Template>> kemudian >> (Cadangkan/pulihkan) Download template lengkap terlebih dahulu untuk mencegah Error
3. Setelah itu pilih Edit HTML dan centang Expand Template Widget
4. Silahkan sobat Cari kode </head> gunakan CTRL+F untuk mempercepat pencarian.
5. Setelah ketemu, kemudian sobat letakkan semua kode berikut tepat di atas atau sebelum kode </head>

<!--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:#00FF00; 
 
</style> 
<script src='http://belajarblogging.googlecode.com/files/releatedimage.js' type='text/javascript'/> 
</b:if> 
<!--Related Posts with thumbnails Scripts and Styles End--> 


7. Kalau sudah, silahkan sobat cari kode berikut:

<div class='post-footer-line post-footer-line-1'> gunakan CTRL+F untukmempermudah pencarian.

8. kemudian sobat letakkan kode di bawah ini tepat di bawah atau sesudah kode <div class='post-footer-line post-footer-line-1'>

<!-- 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=7;
var relatedpoststitle="Related Post";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

9. Sebelum di simpan, silahkan sobat preview atau pratinjau terlebih dahulu.
10. Silahkan di SIMPAN atau Save, jika hasilnya sudah oke.
11. Simpan dan lihat hasilnya.

Keterangan:

- var maxresults=7; = angka 7 adalah related post  yang akan di tampilkan, silahkan sobat ganti angkanya.

- background-color:#00FF00; = adalah warna Background bila tersentuh Mouse, silahkan sobat ganti kode warnanya seperti yang sobat inginkan. 

Demikian sedikit berbagi tentang Related Post mudah-mudahan berguna bagi blogger semua