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 :
<style type="text/css">
#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!
- background-color:#ffffff; adalah warna background dari kode tersebut. Untuk menggantinya,lihat kode warna disini.
- 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.
