Header

Cara Membuat Related Post Dengan Thumbnail Di Blogger

Posted by : Admin On 11 January 2013 81 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

Labels: ,

81 comments:

  1. UnknownMarch 7, 2013 at 7:36 PM

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

    ReplyDelete
    Replies
    1. UnknownMarch 8, 2013 at 1:31 AM

      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. TyanstoryMarch 10, 2013 at 10:03 PM

    ijin nyobain gan.. tks

    ReplyDelete
  3. BlackfluffyMarch 13, 2013 at 12:05 AM

    Good Blog And Artikel ..
    Terima Kasih . :d

    ReplyDelete
  4. UnknownMarch 20, 2013 at 3:57 PM

    ga bisa gan

    ReplyDelete
  5. DedyMarch 26, 2013 at 1:43 PM

    gan kok gua udah pasng kagak muncul yah :k

    ReplyDelete
  6. UnknownMarch 26, 2013 at 9:22 PM

    Saya jg gak bisa gan..???

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

    ReplyDelete
  7. UnknownMarch 27, 2013 at 2:54 AM

    Ok bisa gan, tengkyu

    ReplyDelete
  8. Tatik UcMarch 27, 2013 at 12:40 PM

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

    ReplyDelete
  9. UnknownMarch 27, 2013 at 11:33 PM

    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
  10. Tatik UcMarch 28, 2013 at 12:54 AM

    ribet juga yach..thank tutorialnya..

    ReplyDelete
  11. UnknownMarch 28, 2013 at 10:49 PM

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

    ReplyDelete
  12. Chandra SeptianMarch 29, 2013 at 6:23 PM

    ciyus banget nih blog :D thanks gan widgetnya :)

    ReplyDelete
  13. UnknownApril 14, 2013 at 11:55 PM

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

    ReplyDelete
    Replies
    1. UnknownApril 15, 2013 at 3:09 PM

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

      Delete
  14. AnonymousApril 17, 2013 at 11:53 AM

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

    ReplyDelete
    Replies
    1. UnknownApril 17, 2013 at 9:23 PM

      Coba dicek ulang mungkin salah pasang gan,. :l

      Delete
  15. UnknownApril 18, 2013 at 9:12 AM

    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
  16. UnknownApril 18, 2013 at 9:13 AM

    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. UnknownApril 18, 2013 at 12:16 PM

      Sorry gan kepencet publishnya. :r

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

      Delete
  17. Indra GunandaApril 26, 2013 at 7:29 PM

    Ijin Coba Gan

    ReplyDelete
  18. hendraApril 30, 2013 at 7:20 AM

    Nice article Gan . . . Blogger Sejati

    Thanks

    ReplyDelete
  19. siap86May 1, 2013 at 3:44 PM

    thanks infonya,, sangat bermanfaat,,
    by : tengku dewi

    ReplyDelete
  20. AlfiandoMay 2, 2013 at 4:35 PM

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

    ReplyDelete
    Replies
    1. UnknownMay 2, 2013 at 11:06 PM

      itu bawaan style comment threadnya gan, beda2 kodenya.

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

      Delete
  21. AnonymousMay 2, 2013 at 7:36 PM

    makasih.. info anda sangat baik

    ReplyDelete
  22. UnknownMay 6, 2013 at 1:23 PM

    Kok gak bisa atau gak bekerja ya di blog saya

    ReplyDelete
    Replies
    1. UnknownMay 8, 2013 at 3:41 PM

      @BoWo : bahasa ente formal bgt gan,. :r

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

      Delete
  23. Krisan PaulinoMay 10, 2013 at 5:40 AM

    thank you :g

    ReplyDelete
  24. AnonymousMay 10, 2013 at 2:16 PM

    nice post gan..ane tunggu kehadirannya

    ReplyDelete
    Replies
    1. UnknownMay 14, 2013 at 3:00 PM

      @krisan : sama2 gan,.

      @ewhaplaats : sip gan :l

      Delete
  25. semeton samiMay 19, 2013 at 12:28 AM

    mantab sob, dicoba dulu biar blog saya tmbah keren.

    ReplyDelete
  26. UnknownMay 26, 2013 at 7:20 AM

    gak bisa gan ......

    ReplyDelete
  27. AnonymousJune 21, 2013 at 8:04 PM

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

    ReplyDelete
  28. UnknownJune 23, 2013 at 12:10 PM

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

    ReplyDelete
  29. UnknownJuly 4, 2013 at 3:06 PM

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

    ReplyDelete
  30. JeffryJuly 10, 2013 at 4:19 PM

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

    ReplyDelete
  31. UnknownJuly 11, 2013 at 1:39 AM

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

    ReplyDelete
  32. UnknownJuly 23, 2013 at 12:48 AM

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

    ReplyDelete
  33. UnknownJuly 25, 2013 at 11:48 PM

    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
  34. Angga IndriyaJuly 26, 2013 at 9:49 AM

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

    ReplyDelete
  35. Archi_LogiSeptember 6, 2013 at 7:49 PM

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

    ReplyDelete
  36. AnonymousSeptember 13, 2013 at 12:02 PM

    thx gan

    ReplyDelete
  37. UnknownOctober 1, 2013 at 1:53 PM

    gan gimana caranya menambahkan gambar postingya......

    ReplyDelete
  38. UnknownOctober 3, 2013 at 2:44 AM

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

    ReplyDelete
  39. Ichi HikaruOctober 24, 2013 at 3:52 AM

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

    ReplyDelete
  40. blkn6October 29, 2013 at 7:05 PM

    thank's ya gan

    ReplyDelete
  41. AnonymousDecember 26, 2013 at 11:37 AM

    mntap gan..

    ReplyDelete
  42. UnknownJanuary 11, 2014 at 5:42 PM

    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
  43. saputrodwiJanuary 21, 2014 at 11:41 PM

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

    ReplyDelete
  44. UnknownJanuary 24, 2014 at 11:08 PM

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

    ReplyDelete
  45. Hamba AllahFebruary 10, 2014 at 2:23 PM

    thanks gan!

    ReplyDelete
  46. bagas haidarMarch 25, 2014 at 10:16 PM

    mantab gan kapan-kapan mampir ya

    http://bagashaidar22.blogspot.com/

    ReplyDelete
  47. AnonymousApril 2, 2014 at 7:19 AM

    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
  48. AnggiApril 3, 2014 at 5:35 PM

    tanks sobat...

    ReplyDelete
  49. UnknownApril 7, 2014 at 1:57 AM

    kok gak bisa ya gan

    http://adutburza.blogspot.com/

    ReplyDelete
  50. UnknownApril 16, 2014 at 8:52 AM

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

    mampir di blog saya ya
    uniksekali97.blogspot.com

    ReplyDelete
  51. AnonymousApril 17, 2014 at 9:26 PM

    valid html5 gak mas?

    ReplyDelete
  52. reni resianiMay 27, 2014 at 11:05 PM

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

    ReplyDelete
  53. UnknownJuly 9, 2014 at 2:22 AM

    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
  54. UnknownJuly 11, 2014 at 9:40 PM

    kok ngak bisa ya gan. artikel terkaitnya nggak muncul.

    tolong gan bantu saya

    gamebagus-3.blogspot.com

    terimakasih.

    ReplyDelete
  55. arif rifJuly 26, 2014 at 5:16 AM

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

    ReplyDelete
  56. Andi ZhuSeptember 5, 2014 at 5:17 PM

    Thanks Gan, Alhamdulillah Sukses.....

    ReplyDelete
  57. Oscar_KlijocaSeptember 24, 2014 at 7:31 AM

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

    ReplyDelete
  58. Asyaf SyaffarOctober 20, 2014 at 1:36 AM

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

    ReplyDelete
  59. Wasiun mikaNovember 26, 2014 at 8:09 AM

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

    ReplyDelete
  60. UnknownDecember 23, 2014 at 9:27 AM

    agak kesulitan www.zamroniye.com

    ReplyDelete
  61. DiborongajaDecember 27, 2014 at 11:15 AM

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

    ReplyDelete
  62. Mas AdminJanuary 4, 2015 at 11:08 PM

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

    ReplyDelete
  63. AnonymousJanuary 20, 2015 at 1:27 PM

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

    ReplyDelete
  64. UnknownJuly 9, 2015 at 10:25 PM

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

    ReplyDelete
  65. UnknownJanuary 24, 2016 at 11:23 AM

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

    ReplyDelete
  66. Update 2018February 10, 2016 at 4:51 PM

    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