Tutorial cara buat recent post dengan gambar Green Puff Edition

Tutorial cara buat recent post bergambar kali ni ialah versi green puff..

Cara pasang widget ni mudah saja..sama seperti widgett lain..tidak perlu edit apa2..

Mula2 pergi ke desbot---desaign---ada gadget---HTML / javascript..copy code di bawah kemudian save...

<center><style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;background:#B3FFE0;
border:5px dashed #00E68A;-moz-border-radius: 50px 50px; border-radius: 21px 21px; -moz-box-shadow: 0px 0px 80px #00E68A; -webkit-box-shadow: 0px 0px 80px #00E68A;padding:6px 10px 14px 5px;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#00E68A;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#7d7d7d;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}
</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://javasriptcode.googlecode.com/files/rpplusimgnt-v1.0.js.txt"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 55;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt"></script>
</ul></center>
<span style="color:#fff; font-size: small;"><a href="http://blogger-blog-tutorial.blogspot.com/2011/11/tutorial-cara-buat-recent-post-dengan_18.html" target="_blank">Get This Widget</a></span>

Live demo...lebar widget mengikut lebar section..jika anda letak widget tu pada sidebar widget tu xkan jadi lebar seperti di bawah ni..live demo ni lebar sebab dia ikut lebar entri..

Get This Widget

UPDATE : untuk mengubah warna background,shadow dan border.. pada area baris atas code tu sila lihat code yang sama seperti code di bawah,,..

tukar code warna pada code yang di highlight

#rp_plus_img{height:212px;overflow:hidden;background:
#B3FFE0;
border:5px dashed
#00E68A;-moz-border-radius: 50px 50px; border-radius: 21px 21px; -moz-box-shadow: 0px 0px 80px #00E68A; -webkit-box-shadow: 0px 0px 80px #00E68A;padding:6px 10px 14px 5px;}


code warna rujuk sini
Rujuk sini

Sekian..