Pengikut


Salam blogger, pada posting kali ini boytriks akan membahas cara membuat related post dengan thumbnails image. Related Post atau Artikel Terkait digolongkan berdasarkan jenis kategori atau label pada posting kita. Artikel terkait ini kita letakan dibawah posting. Artikel Terkait juga akan disertai Thumbnails horizontal dan Judul Blog. Fungsi related post yaitu menyajikan informasi lain yang berkaitan dengan artikel yang kita baca. Untuk contohnya sendiri dapat sobat lihat di bawah posting blog ini.

Nah jika sobat tertarik untuk membuatnya ikuti saja tutorial dibawah ini:
1. Log in ke account blogger sobat
2. klik menu Template
3. kemudian pilih Edit Html
4. pilih lanjutkan untuk masuk ke Setup Html
5. setelah masuk jangan lupa centang kotak kecil di pojok kiri yang 
    bertuliskan "expand template widget"
6. selanjutnya sobat cari kode </head> dan untuk mempermudah pencarian 
    sobat tekan tombol ctrl+f pada keyboard sobat
7. paste kode dibawah ini diatas kode </head> tadi
<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.2em;
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://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>
</b:if>
8. kemudian sobat cari salah satu kode berikut ini:
    <div class='post-footer-line post-footer-line-3'>
    atau <p class='post-footer-line post-footer-line-3'>
9. Setelah itu letakan kode dibawah ini, dibawah salah satu kode diatas
<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://amatulla83.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Related Posts&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
10. dan terakhir Simpan Template

Selamat mencoba dan semoga bermanfaat

Posting Komentar

  1. artikel bagus sobb ,,boleh di salin tuh ,, salam blogger visit back oke

    BalasHapus
    Balasan
    1. iya gan silahkan dicopas, tapi kalo sobat tidak keberatan silahkan link sumber di postingnya, makasih

      Hapus
  2. thanks infonya sob..sudah dipraktekan dan berhasil...:)

    BalasHapus
    Balasan
    1. iya sama sama sob, thank's komennya

      Hapus
  3. kok di saya tidak bisa y..???
    tumbnail tidak muncul
    tmpilan masih list kebawah..
    sprti tdk berfungsi script di atas

    BalasHapus
    Balasan
    1. mungkin ada kesalahan saat menyimpan scriptnya, coba lagi untuk memastikan gan.

      Hapus
  4. Salam kenal + nice post, mohon kunbalnya karna saya kira juga menulis dengan tema yang sama yaitu MEMBUAT RELATED POST / ARTIKEL TERKAIT

    Thanks Salam Blogger

    BalasHapus
    Balasan
    1. thanks bro buat komentarnya, sukses terus

      Hapus
  5. kenapa nih, ko ga bisa di blog sy ?

    BalasHapus
    Balasan
    1. masa sih gan, udah ada kali bawaannya atau gk cocok sama template nya gan, makasih

      Hapus
  6. Balasan
    1. sama sama bro, makasih juga buat komentarnya bro hhha

      Hapus
  7. Keren sob artikelnya sangat bermanfaat. Terimakasih, akan saya coba langsung di blog saya kiosasyik.com

    BalasHapus

Silahkan berkomentar, komentar sobat adalah inspirasi saya !!