Selasa, Agustus 02, 2011
Administrator
Sedikit variasi pada widget recent post. Kali ini kita menambahkan effek Slider pada Widget recent post. Dan bila anda sering berblogwalking pasti pernah melihatnya kan? maaf kang salman tidak membuat blog demo kali ini.
Berikut langkah-langkahnya :
Langkah 2
Nah sobat informasi maya, bagaimana keren tidak? kalau keren semoga widget recent post with slider ini bermanfaat ya...
Lihat Juga :
| ilustrasi |
Berikut langkah-langkahnya :
- Masuk ke blogger
- Buka Design/Rancangan
- Pilih Edit HTML
- Centang pada Expand Widget Template
- Cari kode ]]></b:skin> (Gunakan Ctrl+F)
- Masukkan kode berikut ini di atas kode ]]></b:skin>
<script>
function split_date(d){
var da = d.split(' ');
day = "<strong class='day'>"+da[0]+"</strong>";
month = "<strong class='month'>"+da[1].slice(0,3)+"</strong>";
document.write(day+month);
}
</script>
<link href='http://www.blogger.com/static/v1/widgets/119427095-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
<!-- Jquery library -->
<script src='http://www.google.com/jsapi?autoload=%7B%22modules%22+%3A+%5B%7B%22name%22+%3A+%22jquery%22%2C%22version%22+%3A+%221.4.2%22%7D%5D%7D' type='text/javascript'></script>
<!-- End Jquery library -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
- Simpan Template
Langkah 2
- Lalu, Pilih rancangan,
- Pilih Add A Gadget >> Javascript/HTML
- Masukkan kode berikut ke dalamnya,
<style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;border:solid 0px #585858;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:#FFF;}
#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:#DEDEDE;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://sodiycxacun.googlecode.com/files/rpplusimgnt-v1.js"></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 = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
- Simpan dan lihatlah hasilnya
Nah sobat informasi maya, bagaimana keren tidak? kalau keren semoga widget recent post with slider ini bermanfaat ya...
Lihat Juga :
