Membuat Artikel Terkait Thumbnail

Ok kita mulai saja.
1. Login ke blog kamu
2. Klik Template > Edit HTML centang Expand Template Widget
3. Cari </head> Copy code di bawah ini lalu paste kan tepat di atas </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://eflianda-blogzzz.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Selanjutnya Cari <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'/> Biasa nya terdapat masing-masih 2 buah code di atas tersebut di dalam template, kamu letakan saja di bagian yang pertama. Lalu kamu copy code di bawah ini dan paste kan diatas code <div class='post-footer'> atau <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=5;
var relatedpoststitle=&quot;Baca juga Artikel Terkait yang mungkin kamu cari&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

5. kalau sudah jangan buru-buru di simpan, klik Pratinjau dulu untuk mengurangi kesalahan bila saja terjadi kesalahan dalam penempatan. kalau tidak ada pesan error baru kamu Simpan atau Ok.
6. Selesai,
sekarang coba kamu buka salah satu artikel untuk melihat apakah pekerjaan kamu berhasil atau tidak.


Silahkan  ganti Baca juga Artikel Terkait yang mungkin kamu cari dengan kata sesuka kamu



Silahkan ganti var maxresults=5; untuk jumlah artikel yang ingin di tampilkan.


Ok mungkin segitu aja dulu cara membuat artikel terkait Thumbnail semoga berhasil dan bermanfaat. kalau ada pertanyaan silahkan tinggalkan komentar dibawah.

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Naufal Ammar, Published at 21.54 and have 0 komentar