Pin It

Widgets

Tutorial : Cara Membuat Widget Recent Post Dengan Thumbnail

on Sunday, 27 May 2012


Cara Membuat Widget Recent Post Dengan Thumbnail

Tutorial : Cara Membuat Widget Recent Post Dengan Thumbnail

Widget Recent Post atau artikel terbaru umumnya ditempatkan diposisi sidebar. Sedangkan jenis widget recent post menurut pengetahuan saya hanya ada 2, yaitu widget recent post dengan thumbnail yang tidak bergerak dan ada juga widget recent post dengan slide show/bergerak (model tayangan). .

Cara Membuat Widget Recent Post dengan Thumbnail :

Langkah 1
Login ke dashboard blogger anda.

Langkah 2
Pilih Rancangan > Elemen Halaman > Add Gadget (HTML/JavaScript).

Langkah 3
Copy kode CSS dan JavaScript dibawah ini dan paste pada gadget yang baru dibuat tadi.

<right><style>img.recent_thumb{padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:40px;border:0;float:left;margin:0 0 5px 0px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:15px;font-color:black;font-family:calibri;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs normal {font-size:13px;} </style> <script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script> <script style="text/javascript"> var numposts = 8; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></right>
Langkah 4
Simpan dan lihat hasilnya.

Langkah 5
Silahkan memodifikasi sendiri script ini untuk merubah ukuran gambar/thumbnail, jenis dan warna huruf serta jumlah posting yang ingin ditampilkan pada widget.

Selamat mencoba dan salam blogger.

Ranking: 5

{ 2 ulasan... read them below or add one }

[sutera kasih] said...

btw, thanks share link :)


28 May 2012 at 12:57 Reply To This Comment
mardewan said...

tq.. dah buat da..


23 September 2012 at 13:03 Reply To This Comment

Post a Comment

Terima kasih kerana memberi komen. Sila datang kembali ya !

Kami akan cuba membalas komen anda secepat yang mungkin.

 
© BLOG BUDAK BAEK All Rights Reserved