Trik Membuat Related Post dengan Thumbnail

Salam blogger, pada posting kali ini boytriks akan membahas cara membuat related post dengan thumbnails image. Related Post atau Artikel Terkait digolongkan berdasarkan jenis kategori atau label pada posting kita. Artikel terkait ini kita letakan dibawah posting. Artikel Terkait juga akan disertai Thumbnails horizontal dan Judul Blog. Fungsi related post yaitu menyajikan informasi lain yang berkaitan dengan artikel yang kita baca. Untuk contohnya sendiri dapat sobat lihat di bawah posting blog ini.

Nah jika sobat tertarik untuk membuatnya ikuti saja tutorial dibawah ini:

1. Log in ke account blogger sobat

2. klik menu Template

3. kemudian pilih Edit Html

4. pilih lanjutkan untuk masuk ke Setup Html

5. setelah masuk jangan lupa centang kotak kecil di pojok kiri yang 

    bertuliskan "expand template widget"

6. selanjutnya sobat cari kode </head> dan untuk mempermudah pencarian 

    sobat tekan tombol ctrl+f pada keyboard sobat

7. paste kode dibawah ini diatas kode </head> tadi

<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.2em;

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://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>

</b:if>

8. kemudian sobat cari salah satu kode berikut ini:

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

    atau <p class='post-footer-line post-footer-line-3'>

9. Setelah itu letakan kode dibawah ini, dibawah salah satu kode diatas

<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://amatulla83.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle=&quot;Related Posts&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

10. dan terakhir Simpan Template

Selamat mencoba dan semoga bermanfaat