Membuat artikel terkait dengan gambar (related post thumbnail)

Cara membuat artikel terkait dengan gambar atau related post thumbnail - Artikel terkait pastinya kamu sudah tau dong, artikel terkait atau related post adalah artikel yang saling berhubungan atau yang di kelompokan di dalam label blog kamu, Dengan memasang artikel terkait ini juga kita dapat menambah jumlah pageview blog karna bukan tidak mungkin pengunjung akan melihat juga artikel terkait tersebut yang mungkin berhubungan dengan artikel kamu.
Sebelumnya saya juga telah menulis tentang Cara Membuat Artikel Terkait Dengan Scroll tapi untuk tulisan sekarang ini saya ingin menjelaskan Bagaimana Cara membuat artikel terkait dengan gambar atau related post thumbnail untuk yang belum tau bagaimana bentuk atau penampakan nya silahkan lihat di bawah postingan ini.
membuat artikel terkait dengan gambar

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 var maxresults=5; untuk jumlah artikel yang ingin di tampilkan.

Ok mungkin segitu aja dulu cara membuat artikel terkait dengan gambar (related post thumbnail) semoga berhasil dan bermanfaat. kalau ada pertanyaan silahkan tinggalkan komentar dibawah.


35 Responses to "Membuat artikel terkait dengan gambar (related post thumbnail)"

  1. Saya juga sdh pernah posting tentang keyword ini. mantap sob....

    ReplyDelete
  2. udah gua ramein nih bos =))
    kunjungan balik ya .

    ReplyDelete
  3. Artikel yang bermanfaat kawan! Thanks udah berbagi ya :)

    ReplyDelete
  4. kebetulan saya baru menulis posting yang sama, maklum blogger baru,hehe..

    ReplyDelete
  5. Dicobain dulu yah sob,, kebetulan diblogku blog ada fitur seperti ini... Thanks..
    Salam sahabat 6^_^9

    ReplyDelete
  6. waah... pake eksternal script ya sob?.. lebih ringkas sriptnya....

    ReplyDelete
  7. hmmm artikel yang bagus.. anda dapat info darimana sob?

    ReplyDelete
  8. krn template ane baru dan tidak ada artikel erkaitnya dibawah ini,kode di blog ini akan saya coba sob,.thanks ya,salto 69,........

    ReplyDelete
  9. banyak banget yg musti di tmbhin ><

    ReplyDelete
  10. gak ah, cuma 2 kali paste aja kok sob. :D

    ReplyDelete
  11. Artikel nya bagus,,,,


    Kunjungan Balik Nya Saya Tunggu
    Please Comment In My Blog

    ReplyDelete
  12. Makasih tipsnya rupanya banyak ya cara membuat artikel terkait, saya sudah coba sana sini.akhirnya bisa

    ReplyDelete
  13. makasih gan infonya bagues bangett.....

    ReplyDelete
  14. Sukses, ini yang saya cari selama ini, pernah sih dulu coba2 tapi gagal terus. Untuk penyesuaian ukuran gimana gan ya ? mohon bantuan

    ReplyDelete
  15. Tans gan Tutorialnya.... and moga suskse.

    ReplyDelete
  16. mantap mas bro
    ini baru artukel yang aku cari

    ReplyDelete
  17. terima kasihh atas tutorialnya gan..salam kenal

    ReplyDelete
  18. kalo baca tutorialnya, disitu dijelaskan untuk pratinjau dulu sebelum di save..
    yang jadi pertanyaan.. emang bisa pratinjau untuk single post yang sudah pakai readmore.. setahu saya. pratinjau hanya akan melihat homepagenya gan.. mohon pencerahannya..

    ReplyDelete
  19. @Kenzoo Kha iya benar sob emng hanya dapat melihat homepage, ini hanya untuk mengurangi kesalahkan saja.. misalkan ada kode yang terhapus atau kurang lengkap, emng sobat setiap selesai mengedit template tidak pernah melakukan pratinjau dulu dan main simpan saja ya..?

    ReplyDelete
  20. waaah sangat menarik sekali bosss artikelnya..........
    hehehehe... ijin TKP yaaa

    ReplyDelete
  21. Terimakasih udah share tutorialnya

    ReplyDelete
  22. Makasih gan tutorialnya, pas banget ma yang gw cari

    ReplyDelete
  23. makasih infonya...tapi blm bsa di blog sy.

    ReplyDelete

Sebelum memberikan komentar harap di baca dulu


1. komen lah sesuai artikel yang sedang dibahas
2. Jangan Memasukan Link Aktif,
3. Komentar Singkat yang tidak relevan tidak akan di Publikasikan.