Minggu, 18 Maret 2012

Cara Membuat Related Post Dengan Thumbnail


By on 17.59

Cara Membuat Related Post Dengan Thumbnail - Kali ini saya akan membahas tentang Cara Membuat Related Post Dengan Thumbnail, widget related post dengan Thumbnail ini merupakan alternatif selain Linkwithin, jadi ada cara lain membuat Related Post Dengan Thumbnail selain menggunakan jasa Linkwithin, bagi sobat yang pingin memasang nya di Blog sobat silahkan ikuti langkah-langkah di bawah ini.

  • Login ke Blog kamu.
  • Pilih Rancangan > EDIT HTML.
  • Jangan Lupa Centang Expand Widget Template.
  • Cari kode </head> setelah ketemu copy kode di bawah ini tepat di atas kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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, Times New Roman , 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 type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Selanjutnya Cari kode <data:post.body/> setelah ketemu copy kode di bawah ini tepat di bawah kode <data:post.body/>
<!-- 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-->

Simpan dan lihat hasilnya.

Keterangan :
var maxresults = 5 adalah jumlah artikel yang ditampilkan.
var relatedpoststitle="Related Posts";  kamu bisa ganti kata Related Posts dengan Kata lainnya.

Sekian penjelasan dari saya semoga sobat bisa memahaminya, dan selamat mencoba.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

