Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Memasang Widget Recent Post + (Thumbnails dan Comment Count)

Beberapa rekan mungkin sudah ada yang pernah memasang Widget Recent Post + Thumbnails + Comment Count ini ya, bagi yang belum pernah tidak ada salahnya mencoba memasang widget cantik ini yang saya ketahui pembuatnya bernama Kranti, yaitu owner dari Bloggertriks.com. Kalo tidak salah dulu saya pernah juga menulis tentang Recent Posts menggunakan Javascript, tapi yang terbaru ini rada beda, dimana widget ini tidak hanya menampilkan recent post doank, tetapi juga dilengkapi dengan penambahan fasilitas gambar dan juga jumlah komentar. Silahkan lihat samplenya di zoomtemplate.com



Ok tanpa banyak omonk langsung ke tutorial saja yoooo.


Untuk memasang widget ini caranya sangat mudah, kita tinggal copy-paste aja semua kode dibawah ini, kemudian langsung paste aja dalam gadget HTML/javascript (Tuju tab Layout - Page Elements - Add a Gadget - pilih HTML/javascript)


<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://schemar-mag.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>


Apa saja yang perlu diedit?


boxwidth - Ukuran Lebar Widget
cellspacing - Spasi diantara cells
borderColor - Warna Border
thumbwidth & thumbheight - Ukuran lebar dan tinggi gambar Thumbnails
fntsize - Ukuran Font pada title
acolor - Warna title
aBold - Tebal huruf pada title? (true or false)
numposts - Jumlah recent post yang ditampilkan?
home_page : http://NAMABLOGKAMU.com/ (Ubah sesuai URL blog masing2)

