Pasang Widget Related Post Dengan Icon - Indriawan dot Com | Informasi Dan Berita Online

Breaking

Post Top Ad

Space Iklan

Senin, 29 Agustus 2011

Pasang Widget Related Post Dengan Icon

Assalamualaikum selamat siang sahabat semua. Sebelumnya saya ucapkan SELAMAT HARI RAYA IDUL FITRI 1432 H MOHON MAAF LAHIR DAN BATIN. Pada kesempatan yang sangat berharga ini saya akan memenuhi permintaan sahabat saya Hori yang meminta bagaimana cara pasang widget related post seperti milik saya. Sebenarnya widget ini sudah sangat lama ada kok dan saya kira kalian semua juga sudah pada tahu. Oh iya sebelumnya baca juga Cara membuat Artikel Terkait Dengan Gambar/Thumbnails atau Membuat Artikel Terkait Dengan Fungsi Scroll jika kalian kurang suka dengan widget ini.

Oke langsung saja kita mulai deh....
1. Seperti biasa, kalian harus login dulu ke akun blogger
2. Kemudian masuk ke rancangan lalu Edit HTML
3. Jangan lupa Expand Template Widget
4. Biasakan back up temnplate dulu ya
5. Kemudian pasang kode berikut di bawah tag </head>

<style type='text/css'> #related-posts { float : left; width : 100%; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_CuN6QZpFDrlzjxn6qh647I3Ek3FzTvkzmWqQwLPHFJN7cCMeJlSbNQg8VcXkEju34RsB3fWEMkOhKgDU-oI_MHGwRVLRgYKyO2Fdg150K5Wgbypgr3mgPxmuaZQNOwO9CdmnldBv34E/&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://belajarblogging.googlecode.com/files/relpost.js' type='text/javascript'/>

6. Jika sudah, cari <data:post.body/> lalu pasang kode berikut di bawahnya

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

7. Dan yang terakhir tentu saja save template dan lihat hasilnya

Semoga bermanfaat
Alhamdulillah...