65 komentar:

  1. kalo ga ada <data:post.body/> gimana?

    BalasHapus
  2. @Pengetahuan : ga mungkin gan pasti ada, soalnya kode itu merupakan kode bagian bawah badan posting, jadi setiap blog pasti ada.

    BalasHapus
  3. tukeran + follow yo

    http://sitebebas.blogspot.com

    BalasHapus
  4. pengetahuan: mungkin kamu belum centang Expand template Widgetnya.
    sekalian yah yang nau tukaran link
    http://maslamhot.blogspot.com
    terimakasih

    BalasHapus
  5. info yang bermanfaat, salam kenal and visit me back

    BalasHapus
  6. Info yang menarik dan bermanfaat, terus terang saya banyak terbantukan dengan artikel ini, terima kasih.

    Ke pasar baru beli sepatu, belok kanan seberang jalan,
    Aku pendatang baru, mencoba ajak berkenalan.

    Salam

    BalasHapus
  7. @Rudy Hartono : Thaxs gan!!
    @SEMANGAT888 : Haha bagus sob tuh pantun nya Thanxs ya

    BalasHapus
  8. Ini maksimalnya 6 artikel ya mas ? sama setting max result 7-8 yang muncul cuma 6. padahal artikel dalam kategori sudah banyak lebih dari 100

    BalasHapus
  9. ya sama gan saya juga gitu ga tau kenapa

    BalasHapus
  10. gan,,punyaku gak bisa nie,,,gak ketemu ,,trus gmana??
    mohon tanggapannya ya,,,,
    jangan lupa kunjungi blogku ya Rizkiirwanto.co.cc

    BalasHapus
  11. Gan jika agan ga nemuin kode data:post.body yang diatas, sebelum mencari nya agan Centang Dulu EXPAND WIDGET TEMPLATE nya setelah itu cari pasti ada

    BalasHapus
  12. Trik yang mantap gan, thanks berat, blog aku jadi punya posting terkait yang apik, salam persahabatan.

    BalasHapus
  13. Thkx ya gan infonya, jangan lupa mampir ke ramatutor.blogspot.com, hehehe.....

    BalasHapus
  14. Naice om..
    Bisa om d'blog ane....

    BalasHapus
  15. Terima kasih, bog saya jadi punya related post with thumbnail sekarang, tambah dinamis mas bro. Salam persahabatan.

    BalasHapus
  16. oke, akan saya coba..semoga berhasil.
    makasih buat trik nya..
    jgn lpa mampir ya http://blogforvanz.blogspot.com
    :)

    BalasHapus
  17. saya kok tidak bisa muncul related postnya ya ?????
    padahal saya sudah melakukannya sesuai petunjuk dengan benar.
    tolong saya dong
    blog saya = www.asbestosis-exposure.co.cc

    tolong dibalas dong, please.

    BalasHapus
  18. Salam kenal persahabatan, terima kasih sekali atas informasi anda ini, dan telah saya praktek-kan .........

    BalasHapus
  19. Thanks ya gan atas tutorialnya.. jangan lupa visit ramazxc.blogspot.com ya.. hehehehe

    BalasHapus
  20. oh, okedeh

    thanks @LAMHOT JOHN LOCKE NAINGGOLAN dan @admin :)

    BalasHapus
  21. @Josep : coba cek lagi mungkin ada yang salah, soalnya banyak orang sudah mencoba dan berhasil

    BalasHapus
  22. ada masalah baru gan, setelah saya ganti template jadi ga bisa related postnya, sudah saya coba berbagai macam related post tapi hasilnya sama ga ada perubahan, mohon pencerahannya gan..., saya sudah terlanjur sayang sama template saya gan..., mohon bantuannya....

    BalasHapus
  23. sudah bisa gan...., dan ini sebagai tambahan untuk sobat blogger yang juga mungkin pernah mengalami kesulitan seperti saya saat penempatan kode yang kedua ataupun saat meletakkan kode dibawah kode . jika sobat tidak menemukan kode , sobat bisa langsung meletakkan kode yang kedua sebelum kode div class='post-footer' tanpa tanda petik. dan ini masih ada sedikit permasalahan ni gan penampilan related postnya cuma bisa tampil 5 ga bisa nambah, walaupun var maxresults = nya sudah di gonta-ganti, bahkan sudah saya coba sampai 10, yang ditampilkan tetap 5. mohon gan pencerahannya, bagaimana supaya bisa ditampilkan lebih dari 5....????

    BalasHapus
  24. Nah kan itu bisa, dan terimakasih atas nasihat nya.

    BalasHapus
  25. yes....!!!! akhirnya terjawab gan masalah related post nya cuma tampil 5, sekarang sudah bisa dibuat menjadi 7 gan liat aja diblog ku.

    var maxresults=5; aku ganti menjadi var maxresults=7; dan yang pada kode keduanya max-results=6 aku ganti denngan max-results=7. dan hasilnya menakjubkan kan hehehe.....

    BalasHapus
  26. yes bisa sampai 8 gan....., mantap ne gan tutorialnya......

    BalasHapus
  27. Salam kenal, dengan sedikit melakukan modifikasi, jadilah related post yang tampil cantik dan dinamis

    BalasHapus
  28. Salam kenal juga gan, gimana menarik kah artikel di atas.

    BalasHapus
  29. Tips mantap gan, mohon ijin untuk penerapan dalam blog. Salam kenal persahabatan.

    BalasHapus
  30. Sama-sama gan dan jadilah Community Blazer Blog

    BalasHapus
  31. Related Post with thumbnail, ini memang tips yang menarik, salam kenal persahabatan

    BalasHapus
  32. Thanks...I Like. Salam Persahabatan:)

    BalasHapus
  33. harus teliti mengedit ni
    terima kasih infonya dan sukses selalu...

    BalasHapus
  34. Tips-trik blogging yang mantap mas bro, thanks for sharing

    BalasHapus
  35. Informasi tentang tips-trik yang bermanfaat mas bro, thanks for sharing, rahayu

    BalasHapus
  36. makasih gan infonya.. ijin nyobain moga pas sama blogku.. :)

    BalasHapus
  37. siip gan makasih tas smua tipsnya.

    BalasHapus
  38. Sebelumnya salam kenal. Saya termasuk New Comer dalm dunia blog. saya tertarik artikel yang anda posting ini. setelah saya coba, tentunya sudah sesuai dengan arahan diatas ternyata tidak bisa tampil. penyebabnya mungkin apa ya? kunjungi kami di http://kampoengikan.blogspot.com. Terimakasih atas jawaban dan kunjungannya

    BalasHapus
  39. thanks gan, oya biar karakter yg muncul dibatasin bisa gak gan, coz judul artikel ane panjang2 jadi jelek keliatannya melebihi batas hehe

    BalasHapus
  40. Thanks sudah berbagi ilmunya, sukses selalu....

    BalasHapus
  41. Hallo Gan, saya dtang lagi.
    di HTML saya kenapa tidak ada
    jadi di mau diletakan dimana ?
    thanks
    http://rossanoni.blogspot.com

    BalasHapus
  42. Kode tidak akan muncul jika Expand Widget Template nya belum di centang, jadi centang terlebih dahulu.

    BalasHapus
  43. artikel yg bagus gan, terima kasih sudah berbagi.
    ditunggu kunjungan baliknya.

    BalasHapus
  44. info menarik mas, dan saya suka artikelnya yg ini dan juga salam kenal dari mico nie, dan juga met blogging juga nie, hehe dan sekalian bagi teman2 yg suka dengan download film box office,action,horor dan segala jenis film silakan kunjungi situsnya gue loe, hehe dan makasi untuk adminnya juga ya, thanks berat.gbu

    BalasHapus
  45. var maxresults=5; kok gak bisa di tambah mas, walaupun di ganti tetep 5 tampilannya

    BalasHapus
  46. berhasil gan. ;D
    nice info..

    BalasHapus
  47. bisa gak ya di jadiin related video.???

    BalasHapus
  48. Makasi yah kang,,, berhasil terpasang diblog saya...

    BalasHapus
  49. GAK ada ??

    kode tersebut tidak ada karena anda tidak MENCENTANG "EXPAND WIDGET TEMPLATE" << slow slow :D wkwkwkw,,,

    salam blogger,, makasih gan ! berhasil...
    aldofahreza.blogspot.com

    BalasHapus
  50. makasih,.. ane coba nerapin di blog ane bisa bagus ga,. anyway kunjungannya ya sob Good Paste Information

    BalasHapus
  51. Keren gan artikelnya jadi tuh di blogger ane mampir dulu deh liat

    BalasHapus
  52. FREE DOWNLOAD SEDUCE ME AND OTHER SEX GAMES ADULT 18+ FOR PC FULL VERSION LATEST VERSION COMPRESSED 18+ DOWNLOAD FROM HERE-->>>> www.argames786.blogspot.com

    BalasHapus
  53. Terima kasih infonya, sobat. Salam kenal dan happy blogging.

    BalasHapus
  54. nice info gan, ane coba dulu..........

    BalasHapus