Cara Membuat Related Post Dengan Thumbinal

Coretan Bang Dadan on

Tuesday, January 15, 2013

Cara Membuat Related Post Dengan Thumbinal - Sahabat blogger setelah sebelumnya bang dadan membahas Cara Membuat Related Posts/Artikel Terkait dengan Icon, nah  kali ini bang dadan akan coba membahas Cara Membuat Related Post Dengan Thumbinal, Related Post atau Artikel Terkait mungkin sangat berguna dalam blog, biasanya related post di gunakan dalam satu kategory atau lebih, related post/artikel terkait ini adalah artikel yang berhubungan atau yang berkesinambungan dengan artikel yang sedang dibaca oleh para pengunjung.

Baiklah kalau sobat ingin Membuat Related Post Dengan Thumbinal, silahkan ikuti langkah-langkahnya dibawah ini:

Cara Membuat Related Post Dengan Thumbinal

---

1. Login ke Blog
2. Masuk ke dasbor dan pilih template
3. Klik edit HTML *Jangan lupa centang expand template widgate
4. Cari kode </head> copy kode dibawah ini dan simpan tepat diatas </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.3em;
font-weight: bold;
color: #000000;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000000;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://codecbd.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Kemudian cari lagi kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'/> 6. Kalau sudah ketemu copy kode dibawah ini tepat di atas kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'/>  Pilih saja salah satu. 

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=6;
var relatedpoststitle=&quot;Baca juga Artikel Terkait yang mungkin anda cari&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Keterangan:
var maxresults=6;  adalah jumlah artikel terkait yang ingin anda tampilkan

7. Selanjutnya simpan template anda
8. Selesai

Nah, mungkin hanya itu pembahasan artikel kita kali ini tentang Cara Membuat Related Post Dengan Thumbinal, bila sobat ingin Membuat Related Posts/Artikel Terkait dengan Icon dan Scroll silahkan klik disini.

Semoga artikel ini bermanfaat buat anda, semua. Akhirul kalam bang dadan ucapkan.

Billahitaufiq Walhidayah
Wassalamu'alaikum Wr.Wb

Labels: blogger tutorial, template hack

Thanks for reading Cara Membuat Related Post Dengan Thumbinal. Please share...!