Sobat tentunya sudah melihat beberapa artikel saya yang sudah menggunakan Artikel Terkait Thumbnails ini. Tentunya menarik dan k'ren kan?
Oh y sebelumnya saya berterima kasih banyak kepada MAS PUTU yang sudah berbagi ilmunya dan telah mengijinkan saya untuk mengCopas artikelnya. Hhee...
Baiklah, untuk lebih jelasnya mari kita langsung ke TKP sob.
Langkah-langkah Membuat Artikel Terkait yang berisi Thumbnails
- Login ke Blogger dengan ID sobat
- Pada halaman Dasbor, pilih Tata Letak.
- Kemudian pilih Edit HTML
- Backup / simpan template anda dulu.
- Beri tanda centang pada Expand Template Widget
- Cari kode </head>
- Copas (copy-paste) kode script dibawah ini dan simpan / taruh persis di atasnya
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<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.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, 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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
- Cari kode <div class='post-footer-line post-footer-line-1'> atau jika tidak ditemukan cari kode berikut ini <p class='post-footer-line post-footer-line-1'>
- Jika sudah ketemu, copas (copy-paste) kode script dibawah ini, kemudian taruh di bawah salah satu kode tersebut tadi.
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Keterangan :
- var maxresults = 5; berarti artikel yang akan ditampilkan adalah : 5 =?
- relatedpoststitle var = " Related Posts "; Bisa diganti dengan Artikel Terkait atau Nama Lainnya
Maka hasilnya seperti ini :
Bagaimana ??
Gampangkan?
Jika sobat ingin lebih jelas, sobat bisa langsung lihat di artikel aslinya DISINI
Special Thank's : MAS PUTU
tq sob...sangat membantu...kunjungan balik di tunggu...