18/11/11

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..

4 ulasan:

Razif Mokji berkata...

boleh nak tanya ....kalau nak kaler lain nk ubah yang mane yer.... cth kaler oren

Razif Mokji berkata...

maaf tuan banyak tanya pulak saya ni...org baru dlm dunia blogging ni, kalau nk buat untuk blog list pula mcm mana ye

Polskahackrew berkata...

Razif Mokji :

cara tukar background sy dah update..

untuk buat bloglist senang saja.. pergi ke desbot--design--ada gadget.. kemudian pilih bloglist..

lepas tu klik Add a blog to your list

dan masukkan url blog atau masukkan blog dari senarai blog yang anda folow(lagi senang)..

boleh atau tidak nnti bagi tau.. lalala.. jgn segan utk bertanya

selamat berblogging

Cikgu Kalsom berkata...

Cikgu chom
Blok anda sangat bermanfaat untuk saya yang baru nak mula blogging. Sebab saya suka menghias blog. tqvm

entri ja

Related Posts Plugin for WordPress, Blogger...