Header

Cara Membuat Related Post Dengan Thumbnail Di Blogger

Posted by : Admin On 11 January 2013 84 comments

Related post atau postingan terkait pasti sering loe liat di blog orang laen ya gak gan. Fungsinya bukan cuma pajangan doank tapi buat ningkatin pageview dari pengunjung blog kita gan. Dengan adanya related post atau postingan terkait di blog kita bikin pengunjung lebih mudah nyari konten yang berkaitan sama yang dia baca saat itu.


Kalo di WordPress cara buatnya gampang banget tinggal pasang plugin beres gan. Nah kalo di blogger kita mesti pasang kode di template gan biar related post muncul di bawah postingan. Kayak di blog ini gan ada related postnya juga. Tapi kali ini gw bakal share cara membuat related post dengan thumbnail atau gambar gan.

Mau tau caranya gan? Yuk langsung disimak gan cara membuat related post dengan thumbnailnya, biar blog loe jadi tambah keren dan bikin pengunjung betah. Gw bakal kasi 2 kode gan, yang 1 thumbnailnya statis ato diem dan yang 1 lagi dengan marque ato bergerak gan, cek dis out.

Cek ini gan >>> Edit Template Blogger Versi Baru


Cara Membuat Related Post Dengan Thumbnail Di Blogger




  • Pertama masuk ke Blogger terus pilih Template lalu klik Edit HTML dan teken Ctrl + F di keyboard kemudian cari kode </head> lalu centang Expand Widget Templates gan, abis itu loe pastein kode di bawah ini di atasnya.


<!--Postingan Terkait Dengan Gambar Kode Mulai-->
<!-- remove --><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-left: 5px;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMN2pZdHmxywyIA9MCf33c4_RcPUIsAfhpDJX8OTIllBi2AsT1gWyM_aGbGL60qX7UXS1UyF4gksqdygXeQWNeA7TxHO2Jjaf7WuO8ZenipmPFDur4DnSKxO83CuHYnD9oyGyrDtV0gL_D/s1600/images.jpg&quot;;
var maxresults=10;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Postingan Terkait&quot;;
</script>
<script src='https://sites.google.com/site/seociyussite/file/post_terkait_dengan_gambar.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Postingan Terkait Dengan Gambar Kode Selesai-->

  • Kalo udah jangan di save dulu sekarang loe cari kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'> gan. Setelah itu paste kode di bawah ini tepat di bawahnya gan. Loe tinggal pilih kode related post dengan thumbnail yang statis ato yang bergerak ( marque ) gan.

 » Kode Related Post Dengan Thumbnail Statis




<!--Postingan Terkait Dengan Gambar Kode Mulai-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!--Postingan Terkait Dengan Gambar Kode Selesai-->


» Kode Related Post Dengan Thumbnail Bergerak / Marque




<!--Postingan Terkait Dengan Gambar Kode Mulai-->
<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 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=11&quot;' type='text/javascript'/>
</b:if></b:loop>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>var currentposturl=&quot;<data:post.url/>&quot;;
removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script>
<script type='text/javascript'>tweetmeme_url = &#39;<data:post.url/>&#39;;
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<!--Postingan Terkait Dengan Gambar Kode Selesai-->

  • Abis dipastein sekarang diedit gan. Buat ngatur posisi judulnya loe edit padding-left: semakin besar semakin ke kanan dan buat ganti judulnya edit Postingan Terkait gan. Terus buat ngerubah warna hover edit aja background-color: ganti sama warna yang laen sesuai selera loe.
  • Kalo buat var maxresult sama max-result ganti aja sesuka hati mau berapa jumlah related post yang ditampilin gan. Beres ngedit sekarang tinggal Save template gan dan buka blog loe pasti udah ada related post dengan thumbnail nya sekarang.

Note : Kalo mau ganti image tidak ada gambar, tinggal di ganti aja urlnya di var defaultnoimage gan.


Sekian dulu yang bisa gw share kali ini semoga bermanfaat. Kalo ada yang gak ngerti silahkan ditanyakan dan jangan lupa komentarnya gan.

» Loe suka postingan ini? Silahkan di link back dengan mengcopy kode dibawah gan.

URL :

HTML link kode :

» Luangin waktu 5 detik donk gan buat share postingan ini.

Mau Dapet Updates Gan!

Ikuti SEO Ciyus

