Widget Recent Post Animasi

Home Page atau halaman beranda merupakan bagian dari laman blog yang selalu kita jadikan patokan untuk memberikan penilaian terhadap indah tidaknya suatu blog. Ada yang memperindah Home Page blog dengan memasang widget kalender, widget jam digital, widget hewan piaraan atau widget animasi. Tidak jarang juga blog yang memasang widget Chat Box atau widget SMS Gratis. Tidak bisa dipungkiri, widget-widget yang saya sebutkan tadi memang menambah keindahan blog kita, akan tetapi widget tersebut sesungguhnya dapat memperlambat loading blog kita.

Karena alasan di atas, saya pun menyiapkan sobat blogger sebuah widget yang sangat bermamfaat dan akan memperindah blog sobat blogger. Widget yang saya maksudkan adalah widget recent post thumbnail. Widget ini sering di sebut degan nama Animated Recent Post atau Recent Post bergambar yang bergerak. Penasaran dengan Widget ini? Lihat saja tampilannya di bawah ini :

Cara buat Recent Post Animasi di blog :

• Masuk di akun blogger.com

• Dari menu Drop Down --> Layout --> Add a Gadget ---> HTML/JavaScript

• Masukkan kode berikut pada kolom yang tersedia :

#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://lenterablogger.blogspot.com/" target="_blank">Get this widget here</a></small>

• Simpan.

Perhatikan kode yang warna merah di atas!

1. background-color:#ffffff; adalah warna background dari kode tersebut. Untuk menggantinya,lihat kode warna disini.

1. var numposts = 5; adalah jumlah post yang akan ditampilkan

Kalau sobat blogger tidak meletakkan gambar dalam postingan atau artikel sobat, maka gambar dari widget tersebut akan menampilkan X. Jadi, setiap menulis postingan, usahakan menggunakan gambar. 

<style type="text/css">

By : Cutt Iswahyuni