Memasang Artikel Terkait Thumbnails Pada Postingan Blog

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 == &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.6em;
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://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 == &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://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=&quot;<data:post.url/>&quot;;
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 
Jika sudah selesai simpan template sobat dan lihat hasilnya.
Maka hasilnya seperti ini :
Bagaimana ??
Gampangkan?

Jika sobat ingin lebih jelas, sobat bisa langsung lihat di artikel aslinya DISINI
                                                                                                                     

Special Thank's : MAS PUTU
                                                                                                                       

comment 4 komentar:

Supplier Alat Listrik on Apr 25, 2011, 10:31:00 PM said...

Pertamax. Mantap ilmunya sob.

Pasang Iklan Gratis on Apr 25, 2011, 10:35:00 PM said...

Ok deh infonya, dapat sumber inspirasi lagi deh.

Muhammad Fakhrial Zld on Apr 25, 2011, 10:41:00 PM said...

sudah saya coba sob... dan hasilnya mantabbbbbb

BLOGBEGO on Apr 25, 2011, 10:53:00 PM said...

trims mas Ray sudah mencatumkan Admin saya, mengenai emoticon kalau yang seperti di comment saya bagaimana, kawan cukup masukkan script linknya saja pada template HTML, dwi fungsi : bisa di postingan, sbg admin juga bisa, cukup mengingat kodenya saja :54 :26

Post a Comment

Berikut adalah beberapa aturan untuk memberikan komentar di blog ini :

1. Semua komentar kecuali spam dipersilahkan.
2. Anda dipersilahkan jika ingin membuat permintaan dan pertanyaan.
3. Jangan gunakan nama-nama seperti Admin, Penulis, Operator, atau yang lainnya untuk memberikan komentar karena akan membuat orang lain salah paham.
4. Tinggalkan Alamat Email/Url Blog Anda, jika Anda memberi komentar sebagai "Anonymous"

"Terima kasih banyak telah berkomentar"

Delete this element to display blogger navbar

 
© cagappaeh | Design by Blog template in collaboration with Concert Tickets, and Menopause symptoms
Powered by Blogger