84 comments:

  1. siip sob..
    kunjungi balik blog saya jg ya di Suplemen Sun Hope..
    ma kasih..

    ReplyDelete
    Replies
    1. Sip gan, gw udah liat blog ente tadi cuma gak sempet ninggalin komen. :o

      kapan2 gw balik lg soalnya banyak krjaan gan :m

      Delete
  2. Good Blog And Artikel ..
    Terima Kasih . :d

    ReplyDelete
  3. gan kok gua udah pasng kagak muncul yah :k

    ReplyDelete
  4. Saya jg gak bisa gan..???

    di tunggu kunjungan baliknya yah gan http://tugasku-4u.blogspot.com

    ReplyDelete
  5. kalau ingin mengecilkan gambarnya gimana sob..? tolong ya comen back kalau dah dijawab pertanyaannya so'alnya gambarnya itu agak kebesaran..thanks bantuannya

    ReplyDelete
  6. Sory agan2 baru bisa bales soalnya koneksi gangguan, ni baru dpt mnjem modem. :o

    @dedy martin & @Irfandi Rahman : gak mncul gmn gan? coba dicek lagi, salah pasang mungkin.

    @Raja isMyson : sama2 gan,.

    @Ummu Ruqayah : buat ngecilin gambar harus edit javascript mbak, kalau ngerti download aja kode javascriptnya terus cari kode img style="width:100px;height:100px; tinggal ganti aja sizenya, kalau udah upload lagi file jsnya terus ganti yang lama sama file yg beru di upload. ribet mabak,.:w

    ReplyDelete
  7. ribet juga yach..thank tutorialnya..

    ReplyDelete
  8. wah mantap nih, disana2 gk bisa, cuma disini yg bisa.
    mksh gan. sukes

    ReplyDelete
  9. ciyus banget nih blog :D thanks gan widgetnya :)

    ReplyDelete
  10. kok gak bisa ya gan.........padahal gak ada yang error, tapi gak tampill....... coba gan mampir, http://ponda-samarkand.blogspot.com

    ReplyDelete
    Replies
    1. Coba di cek ulang gan maybe ada yg salah. :l

      Delete
  11. kok di template blog ane kok gak bisa yak..??
    gimana nih gan..??
    bantuin ane...
    :(

    ReplyDelete
    Replies
    1. Coba dicek ulang mungkin salah pasang gan,. :l

      Delete
  12. Gan...minta pencerahnanya sapa tau agan tau solusinya, ane baru ganti template awalnya emang udah ada Related Postnya (work), nah pas mau pasang adsense di bawah postingan eh Related postnya malah ga muncul (meski dah dihapus adsense nya tetep ja ga muncul) kira-kira kenapa ya?

    (scriptnya keknya masih utuh ada disana) tyvm.

    ni blog ane http://myanimegirls.blogspot.com/ kapan" berkunjung kalo sempet hehe

    ReplyDelete
  13. untuk sementara ane coba dulu related post dari blog ini, tapi size nya keknya kebesaran XD haha ty (yang ini commentnya gasah di publish) dah kebanyakan comment :g

    ReplyDelete
    Replies
    1. Sorry gan kepencet publishnya. :r

      kalau kbesaran dikurangi aja jmlah rlated post yg dtampilin gan atau bisa juga dkecilin sizenya. :l

      Delete
  14. Nice article Gan . . . Blogger Sejati

    Thanks

    ReplyDelete
  15. thanks infonya,, sangat bermanfaat,,
    by : tengku dewi

    ReplyDelete
  16. Thanks gan infonya,
    btw cara pasang background balloon jlh komentar yang dibawah smiley itu gmna? yang "Poskan komentar" ato "30 komentar:".

    ReplyDelete
    Replies
    1. itu bawaan style comment threadnya gan, beda2 kodenya.

      kalau mau yg kyk gni cek aja di spiceupyourblog[dot]com :l

      Delete
  17. makasih.. info anda sangat baik

    ReplyDelete
  18. Kok gak bisa atau gak bekerja ya di blog saya

    ReplyDelete
    Replies
    1. @BoWo : bahasa ente formal bgt gan,. :r

      @Mutiara : Salah pasang kali gan coba di cek lagi. :l

      Delete
  19. nice post gan..ane tunggu kehadirannya

    ReplyDelete
    Replies
    1. @krisan : sama2 gan,.

      @ewhaplaats : sip gan :l

      Delete
  20. mantab sob, dicoba dulu biar blog saya tmbah keren.

    ReplyDelete
  21. mantap mas bro... kunjungan balik ya..."

    ReplyDelete
  22. thanks infonya bang work 100% kunbal gan http://sofyansaugani.blogspot.com/

    ReplyDelete
  23. seo cyus kok ga isa di terapkan :( iniblog ane http://it-inc.blogspot.com/

    ReplyDelete
  24. kenapa nih kok gak muncul udah aku pasang bener http://howavearyed.blogspot.com/

    ReplyDelete
  25. gan kok gua ga bisa muncul ya .padahal udah bner .template ngaruh ga si ? :h

    ReplyDelete
    Replies
    1. @ahmad, Jeffry, & Joshua : slah pasang x gan, coba di cek lagi,. :l

      Delete
  26. sama min, saya juga ga bisa muncul ini. ada pencerahan ga ya?
    ini blog saya: http://ekaartwork.blogspot.com

    ReplyDelete
  27. Salam kenal Sobat @SEO..? Artikel nya Mantab Sob...? sueerr
    Idzin ane simak and belajar nerapin di blog ane yah Sob..?
    Terima kasih atas artikel nya sangat membantu,... kalau ada waktu
    mampir Sob..? di blog saya di Karrysta Blog
    http://karristaent.blogspot.com

    ReplyDelete
  28. Lha kok diblog saya gak bisa gan...
    Kasih solusi dong...
    Ditunggu kunjungan baliknya di
    http://indriya-angga.blogspot.com

    ReplyDelete
  29. Thanks gan atas infonya
    Di tunggu kunjungan baliknya http://xmia1smansa.blogspot.com

    ReplyDelete
  30. gan gimana caranya menambahkan gambar postingya......

    ReplyDelete
  31. makasih kaka infonyamampir ya kesini ada yang hot www.aulia-toys.com

    ReplyDelete
  32. di template ane kagak muncul mulu nih kalo yang thumbnail :3

    ReplyDelete
  33. Maaf gan masih baru, cara ngehilangin artikel terkait yang dobel gimana ya? artikel di blog saya ada dua, satu thumbnail dan satu enggak.
    blog saya gan http://rezafahlevimrf.blogspot.com/

    ReplyDelete
  34. saya baru belajar nge blog dan artikelnya sangat membantu terimakasih dan mungkin kalau berkenan silahkan mampir. http://deasin-rumah-minimalis.blogspot.com/

    ReplyDelete
  35. Bagaimana kalau related Postnya bisa bergerak jadi lebih mengundang pengunjung untuk mengkliknya?

    ReplyDelete
  36. mantab gan kapan-kapan mampir ya

    http://bagashaidar22.blogspot.com/

    ReplyDelete
  37. mas saya berhasil menerapkan nya di blog ane tapi gambar yang muncul bukan gambar utama tapi gambar di isi postingan ,gimana tu gan solusi nya?.

    ReplyDelete
  38. kok gak bisa ya gan

    http://adutburza.blogspot.com/

    ReplyDelete
  39. tutorialnya anda memang benar-benar ciyus work gan ,, terima kasih banyak atas related postnya ..

    mampir di blog saya ya
    uniksekali97.blogspot.com

    ReplyDelete
  40. valid html5 gak mas?

    ReplyDelete
    Replies
    1. kayaknya kagak Bos, dipostingnya gak nyebutin valid

      Delete
  41. keren banget (http://distributorbanradial.com/berkendara/harga-helmet-arai-berbagai-model-dan-type/)

    ReplyDelete
  42. Terimakasih mas, artikel menarik ni coba dulu di blog newbi ane http://biokom-pti.blogspot.com/2014/06/penjelasan-mengenai-alexa-alexa-internet-amazon.html

    ReplyDelete
  43. kok ngak bisa ya gan. artikel terkaitnya nggak muncul.

    tolong gan bantu saya

    gamebagus-3.blogspot.com

    terimakasih.

    ReplyDelete
  44. oke..tutorialnya gan..dah dipraktekan di ponselcentral.blogspot.com

    ReplyDelete
  45. Thanks Gan, Alhamdulillah Sukses.....

    ReplyDelete
  46. Kok Di blog Saya ngk bisa ya Brow .......... Gmn ya???
    ngk ada tampil apa kok ...........

    ReplyDelete
  47. makasih bro
    thanks for share
    tutorial cara tambah followers twitter & instagram
    klik aja disini http://acepasel.blogspot.com/

    ReplyDelete
  48. Cukup rinci dan mudah diterapkan gan, terima kasih telah berbagi.

    ReplyDelete
  49. agak kesulitan www.zamroniye.com

    ReplyDelete
  50. Duh...dah nyoba 2 x...ga bisa gan...??
    Salah dimana ya gan ??

    ReplyDelete
  51. komplit gan tutorialnya.. joss :a :h :k

    ReplyDelete
  52. Hebat tutorialnya...
    mohon petunjuk cara pemasangan yang saya gimana caranya..
    tolong di cek dan ditunggu sarannya..

    ReplyDelete
  53. jujur aja masih bingung,,takut ukurannya ga cocok sama template kita..sedangkan desain blogger baru ga ada pilihan pemulihan/cadangkan..hmmm

    ReplyDelete
  54. very good posting, I have tried but have not succeeded, roughly where the blame lies. please refer bloggermendalo.blogspot.com

    ReplyDelete
  55. makasih gan infonya. Kunjungi juga blog saya http://videobelajarsekolah.blogspot.co.id

    ReplyDelete

Yang komen spam dan komen asal ga punya otak bego

Terima Kasih

Admin SEO Ciyus

Berikutnya Sebelumnya