Membuat Related Post Thumbnail

Related Post Thumbnail
Setelah kemaren ane share tentang Cara Membuat Link Download Share ke Facebook sekarang ane mau share Cara Membuat Related Post dengan Gambar / Thumbnail di blog. Fungsi related post ini untuk menyajikan Artikel Post terkait dengan postingan yang sedang dibuka saat itu dan juga bisa menambah traffic karena menambah pageview pada blog. Sebelumnya ane pake Related Post dari linkwithin, tapi karena di linkwithin hanya me-redirect ke halaman post kita jadi ane untuk Membuat Related Post Tanpa Linkwithin. Cara ini berbeda dengan yang biasanya orang pake, cara ini hasil dari otak ane dengan mencari berbagai sumber yang telah ane rangkum dan menjadikan Related Post Thumbnail Fast Load. Oke langsung aja masuk ke cara membuatnya berikut ini :

1. Login Akun Blogger > Back Up dulu Template kalian untuk jaga-jaga jika terjadi kesalahan.
2. Masuk ke Template > Pilih Edit HTML > centang pada Expand Template Widget
3. Cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin> (copy ke notepad dulu biar lebih mudah)

#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: #585858;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{color:#51432f; Border-left: 1px solid #eee8e1; Border-right: 1px solid #eee8e1; margin-right: 5px; margin-left: 5px;}
#related-posts a:hover{color:#000000;}
#related-posts a:hover {background-color:#d4eaf2;}


4. Kemudian cari kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
5. Paste kan kode dibawah ini tepat dibawah kode yang anda cari (copy ke notepad dulu biar lebih mudah)

<!-- Related Posts with Thumbnails Code Start by Supercoolzz-->
<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=12&quot;' type='text/javascript'/></b:if></b:loop>
<b>Baca Juga Artikel Terkait Lainnya: </b>
<div style='background:#faf7f5; margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End by Supercoolzz-->

6. Ganti tulisan yang warna merah "Baca Juga Artikel Terkait Lainnya:" sesuai selera anda, kode berwarna hijau tersebut adalah kode warna background Related Post, angka yang berwarna biru adalah jumlah related post yang ingin ditampilkan.

7. Oke Lanjut cari kode </body>, kenapa diletakkan di bagian bawah dan tidak diletakkan di bagian <head> yaitu agar blog kalian diakses tidak lambat karena mengandung Javascript yang membuat blog anda lambat diakses dan menjadikan ini Related Post Thumbnail Fast Load.

8. Setelah ketemu kode </body> letakkan kode dibawah ini tepat diatas kode </body> (copy ke notepad dulu biar lebih mudah)

<!--Related Posts with thumbnails Scripts and Styles Start by Supercoolzz-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://supercoolzz.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End by Supercoolzz-->
Gimana sobat? Cukup rumit kan Cara Membuat Related Post Thumbnail yang ane berikan? Tapi lihat aja hasilnya pasti lebih Fast Load dan memuaskan. Oke sekian dari Supercoolzz jika ada pertanyaan, memberi saran, atau membenarkan silahkan berkomentar. Semoga bermanfaat!! :)