Celoteh Sang Galang

Blog Tempat Berbagi Tips dan Trik Dunia Blogger
English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified
Celoteh Sang Galang
Hanya Sebuah Catatan...

Cara Membuat Artikel Terkait Dengan Thumbnails

Posted by Galang 26 April 2011
Daftar Sekarang Bonus $10 langsung dari PROFITCLICKING

Dengan Artikel Terkait yang disertai gambar tentu saja akan menarik pembaca untuk meng klik dan melihat isi dari tulisan kita yang lain yang masih ada hubungannya dengan artikle yang mereka baca sebelumnya. Dan hasil akhir yang bisa kita dapatkan adalah page view blog kita jadi meningkat, orang akan betah untuk berlama-lama di blog kita.


Cara Membuat Artikel Terkait dengan Disertai Thumbnails

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini 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://galang.googlecode.com/files/relatedposts.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

7. Lalu cari kode di bawah ini

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas.

<!-- 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://celoteh-galang.blogspot.com/2011/04/cara-membuat-artikel-terkait-dengan.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://celoteh-galang.blogspot.com/' style='display:none;'>Celoteh Galang</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-->

10. Simpan Template jika sudah selesai.

Keterangan.
Kita juga dapat menganti beberapa kode css, seperti berikut ini

var maxresults=5; --> Berarti artikel terkait yang akan kita tampilkan adalah 5

var relatedpoststitle="Related Posts";  --> Judulnya adalah Related Posts

GET UPDATE ARTIKEL MENARIK CELOTEH GALANG
Dapatkan kiriman artikel terbaru langsung ke email anda!

Artikel Terkait:

  1. Widhi Says:
  2. makasih dah share...
    cuman kok gak bisa ya tutornya?
    apa saya yang salah ya???
    mohon petunjuknya bang :D

     
  3. dulu saya pernah mempraktekan nya, tapi malah gag tau ilang dimana..
    semoga saja thmnails nya buat selamanya..

     
  4. thanks gan izin make dan kopas tutornya ya..

    kapan2 mampir ke blog ane gan

    http://ruanginfo-bagus.blogspot.com/

    kalau bisa follow blog ane gan,nanti ane follback langsung,heheh

     
  5. Galang Says:
  6. @Dony EkaWijaya:boleh kok gan di kopas asal dikasih link sumbernya...

     
  7. langsug praktek ne...tengkiu

     
  8. ari atman Says:
  9. Apakah caranya di atas sma dengan blog sobat..!! soalnya klu yg d blog ini bagus gan.. ?? balas di blog sy y :
    http://ariatmancool.blogspot.com/

     
  10. infosaja.com Says:
  11. Simpel dan mudah juga kalau sudah ada kodenya dan tinggal menempatkannya.

     

Posting Komentar


close