351 komentar:

  1. Alhamdulillah berhasil sahabat...Terima kasih.
    Sambil mengucap : Selamat Hari Raya Idul Fitri 1432 H Mohon Maaf Lahir dan Batin...semoga Amalan kita selama bulan Ramadhan ini diterima Allah Ta'ala aamiin

    BalasHapus
  2. wslm..
    minal aidin wal faidzin juga sob..
    mohon maaf lahir dan batin ...

    btw ini related post dgn icon bisa di kasih scrollbar juga ya sob ???..

    BalasHapus
  3. @ Webmdmk: iya sama" kawan

    @ Shinobi Blog: bisa aja sob, tergantung kreativitas kita

    BalasHapus
  4. Kelihatannya bagus mas...saya sudah memakai yang pakai scroll

    BalasHapus
  5. siip mas bro . . suwun ^^


    minal aidzin wal faidzin yow mas?

    BalasHapus
  6. @ Hori: Oke bro podo" minal aidin walfaidzin pisan yo

    @ castors: Thank you

    BalasHapus
  7. Wah bagu juga nih bang namun kurang oraktis menurut ane....!!

    BalasHapus
  8. sangat membantu sekali artikelnya mas,.. terima kasih.. follow balik ya mas,..

    BalasHapus
  9. ok juga nie...
    langsung ajj k TKP....
    izin copas script'y juga

    BalasHapus
  10. mantap nih kang infonya,,
    aku akan coba langsung pasang nihhhh....

    BalasHapus
  11. oke juga nie info nya sangat bagus makasih yach........

    BalasHapus
  12. makasih info nya sangat bagus dan sangat menarik nie,,,,,

    BalasHapus
  13. info nya sangat bagus dan sangat menarik nie,,,,,,,,,,

    BalasHapus
  14. makasih atas info nya sangat bagus ,,,,,,,,
    dan salam kenal aja ,,,,,,

    BalasHapus
  15. gann ada cara yang lebihh mudah lagii gakk???

    BalasHapus
  16. mantap juga nie sangat bagus dan sangat menarik nie,,,,,,,,,,

    BalasHapus
  17. wah mantap juga nie gan sangat menarik nie,,,,,,,

    BalasHapus
  18. bole juga nie info nya sangat bagus dan sangat menarik nie ,,,,,,,

    BalasHapus
  19. thanks gan.....good job!!!!!
    egivirus91.blogspot.com

    BalasHapus
  20. oke juga nie info nya sangat bagus dan sangat nebarik nie makasih yah kawan,,,

    BalasHapus
  21. bisa boss, tp kok pas di homepage posting yg muncul cuma judul saja. kalau di posting sebuah artikel masih ada tulisan Read more ato Baca selengkapnya
    apa karena saya memakai fungsi Read more manual ya,

    BalasHapus
  22. Terima kasih atas info nya gan....

    BalasHapus
  23. info nya sangat bagus nie dan sangat menarik nie,,,,,

    BalasHapus
  24. makasih mas infonya sangat menarik..
    di tunggu info tentang widget" selanjutnya...!!

    BalasHapus
  25. Kalo misalnya error bisa balik lagi gak ? caranya ? takut gagal nih..

    BalasHapus
  26. apa ada cara yang lebih mudah lagi untuk pasangnya..

    terimakasih dari bracket TV LCD

    BalasHapus
  27. Mas,, numpang tanya,, cara modifikasi komentr sprti ini gmna ya mas,, mklmu msh newbie,, http://remajateknologi.blogspot.com

    BalasHapus
  28. mantap juga nieinfoi nya sangat bagus dan sangat menarik nie,,,,,,,

    BalasHapus
  29. salam kenal mas..untuk nenjalin tali persahabatan follow juga ya blog ane... terima kasih..

    BalasHapus
  30. mantap kang langsung meluncur, makasih...

    BalasHapus
  31. Manfaat tutorialnya Om..
    Makasih

    BalasHapus
  32. terimakasih sobat tutorial cara membuat related articles ini ya

    BalasHapus
  33. Siiippp...
    Sngat membantu sekali....!!!!

    BalasHapus
  34. mkch gan infonya bermanfaat sekali,, jual furniture jepara harga murah kualitas mewah dengan desain minimlais dan ukir www.royalmebeljepara.com salam sukses gan

    BalasHapus
  35. mkch gan infonya mebel furniture jepara www.jeparadisemebeland.com salam kenal

    BalasHapus
  36. wew mantap keren.
    makasi artikel nya sob,
    salam sukses

    BalasHapus
  37. mas bro... saya sudah coba tapi ga bisa, minta infonya

    http://oimelanwar.blogspot.com

    BalasHapus
  38. terimakasih atas semua informasinya snagat bermanfaat,,,
    salam kenal...

    BalasHapus
  39. asyik mau di coba akh,,terima kasih buat informasinya gan,,,bisa nggak ya,,,saya suka galat nih,,itu kira2 kenapa ya?

    BalasHapus
  40. Very nice to info,,,,,,,thank's ya,,,,,,mas

    BalasHapus
  41. sharingnya bagus..sukses terus....
    http://sarahnetslawi.blogspot.com/
    http://umidansarah.blogspot.com/

    BalasHapus
  42. kayannya harus pake dah soalnya temen temen sesama bloger udah pada pake semua . .
    makasih yah . .

    BalasHapus
  43. Terima kasih telah berbagi Informasi yang bermanfaat.
    Sukses selalu.

    BalasHapus
  44. mantap bro tipsnya, kebetulan saya juga baru nyari nih widget.
    tapi sudah terlanjur pasang Linkwithin :)

    BalasHapus
  45. Wah.. terima kasih banyak infonya gan.
    berguna banget nih.

    BalasHapus
  46. makasih banyak nih gan atas tipsnya...
    semoga bermanfaat juga bwt yang lainnya

    BalasHapus
  47. Mantappp banget kang...!!!
    tak coba dulu yaKK?? hehehehe

    BalasHapus
  48. informasinya menarik gan,,, thanks sudah berbagi.

    Kata Motivasi, Kata Gombal, Kata Motivasi Kehidupan, Nexian Android

    ditunggu kunjungan baliknya gan....

    BalasHapus
  49. makasih tipsnya mas.saya izin nyimpan.

    BalasHapus
  50. sip gan . terima kasih buat infonya. ada yang pakai thumbnail gambar nggak

    BalasHapus
  51. tips yang cukup menarik,sayangnya blog ane artikelnya belum banyak nich.jadi related postnya blm bisa maksimal

    BalasHapus
  52. waah ini nih widget yang dicari2 biat nambah keren blog kita...terimakasih sob

    BalasHapus
  53. kalo buat di plajari bagus kali ya ....


    saya coba dulu ya gan ... ???

    BalasHapus
  54. snagat membantu sekali artikelnya mas termakasih.. smoga sukses slalu..

    BalasHapus
  55. mampir yah gan ke blog ane

    http://dzakeystyle.blogspot.com

    insyaallah bermanfaat

    BalasHapus
  56. tips bagus kang ini yg membuat SE makin senang ama blog kita...pengunjung makin berlama2...suwun gan

    mukena

    BalasHapus
  57. Nice Info Gan + Blogwalking sene hehehe
    izin Copas berserta sumber nya :)

    BalasHapus
  58. sebelum mencobanya saya ucapkan terima kasih sebanyak-banyaknya kepada penulis, semoga makin sukses selalu. Amin...

    BalasHapus
  59. Trims bro, saya coba di blog saya .. langsung berhasil

    BalasHapus
  60. berhasil gan.... thanks ya gan.. :D

    BalasHapus
  61. makasih gan atas informasinya
    di tunggu postingan terbarunya !

    BalasHapus
  62. terimakasih info nya bermanfaat bagi saya

    BalasHapus
  63. thanks untuk infonya

    salam kenal
    ditunggu kunjungan baliknya ya..!!
    .n_n.

    BalasHapus
  64. wah inovasi baru nih, boleh dicoba juga aha nanti..

    BalasHapus
  65. buat postingan, tar aja ah, belum da ide, thanks infonya,,

    BalasHapus
  66. artikelnya keren banget y, saya suka sekali

    BalasHapus
  67. buat postingan, tar aja ah, belum da ide, thanks infonya,,

    BalasHapus
  68. makasih y atas informasinya, semoga bermanfaat

    BalasHapus
  69. buat postingan, tar aja ah, belum da ide, thanks infonya,,

    BalasHapus
  70. buat postingan, tar aja ah, belum da ide, thanks infonya,,

    BalasHapus
  71. makasih y atas informasinya, semoga bermanfaat

    BalasHapus
  72. buat postingan, tar aja ah, belum da ide, thanks infonya,,

    BalasHapus
  73. artikelnya keren banget y, saya suka sekali

    BalasHapus
  74. buat postingan, tar aja ah, belum da ide, thanks infonya,,

    BalasHapus
  75. artikelnya keren banget y, saya suka sekali

    BalasHapus
  76. buat postingan, tar aja ah, belum da ide, thanks infonya,,

    BalasHapus
  77. makasih y atas informasinya, semoga bermanfaat

    BalasHapus
  78. buat postingan, tar aja ah, belum da ide, thanks infonya,,

    BalasHapus
  79. makasih y atas informasinya, semoga bermanfaat

    BalasHapus
  80. kira-kira iconnya bisa diganti ga ya

    BalasHapus
  81. ijin coba gan di blog ane,
    thanks gan

    BalasHapus
  82. Kalau Artikel terkait dengan icon disamping judul itu pake js yah gan, berat gak ??

    trims

    BalasHapus
  83. gannn !!

    kalo di template di blog ane kok gak bisa gannn..?
    cek:
    http://thedragao.blogspot.com

    mohon segera penjelasannya ..

    BalasHapus
  84. Informasi menarik :-)

    Thanks sudah berbagi.

    Salam,

    BalasHapus
  85. sungguh sangat bermanfaat terutama bagi saya seorang newbe

    BalasHapus
  86. related post ini nantinya muncul dibawah postingan kah?
    salam

    BalasHapus
  87. coba akhh , bolehh juga nchh nambah ilmu yang berharga :) siptt ..

    BalasHapus
  88. Nice share dan ikut menyimak

    jangan pelit berkunjung dan berkomentar di blog newbie saya ya gan :D karena setitik komentar anda dapat memajukan blog newbie saya

    BalasHapus
  89. Selamat Hari Raya Idul Fitri 1432 H Mohon Maaf Lahir dan Batin.....
    sip banget tutornya..

    BalasHapus
  90. mantep banget artikelnya sob....
    thx uda berbagi ilmu..

    BalasHapus
  91. sukses terus untuk blog2nya...
    keren postnya...

    BalasHapus

Post Top Ad

Space Iklan