Cara Pasang Related Post With Thumbnail V.2

kesempatan kali ini saya memberikan trick cara membaur Related post with tumbnail versi yang ke 2 yang agak mudah untuk diikuti. Sekiranya setiap satu artikel yang dibaca oleh pelawat pada penghujung artikel akan mengkaitkan artikel yang lainnya berdasarkan kategori tertentu.Fungsi ini akan memudahkan pelawat mencari artikel yang bersangkutan, dan yang best nya widget ini ia menambahkan gambar atau thumbnail didalamnya. Saya berikan satu contoh gambar dibawah

<!--Related Posts with thumbnails Start-->

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}

#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}

#related-posts a{
color:black;
}

#related-posts a:hover {
background-color:#eeeeee;
}
</style>

<script type='text/javascript'>

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF7ras6xHCLQnt9C6L5BWQUMdENnPb2WWrXOnXYEQH1JjTtr6GI3wIE0fs_w-XDAsWSx1oKYnKPVXhnlZpHB1QPGVpK7edcDMNrP5qSLFmgj7CRTfnKEf9vLTPJ9KLbpoJpR6aqXmXXY0z/";

var maxresults=5;

var splittercolor="#cccccc";

var relatedpoststitle="You might also like:";

</script>

<script src='https://sites.google.com/site/bangkolis/javascript/maskolis.js' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails End-->

5.Lalu cari <p class='post-footer-line post-footer-line-1'/>
6.Kalau tidak ketemu coba cari post-footer-line
7.Letakkan kode berikut dibawahnya.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->

8.Terakhir Save template anda.

Keterangan:

• var defaultnoimage="http://lh5.ggpht.com/_15FopxVONSo/TD3yhixJLoI/ AAAAAAAADaY/gk-KFA5_m7w/noimage.png" ialah menunjukkan gambar yang muncul diposting yang tidak memiliki gambar. Anda boleh mengganti gambar tersebut dengan gambar lain. 
• var maxresults=5 menunjukkan jumlah postingan yang muncul pada related post. Silakan atur jumlah postingan yang mahu ditampilkan dengan mengganti angkanya. 
• var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan. 
• var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks 

yang berwarna merah dengan judul yang anda inginkan.
Bagi anda yang merasa cara diatas terlalu sulit, anda bisa menggunakan widget related post dengan thumbnail yang disediakan oleh linkwithin.com. Untuk cara pemasangannya sangat mudah, berikut langkah-langkahnya:

1.Buka situs http://www.linkwithin.com
2.Isi data-data yang diperlukan pada form yang telah disediakan

Email: alamat email anda
Blog link: Alamat blog dimana anda memasang widget related post with thumbnail
Platform: pilih Other
Width: pilih jumlah related post yang mau ditampilkan

Beri centang pada kotak kecil jika anda menggunakan background template yang gelap

3.Klik Get Widget
4.Copy dan paste kode script yang diberikan diatas </body> pada template blog anda lalu simpan template anda. Selesai Jika ada yang kurang jelas atau mengalami kendala dalam memasang related post dengan thumbnail silakan tinggalkan komentar anda dibawah ini. Saya akan berusaha membantu anda.