180 komentar:

  1. udah dapat Om.....dari bloggertrick

    BalasHapus
  2. Keren sih...
    Tapi takutnya malah bikin loading page jd berat om..
    Btw thx for share the info...

    BalasHapus
  3. Mantaff Om, langsung dicoba, thx :)

    BalasHapus
  4. gak berat ya om ? :-/

    BalasHapus
  5. Anonim16/6/09

    om... kok di zoomtemplate.com gak ada template yg om pake ini?! :D di share jg donk om template yg sedang om pake ini!! hehehee... :D coz tmplate yg ini (o-om.com) kren abiz.. :)

    sebelumnya thx om n sukses selalu :)

    BalasHapus
  6. Kalo bikin berat pasti iya, biasa pake javascript :)

    BalasHapus
  7. ane dah pake di blog ane OM he.he..
    tapi kayaknya ini lebih bagus deh

    BalasHapus
  8. walah apa lagi ini om, makasih om tutorialnya langsung tak coba :)

    BalasHapus
  9. boleh tak javascript host pada blogspot?

    BalasHapus
  10. Widgetnya Recent Post nya memang lebih cantik ya dari pada widget sebelumnya.

    BalasHapus
  11. wah rupanya dari bloggertrick yah kang, mantab nih informasinya...keren

    BalasHapus
  12. wahhh
    sep banget neh om
    :)

    BalasHapus
  13. Anonim16/6/09

    Mau test di blog percobaan dulu deh, takutnya tlalu berat!

    BalasHapus
  14. Masih cinta WP om.. dari dulu pengen belajar blogspot ga kesampaian trus hehehe.. but nice info om...

    BalasHapus
  15. Makasih om tipsnya, akan langsung di praktekin, salam hangat om dari BBM

    BalasHapus
  16. WAH GAK PERTAMAXX LAGI COYY . . .

    emang ini yang aku cari dari dulu ohm, wew malah nemu disini dah . . trim ya ohm

    BalasHapus
  17. Kerenz om..akan saya coba, thanks

    BalasHapus
  18. wah info penting nieh perlu disebar luaskan...ijin om mau nyimpan dipostinganku.......

    BalasHapus
  19. mantap...oke banget sharingnya, kira2 loading blog jadi lelet gak ya ?

    BalasHapus
  20. seep mas,bagus mas
    tapi blogku gi baisa dibuka nieh,gimana nih???

    BalasHapus
  21. Cantik om, cuma sayangnya saya fakir benwidth. Alergi gambar n multimedia :D

    BalasHapus
  22. Wah, keknya keren nih, manteb dah... Thanx Kang..

    BalasHapus
  23. muantap... sip om..

    BalasHapus
  24. Saya bookmark dl y Om cz saya mau pasang d the fachia. Smoga sukses. hehe,,

    Thanks om.. :)

    BalasHapus
  25. kalo yang recent comment gimana oom???...Kasih tau dong...

    BalasHapus
  26. thanx Om..bagus uey...

    BalasHapus
  27. ayolah kita mulai oom, ini kontes seo, buat ngilangin ngantuk, kalo kalah tinggal tidur, kalo menang buat mampir ke pinggiran pasar kembang...kekeke

    BalasHapus
  28. Bagus om, saya bookmark ah

    BalasHapus
  29. namanya juga javascript pasti berat...hehehe

    BalasHapus
  30. menarik bgt nih om..tapi saya berat y kalo pke js..hmm..dipikir2 dulu deh...tpi aku mau numpang TANYA..gimana caranya menambahkan widget di sebelah header image seperti punyanya om ??? thx kalo udah di jwb..kalo belum dijwb thx juga mengingat si om yg makin sibuk :D :D :D

    BalasHapus
  31. Wao keren coba dulu ah...
    Makasih Om

    BalasHapus
  32. :x OOM ini untuk blogger/blogspot kan ya? kalo iya enak banget dah, suwun atas berbagi ilmunya semoga berkah

    BalasHapus
  33. om mang ga da matinya nich..di coba ah..makasih om infonya..

    BalasHapus
  34. waw.. good ipoh om ^^ thanx ^^

    BalasHapus
  35. om,klo tanpa warna background dan garisnya gimana om?

    BalasHapus
  36. SIAPPPPP!!!:D langsung gw coba ni bang
    eplekenyessss

    BalasHapus
  37. o-om .. saya rasa widget ini lebih bagus dan mudah untuk di gunakan

    Rujuk sini: http://mlxperience.blogspot.com/2008/11/recent-post-thumbnails-widget-for.html

    hydir
    www.kbsoccernet.com

    BalasHapus
  38. Wah, perlu dicoba ini, om. Apa bedanya dengan bloglist-nya Blogger, om?

    BalasHapus
  39. udah coba om.. tapi kok gambarnya yang nampil adalah gambar standar ... no image

    BalasHapus
  40. wahhhh, aku udah pake WP nieh sekarang...

    nambah ilmu aja deh.... TOB!!!

    BalasHapus
  41. ok langsung dicoba? tapi kira2 ntar blog jadi berat gak ya?

    BalasHapus
  42. segera kita akan coba om.. lebih cepat lebih baik juga... hehehee.. :D

    BalasHapus
  43. om.. mo tes avatar mybloglog sy aja.. :D nongol apa nggak? :D

    BalasHapus
  44. wah kemaren mau coba2 cari yang kek gini, eh udah ada disini..

    makasih omz, tapi mikir2 beratan ga ya.. :D

    BalasHapus
  45. terima kasih infonya, bermanfaat banget buat saya ..

    BalasHapus
  46. keren kang udah pake tuh di blog saya... nuhun lah kanggo yang buat...

    BalasHapus
  47. Makasih Om, tapi kalo widget popular post ada ga?

    Blogger Make Money

    BalasHapus
  48. Hemmm...bikin lambat loading page ga om?
    Pgngen pasang sih...mohon jawabannya.
    Thanks

    BalasHapus
  49. :D senyum pembawa luka :((

    BalasHapus
  50. Mantap bang lagi lagi bang O-om bikin postingan yang menarik

    BalasHapus
  51. keren banget om... mkasih

    BalasHapus
  52. insya Alloh q coba :)

    BalasHapus
  53. thnx om ...tak coba dl y:D

    BalasHapus
  54. om, mau tanya. Apa bisa script di atas dipakai di kolom postingan?

    BalasHapus
  55. Saya udah coba tuh di blog saya. Lumayan bikin tampilan lebih cantiek =))

    BalasHapus
  56. keren nih kayanya.. thank's for share mas he..he..

    BalasHapus
  57. Anonim19/6/09

    Nice Post Om.....Thank you :D

    BalasHapus
  58. makasih OOM - saya udah coba dan emang manthap hasilnya - makasih ya oom , oom boleh dim letakan Link oom di blog dimas ....?

    BalasHapus
  59. siip aku pasang aja ahhh :))

    BalasHapus
  60. MAKASIH O-OM... INFO2NYA MAKIN HARI MAKIN TAMBAH BAGUS SERTA BERMANFAAT... GD LCK..

    BalasHapus
  61. apa ngga tambah berat loadingannya om?
    thanksss ..

    BalasHapus
  62. keren sich om, tapi pake JS, bikin lambat dech...

    BalasHapus
  63. lebih cepat lebih baik ikut pelajaran om...ok mantap om

    BalasHapus
  64. mantap euy artikelnya......

    BalasHapus
  65. makasih om infonya

    BalasHapus
  66. thanks om ini udah lama aq cari akhirnya dapat juga...tanx berat

    BalasHapus
  67. wow....nice share om...aku selalu menikmati postingan oom deh...trima kasih sekali telah berbagi.

    salam

    BalasHapus
  68. Salam kenal mas agus.
    saya dah coba pasang recent postnya di blog saya. tapi berhubung postingannya jarang pake gambar, saya mau menghilangkan kode gambarnya. Kode mana yang di hapus ya...?
    Beberapa kali saya coba, koq malah jadi amburadul ya..he.he

    BalasHapus
  69. Artikelnya OOM membentu banget,thx ya OOM www.kokotole.co.cc

    BalasHapus
  70. tipsnya mantap bro,thanks yah
    sangat bermanfaat bagi pemula seperti gw,keep up the good work!

    BalasHapus
  71. ternyata bisa digituin yac? baru tau nih, nice tips

    BalasHapus
  72. Trims Om ! Sukses selalu.

    BalasHapus
  73. om,tinggai nya ga bisa di atur?tolong kasi pencerahan

    BalasHapus
  74. om tukeran link ma blog ku yuk om..page rank 4
    thanks

    BalasHapus
  75. Wuih tengkyu kang,saya newbie neh perlu bimbingan dr kang oom

    BalasHapus
  76. Anonim4/7/09

    tanks untuk pencerahannya oom...

    BalasHapus
  77. Wah informasi baru yang lebih menarik dari sebelumnya, thank ya om.

    BalasHapus
  78. nambah ilmu lagi saya bos makasih ya atas pencerahannya salam kenal

    BalasHapus
  79. om klo langsung pasang lebih dari satu blog bisa ga ya?????~x(~x(~x(~x(~x(
    tolong dong tutornya om

    BalasHapus
  80. dapet ilmu baru nh...........
    makasih y^^

    http://dedepurnama.blogspot.com

    BalasHapus
  81. makasih bang... gw dah coba n kyknya bagus juga. :)

    BalasHapus
  82. wah om mautanya kok melorot kebawah ya tmblne, tolong donk ?????????????/

    BalasHapus
  83. I have find a quick and easy to install and customize Recent Post Widget with thumbnails. You can install it in minute with hassle-free complicated manual code installation.

    You may look at this link for more information : http://www.engadgeteer.com/2009/07/recent-posts-widget-with-thumbnails.html

    BalasHapus
  84. bagus banget bro infonya
    thanks
    ;)

    BalasHapus
  85. thank om.. solusinya bagus banget.
    saya sudah mencobanya.
    thank

    BalasHapus
  86. Ini kan mirip ama punya Kang Rohman. Makasih atas tipsnya, salam kenal, Frelia the Anak SD.
    Please visit me back^^

    BalasHapus
  87. apa itu incredimail silahkan kunjungi blog saya www.sainsipa.co.cc

    BalasHapus
  88. mas, ada juga recent post yang bisa diklasifikasikan dengan label. jadi kamu bisa liat post/artikel terbaru kamu untuk tiap label. ada di http://infotentangblog.blogspot.com/2009/07/recent-post-dengan-label.html :D

    BalasHapus
  89. ini yang saya cari, thanks mas info pasang widget recent post plus thumnail

    BalasHapus
  90. Om, saya pake di blog komunitas kami di theyouthcorner-bali.blogspot.com... nah karena saya suka banget and emang nyari seperti ini saya pasang widgetnya sebagai pengganti blog posts utama, karena ada thumbnail simple and ringkas sederhana, tapi ternyata kalau dipake di halaman utama blog sendiri dan widgetnya ini merujuk ke halaman yang itu juga, thumbnailnya gak mau keluar ya mas... sedangkan kalo blog yg dirujuk selain blog tempat kita masang itu malahan mau keluar thumbnail nya, mungkin saya aja yg nemu kasus gini??? ANy comment om?

    BalasHapus
  91. o-om, aku udah mengedit nih script.. ternyata ini adalah script yang sangat bagus dan fungsional karena dapat dipadukan dengan script pendukung layout semacam jquery.. hasilnya adalah sebuah template seperti photoplus karya dante araujo, tetapi lebih sip karena dapat menampilkan seluruh posting... coba dicek di http://getthecheesetosickbay.blogspot.com
    thx

    BalasHapus
  92. banyak info tips disini saya suka terima kasih :)

    BalasHapus
  93. Anonim9/9/09

    thanks
    http://frees-software.blogspot.com

    BalasHapus
  94. Hmmm makasih O-om....
    udah aku coba n pasang tapi koq ga bisa rubah warna fontnya ya?
    Kalau bisa diubah, tolong aku ya ....

    BalasHapus
  95. makasih info nya om....sekaliaan saya link ya....

    BalasHapus
  96. Anonim12/10/09

    Tips+Trik nya keren,langsung saya coba,makasih yah...

    BalasHapus
  97. makasih o-om tips tips nya keren sangat ;;)

    BalasHapus
  98. mantaf kang.....pake gambar lg....

    BalasHapus
  99. kurang sempurna klo kang .....

    ada yg lebih bgs gk????

    Regards : PingugOblOg

    BalasHapus
  100. Alhamdulillah berhasil om...sukses selalu...:D

    BalasHapus
  101. jadi makin keren aja nich kayaknya, cobain dech...

    BalasHapus
  102. takut berat om hehhehe

    BalasHapus
  103. Anonim25/2/10

    website related to the subject here: http://baladacam.com.br

    BalasHapus
  104. hebat2,
    tapi kerjanya jadi berat gak ??

    BalasHapus
  105. Mau tanya om... Kalo bikin image di setiap postingan blog untuk homepagenya jadi thumbnail gimana yach...? Jadinya ukuran gambar sebenarnya baru terlihat kalo uda pada halaman postingannya dibuka...

    BalasHapus
  106. udah dicoba tutorialnya om, thanks ..

    BalasHapus
  107. langgsung di tempel oom..

    maksih...

    BalasHapus
  108. Tapi bikin berat load page ya master..

    BalasHapus
  109. om.... saya comment manajemennya pke disqus om trus pas dipasang, gak muncul tuh berapa comment countnya... gimana dund om?scriptnya diganti gmna om.... thank

    BalasHapus
  110. sippp deh q coba.>>

    BalasHapus
  111. Informasi yang menarik ..

    Saya cuman ingin bertanya "Kenapa setiap kali saya pasang widget itu, selalu keluar/dialihkan ke-halaman baru" .. Jadi HomePage blog saya tertutup dan muncul halaman baru "halaman yang menunjukkan widget itu" ..

    Konfirmasi jawaban ke Blog saya ya Gun .. & -Follow back ..-

    BalasHapus
  112. makasih OOm, saya coba trick2x dari blogger lain gak bisa tapi di sini bisa ;)

    thank u

    BalasHapus
  113. Folow Gan Bloger Me
    http://ninjasaganew.blogspot.com/

    BalasHapus
  114. o-om .. kok di ane gk ada thumbnail gambarnya sih ???

    Thumbnailna masa gambar tinypic ???
    please ... bantuin donk !!!!

    BalasHapus
  115. Thank you mas tutorialnya.

    BalasHapus
  116. Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

    BalasHapus
  117. Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

    BalasHapus
  118. Terima Kasih, Tulisan yang sangat membantu. Salam Sukses!

    BalasHapus
  119. Terima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba

    BalasHapus
  120. aku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu

    BalasHapus
  121. Setelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses

    BalasHapus
  122. Terima kasih atas Artikel dan Info yang selalu menambah wawasan.semoga sukses

    BalasHapus
  123. terimakasih O_OM Berbagi elmu memang menyenangkan...!!

    BalasHapus
  124. Warnanya keren om,,, ke TKP akkhh

    BalasHapus
  125. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  126. cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  127. Tulisan dan Tipsnya sangat bermanfaat dan Infomatif. wajib dicoba. sukses selalu.

    BalasHapus
  128. Tips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses

    BalasHapus
  129. Amazing artikel, Infonya bagus banyak mengandung Tips dan Pesan yang bermutu. salam sukses

    BalasHapus
  130. Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  131. cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  132. Saya menemukan Artikel hebat di wibesite ini jadi ingin coba Tipsnya. Semoga berhasil

    BalasHapus
  133. Artikel Menarik terutama Infonya, boleh dicoba. Salam sukses

    BalasHapus
  134. Info dan Tulisannya Amazing, boeh dicoba. Sukses selalu

    BalasHapus
  135. Tipsnya sangat Infomatif, wajib dicoba salam sukses

    BalasHapus
  136. Terimakasih Banyak Tips dan Artikelnya, boleh dicoba. Salam sukses

    BalasHapus
  137. Terimakasih Artikelnya bermanfaat dan Infonya menambah Ilmu pengetahuan. Harus dicoba. Semoga berhasil

    BalasHapus
  138. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  139. Saat membaca Artikel dan Tipsnya yang benar benar menarik. Jadi ingin mencoba. Salam sukses selalu

    BalasHapus
  140. cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  141. Wibesite yang menarik di dalamnya banyak Artikel dan Tips yang mengandung Ilmu Pengetahuan, Harus dicoba.Terimakasih

    BalasHapus
  142. Saya senang membaca Info dan Artikel yang di buat di Wibesite ini. Patut dicoba. Salam Sukses selalu.

    BalasHapus
  143. Menarik, sangat Menarik Artikel dan Tipsnya. boleh dicoba. salam sukses

    BalasHapus
  144. Wibesite yang sangat Amazing, Artikel dan Tipsnya boleh dicoba. Semangat !!

    BalasHapus
  145. Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  146. Postingan yang sangat Hebat, Tips boleh dicoba.salam sukses

    BalasHapus
  147. Terimakasih Banyak Tips dan Artikelnya, boleh dicoba. Salam sukses

    BalasHapus
  148. Terimakasih Artikelnya bermanfaat dan Infonya menambah Ilmu pengetahuan. Harus dicoba. Semoga berhasil

    BalasHapus
  149. setelah saya mencari cari di beberapa Wibesite , saya menemukan Artikel yang Bagus dan bermanfaat. Patut di coba, sukses selalu

    BalasHapus
  150. Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    BalasHapus
  151. Postingan yang sangat Hebat, Tips boleh dicoba.salam sukses

    BalasHapus
  152. Artikel yang bermanfaat dan berguna, wajib di coba. sukses selalu

    BalasHapus
  153. Ilmu yang sangat Hebat, boleh dicoba Artikel dan Tipsnya. Semoga berhasil

    BalasHapus
  154. Artikel yang benar benar sangat infomantif dan Kreatif. boleh dicoba, sukses selalu

    BalasHapus
  155. wah bagus sekali infonya pasti say akan coba sekarang juga, sukses yah

    BalasHapus
  156. wah bagus sekali infonya pasti say akan coba sekarang juga, sukses yah

    BalasHapus
  157. Terimaksih untuk info yang sangat efektif, boleh dicoba.

    BalasHapus
  158. makasih tutorialnya om... langsung di coba

    BalasHapus
  159. artikel yang berguna untuk d coba ,thank ya :)

    BalasHapus
  160. sangat berguna
    thank for info

    BalasHapus
  161. makasih mas widgetnya, saya coba dulu, kelihatannya sih bagus untuk ditaruh di footer blog.. semoga work 100% ya om :)

    BalasHapus


 

Back to Top