Cara Membuat Widget Recent Post dengan Slider

Cara Membuat Widget Recent Post dengan Slider - 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.

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 :

• Widget Artikel Populer Berdasarkan Jumlah Komentar
• Pasang Widget Tombol Share FB, Buzz,Twitter, dll 
• Cara Membuat Text Alert Script / Kata Penutup Muncul Saat Keluar Blog

Jangan asal copy paste! baca aturannya disini
Post By Kang Salman
www.kucoba.com

Ingin mendapat penghasilan tambahan? Cara kerja mudah hanya dengan melakukan survey dan mengisi angket lalu anda akan di bayar. Itulah pekerjaan anda disini <= klik untuk daftar dan memanen uang $ seperti saya. Gratis

Dapatkan update artikel  terbaru kami langsung ke email anda.