Home » » Cara Membuat Widget Recent Post Bergerak Dengan Gambar Thumbnail di Blog

Cara Membuat Widget Recent Post Bergerak Dengan Gambar Thumbnail di Blog

Anda punya blog dan ingin memasang widget recent post yang bisa bergerak? Ditambah lagi dengan gambar thumbnail? Nah, sekarang anda berada di tempat yang tepat teman. Silahkan anda copy dan pastekan kode yang saya kasihkan dibawah ke dalam widget blog anda. Mungkin untuk tutorialnya anda sendiri sudah tau kan cara menambahkan widget baru pada blog? Tapi kalau belum, monggo ikuti langkah - langkahnya berikut ini :
  1. Anda masuk ke akun blog anda
  2. Pilih menu "Tata Letak"
  3. Klik "Tambahkan Gadget", lalu pilih "HTML/JavaScript"
  4. Kemudian anda copy dan paste kode dibawah kedalam kolom widget "HTML/JavaScript" tersebut
  5. Yang terakhir klik "Simpan"
  6. Selesai, coba anda lihat hasilnya
Kode Widget Recent Post Bergerak Dengan Gambar Thumbnail
<center><style type="text/css">
#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 0px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:4px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:12px;font-weight:normal !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:12px;padding:0px;border:solid 1px #999;width:95px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://lirik-dulu.googlecode.com/files/Slide%20Down%20Recent%20Post.js.txt" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 500;
var pause = 3000;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 7;
var numchars = 0;
</script> <script src="http://lirikdulu.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script> </ul>
</center>

Perhatikan !
Ganti URL blog yang saya kasih warna merah dengan URL blog anda.
Bila sudah benar, maka hasilnya akan terlihat seperti yang ada pada gambar dibawah ini


Selamat mencoba ya :)

0 komentar:

Add me on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS
notifikasi
close