Thursday, August 25, 2011

Cara Membuat Widget Recent Post Dengan Thumbnail

















Cara Membuat Widget Recent Post Dengan Thumbnail
Widget Recent Post atau artikel terbaru umumnya
ditempatkan diposisi sidebar. Sedangkan jenis widget recent post menurut
sepengetahuan saya hanya ada 2, yaitu widget
recent post dengan thumbnail
yang statis/diam  (tidak bergerak) dan ada juga widget recent post dengan slide show/bergerak
(model tayangan). Nah yang mau kita bahas pada tips blogging kali ini adalah membuat widget recent post yang statis tapi
ada gambar/thumbnailnya seperti yang ada di sidebar blog ini, biar ngga
susah-susah nyari contohnya he he. Cara
membuatnya mudah
saja koq, silahkan sobat ikuti langkah-langkahnya dibawah
ini.





Cara Membuat Widget Recent Post dengan Thumbnail :


1.      
Login ke dashboard blogger anda.


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


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>




4.      
Simpan dan lihat hasilnya.


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





Mudah saja bukan cara membuat widget recent post dengan thumbnail ini ? Kalo masih kesulitan juga silahkan tulis
dikomentar OK ! Selamat mencoba dan salam blogger.





No comments:

Post a Comment