mas template

Cara Pasang Related Post + Thumbnail Versi 2

Setelah sebelumnya saya memberikan tutorial mengenai cara membuat related post untuk menampilkan list judul postingan yang berhubungan dengan postingan utama, kali ini saya akan berikan satu lagi tutorial membuat related post tai kali ini dengan menyertakan thumbnail. Related post atau artikel terkait dapat memudahkan pembaca untuk mencari topik yang berkaitan. Untuk mengetahui lebih banyak tentang related post baca disini. Nah kali ini saya ingin membahas cara membuat related post yang lebih menarik yaitu dengan menambahkan thumbnail atau gambar didalamnya. Agar lebih jelas perhatikan gambar dibawah ini.

related

Menarik bukan? Cara ini bisa digunakan bersamaan dengan related post tanpa thumbnail. Bagi anda yang tertarik untuk memasangnya, ikuti langkah-langkah berikut:
  1. Yang pasti anda mesti Login ke Blogger dulu 
  2. Buka menu Design -> Edit HTML 
  3. Beri centang pada "Expand Widgets Templates"
  4. Letakkan kode berikut diatas </head>
    <!--Related Posts with thumbnails Start-->
    <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts {
    float:center;
    height:100%;
    min-height:100%;
    padding-top:10px;
    padding-left:15px;
    padding-right:15px;
    }

    #related-posts h2{
    font-size: 1.3em;
    color: black;
    font-family: Arial;
    margin-bottom: 0.75em;
    }

    #related-posts a{
    color:black;
    }

    #related-posts a:hover {
    background-color:#eeeeee;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage="http://lh5.ggpht.com/_15FopxVONSo/TD3yhixJLoI/AAAAAAAADaY/gk-KFA5_m7w/noimage.png";
    var maxresults=5;
    var splittercolor="#cccccc";
    var relatedpoststitle="You might also like:";
    </script>
    <script src='https://sites.google.com/site/bangkolis/javascript/maskolis.js' type='text/javascript'/>
    <!-- remove --></b:if>
    <!--Related Posts with thumbnails End-->
  5. Lalu cari <p class='post-footer-line post-footer-line-1'/> 
  6. Kalau tidak ketemu coba cari post-footer-line 
  7. Letakkan kode berikut dibawahnya.
    <!-- Related Posts with Thumbnails Code Start-->
    <!-- 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>
    <!-- Related Posts with Thumbnails Code End-->
  8. Terakhir Save template anda.
Keterangan:
  • var defaultnoimage="http://lh5.ggpht.com/_15FopxVONSo/TD3yhixJLoI/ AAAAAAAADaY/gk-KFA5_m7w/noimage.png" menunjukkan gambar yang muncul pada postingan yang tidak memiliki gambar. Anda bisa mengganti gambar tersebut dengan gambar lain. 
  • var maxresults=5 menunjukkan jumlah postingan yang muncul pada related post. Silahkan atur jumlah postingan yang mau ditampilkan dengan mengganti angkanya. 
  • var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan. 
  • var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan.
Bagi anda yang merasa cara diatas terlalu sulit, anda bisa menggunakan widget related post dengan thumbnail yang disediakan oleh linkwithin.com. Untuk cara pemasangannya sangat mudah, berikut langkah-langkahnya:

  1. Buka situs http://www.linkwithin.com 
  2. Isi data-data yang diperlukan pada form yang telah disediakan
    Email: alamat email anda
    Blog link: Alamat blog dimana anda memasang widget related post with thumbnail
    Platform: pilih Other
    Width: pilih jumlah related post yang mau ditampilkan
    Beri centang pada kotak kecil jika anda menggunakan background template yang gelap
  3. Klik Get Widget 
  4. Copy dan paste kode script yang diberikan diatas </body> pada template blog anda lalu simpan template anda. Selesai
Jika ada yang kurang jelas atau mengalami kendala dalam memasang related post dengan thumbnail silahkan tinggalkan komentar anda dibawah ini. Saya akan berusaha untuk membantu anda.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

