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

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Official Blog Of ZAS-XP.com di inbox anda: