Thursday, August 27, 2009

Membuat Recent Posts Lengkap Dengan Preview Gambar

31 comments
loading...

Membuat Recent Posts Lengkap Dengan Preview Gambar Lihat kan gambar disamping ini? Pasti sudah tahu kan ini apa? hehe :D. Yup. . .widget recent posts lengkap dengan thumbnails atau preview gambar yang letaknya ada dibagian atas blog bisnis online ini. Untuk kalian yang sering berkunjung ke blog ini, pasti sudah tahu kan kalau sebelumnya saya hanya menggunakan css untuk menampilkan recent posts atau artikel terbaru? Nah, sekarang ini saya ganti dengan memasang widget recent posts khusus blogger yang dilengkapi dengan preview gambar, agar terlihat lebih menarik :D.

Ah...basi kali, udah banyak yang pake
Hehe. . .siapa tahu aja ada yang belum tahu gitu :p. Widget recent posts with thumbnails ini saya dapatkan dari seorang blogger senior asal luar owner dari bloggertricks.com. Dengan melakukan sedikit pengeditan dibagian scriptnya, akhirnya widget ini layak untuk saya pasang, hehe.
Nah, untuk kalian yang belum tahu dan tertarik ingin memasang widget ini di blog kalian, silakan lihat panduannya dibawah :

Langkah-langkah Membuat Widget Recent Posts Lengkap Dengan Preview Gambar
1. Login ke akun blogger kalian
2. Klik tata letak > Tambah Gadget > HTML/Java Script

3. Copy dan paste kode dibawah ini :


<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://numb3rblog.blogspot.com/";


</script>


<script src="http://sites.google.com/site/numb3rblog/recent_posts/recentposts_thumbnail.txt" type="text/javascript"></script>


Penjelasan :

(Edit bagian-bagian yang sesuai dengan blog kalian)

boxwidth - Lebar dari widget
cellspacing - Space antara sel (lebih bagus set ke default)
borderColor - Warna Pembatas/tepi (sesuaikan dengan warna latar belakang template kalian)
thumbwidth & thumbheight - Lebar dan Tinggi dari thumbnail

fntsize - ukuran font judul
acolor - Warna dari judul

aBold - Mau judulnya di bold atau tidak?? (true atau false)
numposts - Berapa banyak posting yang ingin ditampilkan?
home_page: http://numb3rblog.blogspot.com/ (ganti dengan url blog kalian)

Script ini saya upload di tempat hosting gratisan (http://sites.google.com/site/numb3rblog/recent_posts/recentposts_thumbnail.txt).
Namun, sangat disarankan untuk men-download dan upload script ini ke hosting kalian sendiri.
4. Dan Terakhir... Simpan Perubahan.

Selesai!

Catatan: Pastikan kalian memilih YA dalam Pengaturan »Feed Situs» Kendali Penuh »Izinkan Feed Blog

Selamat Mencoba!

loading...

31 comments:

  1. ok juga tutorialnya sob.. lam kenal ya.. n met berpuasa.. btw.. sy dah follower tuh.. followbackya.

    ReplyDelete
  2. Mampir nih.. sebelum imsyak.. blognya keren bos..

    ReplyDelete
  3. Makasih infonya ya.. sangat bermanfaat n lengkap.. gimana kalau kita tukar link

    ReplyDelete
  4. @kumpulan sms : oke. . .nanti saya berkunjung sekaligus follow back. Thanks :)

    @saung bisnisku : walahh. . .kok cm nyepam -getok- hehe. . .

    @collections : ur welcome. Boleh sob, ke bagian tukar link aja ;)

    ReplyDelete
  5. artikelnya bermanfaat banget. sukses selalu bro. :)

    ReplyDelete
  6. keren nich artikelx... thanks broooo

    ReplyDelete
  7. oke jg inpona mas bos :), kmarin ane nyoba ngedit template dikit malah bubar ;)) maklum masih newbie ..

    ReplyDelete
  8. Hehe. . .ane jg msh belajar gan :D
    Thanks

    ReplyDelete
  9. Terimakasih infonya, bisa di terapkan di blog yang di blogspot.

    ReplyDelete
  10. @dony, @bali news : thanks

    @resep nikmat : sama2, silakan sob :)

    ReplyDelete
  11. Setelah saya coba.... rasanya mantaaab mas NumB3R =))

    ReplyDelete
  12. Hehe. . .mantap piye toh? bisa aja nih @jaiman. Thanks deh :p

    ReplyDelete
  13. Ijin Copy scriptna sambil saya edit sedikit... terima kasih mas NumB3R

    ReplyDelete
  14. Search di google dan diantarnya keblog ini, tp klu yg ini anaa dah pasang diblog widget blogger trik yang anaa cari yg seperti anaa lihat di http://zone4health.blogspot.com/, bisa sobat buatin tutorial masang widget seperti itu?

    ReplyDelete
  15. Trima kasih sblmnya sudah mau mampir :)

    Mksd mba Anna widget yg mana ya? Recent post jg?
    Insya Allah saya bantu kalau saya bisa :D

    ReplyDelete
  16. keren banget bos..bisa dicoba nih biar seru hehe..thanks mas :)

    ReplyDelete
  17. To Mba Anaa :
    Oh. . .saya baru cek td mbak, sebenarnya sm aja kok, yg membedakan itu widget yg digunakan oleh sobat Muhamad Bagir diblognya, mencantumkan tanggal posting tsb dibuat, dan sedikit perbedaan.

    Utk menampilkan tanggal pembuatan posting, dbagian showPostDate = false;, tinggal diubah saja menjadi showPostDate = true;

    Nah, untuk merubah ukuran gambar (thumbnail) yg tampil, mba bisa mengedit dibagian thumbwidth = 40;
    thumbheight = 40;. makin besar angkanya, makin besar pula gambar (thumbnail) yg ditampilkan, begitu jg sebaliknya :D

    ReplyDelete
  18. @woody : Yup. . .sama2 sob,silakan dicoba )

    ReplyDelete
  19. Terima kasih ya dah usaha jawab walau anaa dah temukan jg dari sini=> http://www.bloggerplugins.org/2009/07/recent-posts-widget-blogger-thumnail.html

    ReplyDelete
  20. Hai sob.. lama gak mampir nih.. gimana khabarnya... tipsnya boleh juga utk di coba nih..

    ReplyDelete
  21. Maksudnya kaya yang di atas itu ya sobat... mau dong...

    ReplyDelete
  22. Saya praktikan coba yah mas. Mudah-mudahan blogku bisa lebih cantik dengan recent post ini.

    ReplyDelete
  23. aduh keren banget euy..makasih buaanyak sob..

    ReplyDelete
  24. thanks mas pencerahannya, kalau untuk setting backgroudnnya gimana mas bisa pa ngga?

    ReplyDelete