Recent Post

Sponsored

Labels

addressbook Membuat Recent Posts Bergambar

Diposting oleh dev | , | 37 komentar »

Recent post bergambarMemasang widget recent post pada blog hampir dilakukan oleh mayoritas blogger, tentu saja alasannya untuk mempermudah pengunjung blog mengetahui artikel terbaru di blog kita dan untuk memancing pengunjung agar membaca artikel lain di blog kita. Pada artikel kali ini saya akan sedikit berbagi mengenai cara membuat recent posts bergambar / recent posts menggunakan thumbnails seperti yang saya gunakan di blog ini. Mudah2an widget ini dapat lebih mempercantik blog teman-teman dan lebih menarik pengunjung untuk meng-klik link tersebut.

1. Login ke account blogger.
2. Pada dashboard klik: Layout » Add a getget » pilih "HTML/Javascript"
3. Copy paste code di bawah ini:
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i44.tinypic.com/2r72hjd.jpg";
imgr[1] = "http://i44.tinypic.com/2r72hjd.jpg";
imgr[2] = "http://i44.tinypic.com/2r72hjd.jpg";
imgr[3] = "http://i44.tinypic.com/2r72hjd.jpg";
imgr[4] = "http://i44.tinypic.com/2r72hjd.jpg";
showRandomImg = true;
boxwidth = 280;
cellspacing = 2;
borderColor = "#cccccc";
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://komunitas-bantu-membantu.blogspot.com/";
</script>
<script src="http://viemonsta.googlecode.com/files/devrecentpost.js" type="text/javascript"></script>
4. Save

Jangan lupa ganti URL yang berwarna biru di atas dengan alamat URL blog teman-teman, untuk membuat tampilan sesuai dengan template blog teman-teman silahkan edit code yang berwarna merah. Dibawah ini sedikit penjelasannya:
imgr[0] = Pic yang keluar bila artikel tidak memiliki pic, silahkan ganti dengan URL pic teman-teman
boxwidth = Lebar widget
cellspacing = Jarak antara gambar
borderColor = Warna border (ganti dengan warna background template)
thumbwidth & thumbheight = Tinggi dan lebar gambar
fntsize = Ukuran text
acolor = Warna text
aBold = Bold text, isi dengan "true" bila menginginkan bold atau "false" bila tidak
numposts = Jumlah post yang ingin ditampilkan

Silahkan comment di bawah kalo ada yang mau ditanyakan. Selamat mencoba..

Update 21 Oktober 2009 "hosting javascript dipindahkan ke google code", baca alasanya disini

Related Posts by Categories

Silahkan klik di sini untuk membaca melalui feed reader anda. Atau masukkan alamat email anda di kolom dibawah ini untuk berlangganan artikel DevBook.net langsung ke alamat email anda.

feed

Page copy protected against web site content infringement by Copyscape

Ada 37komentar ke “Membuat Recent Posts Bergambar”
Dana Telco said...
 date:

Mantap sob, infonya membantu sekali.

♥ Neng Aia ♥ said...
 date:

good! tapi gi males ngoprek,,, hiks

dev said...
 date:

@dana: Semoga bermanfaat ya..
@Neng Aia: Ayo semangat :D

baburinix! said...
 date:

trims...andai ada yang bisa menciptakan mancing OL dan hasilnya benar-benar asli ikan, tak tahulah aku???

tips bermanfaat nih, sukses bos

H. Nandang Moch Solihin said...
 date:

Baguuss...terimakasiih,,, semoga ini bermanfaat dan anda tentunya semoga mendapat limpahanNya....

dev said...
 date:

@H.Nandang Moch Solihin: Amien..terimakasih kunjungannya mas..semoga bermanfaat..

Pras said...
 date:

Salam kenal..

Mich" said...
 date:

nice info kk^^
makasih yah uda kasih info kyk gini^^

dev said...
 date:

@pras & mich: sama-sama..salam kenal juga..

uZ's said...
 date:

Makasih nih tipsnya..
keren...

aku pasang di blog ku ya

dev said...
 date:

uZ's: silahkan..mudah2an bermanfaat :)

rumah curhat said...
 date:

mantab kang recent postnya, ada di urutan pertama om google.

dev said...
 date:

@rumah curhat: wah masa sih..saya malah belum pernah ngecek mas :D

Ratasoe said...
 date:

Mantap niy sob infox thanks,.

dev said...
 date:

@Ratasoe: sama-sama, makasih kunjungannya :)

bendol said...
 date:

not working for me....Look My SS
http://i42.tinypic.com/2w2roee.gif
its just say "Widget by Viemonsta - KBM"
anyone help?

news and entertaintment said...
 date:

bos say sudah menggunakan thema seo simple dari blog ini..thank ya....

dev said...
 date:

@bendol: please check your blog feed

@news and entertaintment: sama2 mas :)

awan.setya said...
 date:

sedang mencoba. mudah"an berhasil.. thengs ia infonya..

mkiosonline said...
 date:

dengan mendaftar ke directory,pengunjung akan bertambahf

Khairy1986 said...
 date:

Minta bantuan, mengapa footer saya lari dari lokasinya??

http://blogger-hot-templates.blogspot.com/

Fotobiru said...
 date:

Foto Bugil Artis Sexy Indonesia

loewyi said...
 date:

Makasih infonya mas.... salam... :D

[Admin]deNanut's said...
 date:

Helowwww Salam kenal, maen" yah ke web aku ^^~

www.denanuts.tk

dapatkan ilmu yang tidak kalian dapatkan di web manapun ^^~

Bundertown said...
 date:

salam kenal mas! mau tanya, kalo seandainya mau pake recent post spt diatas tp di blog lain gmn, ada hal yang harus di tambahin gak, soalnya pas saya simpan kode html di atas di blog lain, hasilnya jd gak keluar gambarnya, cuna gambar defaultnya aja? mohon pencerahannya !!
terima kasih.. ^^

dev said...
 date:

@Bundertown: ga ada yg dirubah mas..cukup URL homepage nya aja yg dirubah..

nurulhuda said...
 date:

makasih tas infonya....nice post ....
http://hudateknik.blogspot.com

rizal said...
 date:

makasi tas share ilmunya....
:)

Share With Irfan said...
 date:

Biar pas kalo dipasang di Simple SEO berarti width sidebarnya dirubah jadi 180 atau 200 Mas Dev ?

manchunian said...
 date:

thanks infonya gan, sukses slalu!!

cyberthief83 said...
 date:

Matur Nuwun ..... Mampir Nggih DI Yogyakarta ... Monggoooo...

abbaz said...
 date:

Saya sudah install template ini. Bgmn mengatur read more agar yag kelihatan hanya satu paragraf saja? kalo 3 paragraf kebanyakan soalnya. Kedua, bgmn cara membuat menuhorizontal yg warna ungu itu? kok di blog saya tidak ada. Trims.
abbaz

Newbiexpose said...
 date:

Terima kasih atas ilmunya gan, sukses selalu

Anonymous said...
 date:

TUTORIALNYA SANGAT BAGUS DAN MEMBANTU SAYA..TERIMA KASIH DEVBOOK..

Harun Ar said...
 date:

Terima kasih mas, matur nuwun......

Info Terbaru said...
 date:

bagus banget

Candra Andika said...
 date:

Makasih tipsnya..
Udah tak coba di blog saya tapi ga jalan, kenapa ya?
Ini blognya: http://manggisgarcia.blogspot.com?
Mohon solusi dan pencerahannya.. Mksh sblmnya.


leave comment
back to top
comment notes

Post a Comment

devbook.net