78 comments:

  1. TEMPLATE ERROR: LHS of numeric is null before 39 in data:blog.pageType == "index" <<tanda kayagitu gimana maksudnya dan biar ilang diatas header??

    ReplyDelete
    Replies
    1. hello gan ane bosen liat itu2 aja padahal kan postingan ane banyak dari tahun kemaren, minta random aja gan biar pembaca nya gak itu2 aja yang tapil, (kalo bisa ) thanks

      Delete
  2. @Baha Bondo X-TKJ (2011):
    Untuk memasukkan kode ke edit HTML coba kodenya di parse dulu mas

    ReplyDelete
  3. mas,kanapa side bar saya tidak bisa di masukin artikel terkait..?

    ReplyDelete
  4. @Heka Ardiant:
    Pasang kode javascript untuk related post di bawah kode <data:post.body/>

    <b:loop values='data:post.labels' var='label'>
    <script src='http://jamu-martin.googlecode.com/files/relatedart.js' type='text/javascript'/>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
    </b:loop>

    ReplyDelete
  5. om,template yg johny storage kan sdh ada related post.a tp blm thumbnail...klo ditmbhkan thumbnail gimana caranya??

    ReplyDelete
  6. sudah buat tapi tak jadi laaa, kenapa ya?

    ReplyDelete
  7. Sudah berhasil..

    Thanks..

    Salam..

    http://raa-pramuja.blogspot.com/2012/07/pasang-send-button-versi-2.html

    ReplyDelete
  8. Pa kabar? Mas Kolis, saya termasuk salah seorang yang memang template hasil karya Mas Kolis (Creating Web type Minima). Sudah cukup lama memakainya, sekitar 2 tahun. Tapi kemarin2 ini Related Posts-nya tidak berfungsi. Kalo klik salah satu postingan, di bawahnya tidak muncul artikel yang terkait. Saya ganti related posts-nya sekalian dengan yg ada tumbnail tapi error terus. Gimana nih, Mas? Bisa bantu gak? Makasih.

    ReplyDelete
  9. mas kolis, sy dah cb cara yg pertama tp gagal gk muncul apapun, lanjut ke cara yg kedua berhasil tp pd menu hompage persis disamping slider, susunan posting terbaru amburadul alias acak2an...wah gimana y mas ini solusinya, sy pkai template jhony kenthir banget

    makasih sebelumnya atas tanggapannya

    ReplyDelete
  10. Thaks Mas...
    atas infonya..
    pemasangannya berhasil....

    http://blogger-alam.blogspot.com/

    ReplyDelete
  11. mau di coba dulu nih... thank's

    ReplyDelete
  12. mas saya pake cara pertama kok ga berhasil ya?

    ReplyDelete
  13. Misi mas..

    kalau boleh tau, sites.google.com/site/bangkolis/javascript/maskolis.js download dimana ya, di?

    ReplyDelete
  14. tutorialnya mantab om,.. saya berhasil terapkan di themesnya maskholis . makasih banyak ya mas.. ini hasilnya mas Berita terkini

    ReplyDelete
  15. Thanks sob ;)
    visit gan http://nafiabiyyu.blogspot.com/

    ReplyDelete
  16. makasih ya gan, semoga bisa bermanfaat bagi semuanya ^_^

    ReplyDelete
  17. Terimakasih Mas tutorialnya sukses, adakah buat SEO blog gan?

    http://zonafilm-21.blogspot.com/

    ReplyDelete
  18. menarik mas artikelnya,,

    mampir yuk ke blog ane http://pagarijo.blogspot.com

    ReplyDelete
  19. thx mas infonya

    mampir yuk blog gw
    http://era-informasi.blogspot.com

    ReplyDelete
  20. http://agentasdotcom.blogspot.com/2013/04/robertocavalli-7051-1set-30x12x25-bhn.html

    Terima kasih Pak Maskolis....Jalan tuch di blog saya, bapak memang hebat...

    Salam dari saya
    Kroco mumet

    ReplyDelete
  21. Numpang mampir Mas... kunjungan di siang hari, Semoga sukses Mas

    ReplyDelete
  22. Asyik bener nih related post + thumbnail nya mas! :)

    ReplyDelete
  23. Percaya mati kalau maskolis yang kasih arahan Ayo Berangkat rame-rame.

    ReplyDelete
  24. Gan, kalo sudah ada related postnya tapi tidak dalam bentuk thumbnail gimana agar bisa di thumbnailkan . . . ???

    ReplyDelete
  25. Pakai yang linkwithin.com berhasil :)

    ReplyDelete
  26. kalau yang berdasarkan label gimana ya?

    ReplyDelete
  27. thanks sob sudah berbagi tapi malah blog saya malah tambah eror :D

    ReplyDelete
  28. Waw Artikel yang Bagus nikh Mas maskolis...sangat bermanfa,at buat saya dan teman blog dan blogger semua salam sukses mampir juga ya Sobat blog dan blogger di blog saya
    karristaent.blogspot.com

    ReplyDelete
  29. gak muncul tumbailnya gan...
    gmana?

    ReplyDelete
  30. kk widget link dari http://www.linkwithin.com rusak:(

    ReplyDelete
  31. pasang linkwithin paling gampang

    ReplyDelete
  32. Ini mah udah pernah saya praktekin gan, tp gak bisa di blog saya...
    Ada cara yg lain gak?

    ReplyDelete
  33. trim, infonya lengkap dan bagus buat saya, from ayam bangkok aduan bogor laga super ayam-bangkok-com.blogspot.com

    ReplyDelete
  34. makasih mas,, sangat membantu sekali..

    ReplyDelete
  35. mhon infonya jg Gan related post yg berjalan horizontal ke samping kanan atau kiri,...terimksih..

    ReplyDelete
  36. gan mohon pencerahan nya,,, blog ane udah tersedia memang reled post nya, tapi ane bingung cara ngsiin nya tu gimana karna srip nya menurut ane udah mati,,,

    http://sahabatralfa.blogspot.com

    ReplyDelete
  37. cara membuat border imagenya gimana sih mas?...please tolongin saya

    ReplyDelete
  38. wah, keren artikelnya gan
    bermanfaat banget
    thanks dah infonya

    ReplyDelete
  39. kunjungan perdana ni gan,,, salam kenal,,,

    izin praktekin ya gan,,,,,

    ReplyDelete
  40. gak berhasil maskolis...
    ndak ada p class='post-footer-line post-footer-line-1'
    gak ada juga --- post-footer-line ---
    yang ada cuma div class='post-footer-line post-footer-line-1'
    trus saya coba pake linkwithin error juga mas kolis, related post-nya muncul di setiap artikel di page Home di bawah Read More...
    Apa yang salah ya mas? apa karena saya nggak pake template mas kolis nih... hehehe... Tolong bantuannya mas... Tuhan yang membalas kebaikan anda...

    ReplyDelete
  41. kalo sudah ada related postnya tapi tidak dalam bentuk thumbnail gimana agar bisa di thumbnailkan . . . ???

    ReplyDelete
  42. Sudah saya coba langsung pake Linkwithin, lebih gampang, hehehee
    Trimss sudah berbagi ilmu yg bermanfaat...
    cek > http://www.infobiz-afiliasi.blogspot.com/

    ReplyDelete
  43. Kenapa di blog http://www.klinikseksologi.com/ saya tak bisa tampil ya?

    ReplyDelete
  44. ijin di gunakan ya mas kholis.salam kenal

    ReplyDelete
  45. saya udah pasang koq ga muncul ya? masalahnya dimana ya mas ? ditemplate atau apanya http://www.halamanrumah.com/

    ReplyDelete
  46. saya coba dulu ..http://android-apkdata.blogspot.com

    ReplyDelete
  47. Kagak Berhasil mas bro
    http://downloadnasyidpopuler.blogspot.com/

    ReplyDelete
  48. Link java scriptnya udah the end bro....

    ReplyDelete
  49. Terima kasih postingan ini bagus sekali... Salam dr Tanah Melayu

    ReplyDelete
  50. Terimakasih banget mas, menarik ni buat dicoba di blog newbi ane http://biokom-pti.blogspot.com/2014/06/penjelasan-mengenai-alexa-alexa-internet-amazon.html

    ReplyDelete
  51. yang ini ko gak berhasil ya... :(

    ReplyDelete
  52. Thank bro.... berhasil nih...!

    Untuk Cara Lebih mudah kunjungi

    http://ediilmutkj.blogspot.com/2014/09/cara-mudah-membuat-relate-post-gambar.html

    ReplyDelete


  53. thanx ya gan atas info nya semoga sukses selalu blog nya gan :)
    dan sukses selalu gan info nya :)

    PROMOSI
    HOT PROMO DARI RAJAPOKER88 di

    http://www.rajapoker88.com/?ref=577053


    Untuk member setia rajapoker88 dapatkan bonus referal dari kami sebesar 10% dari kemenangan teman Referal anda dan dapatkan juga 10 POINT setiap turn over 1 juta rupiah point ini akan di undi setiap 1 minggu sekali

    peringatan: untuk bonus selalu di bagikan setiap hari senin
    dan untuk batas mengklaim bonus setiap hari minggu selama 7 hari
    jika batas mengklaim bonus lewat dari seminggu maka bonus dinyatakan hangus!!

    keterangan lebih lanjut untuk mengklaim bonus silakan hubungi :
    YM: afb88_cs1@yahoo.com
    YM: idr.afb88@yahoo.com
    pin bb : 2257e32b

    segera bergabung dengan kami dan kumpulkan pointnya.
    Terima Kasih.

    Permainan yang kami sediakan yaitu :
    * Poker
    * Tangkas
    * Domino99

    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK BRI, BANK MANDIRI, DAN BANK DANAMON.

    Untuk keterangan lebih lanjut, silahkan Hubungi kami di :
    * WWW.RAJAPOKER88.COM (pingbox)
    * TWITTER : @RAJAPOKER88
    * YM : RAJAPOKER88.indo
    * PIN BB : 75CB33AF
    * PHONE NUM : (+84) 169 859 6613
    * SKYPE : RajaPoker88

    Terima Kasih,
    Salam Rajapoker88.com

    ReplyDelete
  54. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete
  55. izin nyoba mas Kolis ..

    http://wartacinta.blogspot.com

    ReplyDelete
  56. Makasih infonya mas kholis...

    http://gomumu.blogspot.com/

    ReplyDelete
  57. tidak berhasil mas bro, gambarnya tidak mau tampil. kebetulan saya pakai template maskolis

    ReplyDelete
  58. Salam maskolis.
    Maaf mohon bantuannya..kenapa ya widget Related Post + Thumbnail Versi 2
    ini gak mau muncul2 juga tuhh..semua aturan pasangnya udah diikut seperti cara yg mas terangkan...terimaksih banyak sebelumnya.

    http://fortunamedia.blogspot.com

    ReplyDelete
  59. Cukup mudah dipahami boss, terima kasih

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger