Cara Memasang Recent Post Slide Jquery

Assalamualaikum

Kali ini saya mau post tentang blog tutorial,yaitu cara memasang recent post slide seperti di bagian bawah blog ini. biasanya recent post hanya menapilkan link judul atau dengan Thumbnail image... Namun sekarang saya akan memberikan yang sedikit berbeda yaitu recent post dengan Thumbnail image tapi slide show bisa naik turun,stelah saya cari2 di mbah google, akhirnya saya dapat juga tutorialnya yang saya dapat dari teman saya yang satu ini.karena banyak dari teman saya yang menanyakan bagaimana cara memasang widget tersebut, terpaksa saya mempost nya...langsung aja ke tutorialnya ya..



Langkah Pertama:

1. Login ke akun Blogger Anda
2. Klik Rancangan/Tata Letak
3. Klik Edit HTML
4. Back up template Anda dahulu Klik Download Full Template
5. Klik Expand Widget Templates
6. Letakan kode berikut tepat 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>

7. Lalu simpanlah Template anda/Save Template

Langkah Ke dua:

1. Klik Page Elements/Elemen Laman
2. Klik Add gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :


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


5. Klik Save

Selesai.... Cukup mudah bukan... dan lihat hasilnya...
Artikel Terkait:

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di www.arda.web.id