Membuat Recent Post Bergerak di Blog

Hallo sobat. Tutorial blog kali ini saya akan membahas tentang bagaimana membuat "recent post bergerak" di blog kamu. Banyak sekali cara untuk membuat ini, tapi ini adalah cara yang saya gunakan untuk blog saya. Tampilannya lumayan keren dan gak ketinggalan jaman deh, oke banget pokoknya.

Penasaran? Ikutin ya langkah-langkahnya.

1. masuk ke Tata Letak atau Layout.
2. Tambahkan Gadget.
3. cari HTML/JavaScript.
4. masukan kode di bawah ini...
5. Lalu save.

<div style="margin-bottom: 15px;">

<style type="text/css">

#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}

#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:70px;padding:1px;list-style:none;}

#rp_plus_img a{color:#3366ff;}

#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}

#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}

#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>

<script type="text/javascript">

var speed = 400;

var pause = 3500;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

<ul id="rp_plus_img">

<script style="text/javascript">

var numposts = 20;

var numchars = 60;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

</ul>

</div>

Keterangan :

1. kode yang warna Hijau adalah kecepatan untuk berpindahnya post ke post lain,, jika perlu kamu bisa ubah kecepatannya..
2. kode yang warna Pink adalah waktu berhentinya post/di pause.. bisa di ubah juga jika perlu..
3. kode yang warna Orange adalah jumlah post yang akan di tampilkan di recent post. Kamu bisa mengubahnya sesuka hati.

nanti hasilnya akan seperti ini..

Background dari "recent post" ini transparan, jika pada screenshot yang saya berikan itu berwarna coklat gelap, itu karena background blog saya coklat, jika background blog kamu berwarna putih maka background "recent post" itu juga akan mengikuti warna background blog kamu. :)

Semoga bermanfaat :)