Membuat Recent Post dengan Animasi

Pada kali ini saya mencoba berbagi suatu cara mempercantik blog Anda dengan membuat Recent Post dengan Animasi seperti blog saya di sidebar ini.

Kebetulan saya mendapatkan cara ini dari sesama blogger dan saya akan berbagi kembali untuk rekan blogger yang berminat untuk menggunakan-nya.

Caranya begitu mudah, Anda tinggal mengikuti langkah - langkah yang saya uraikan dibawah ini :

1. Buka Akun Blog milik Anda

2. Pilih Tata Letak pada Dashbor Blog Anda.

3. Klik Tambah Gadget.

4. Pilih HTML/JavaCript.

5. Copy Paste Script dibawah ini.

Recent Post Animasi :

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:299px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:270px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language="javascript">
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://NamaBlogAnda/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src="https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js" type="text/javascript">
</script></div>
<small><a href="http://baltazar-artikel.blogspot.com/2012/12/membuat-recent-post-dengan-animasi.html" target="_blank">widget here</a></small></center></div>

6. Simpan hasilnya yang sudah di Copy Paste tadi.

7. Lihat hasilnya.

Catatan :

- Ganti yang berwarna Merah dengan ukuran masing - masing gadget Anda.
- Untuk yang berwarna Biru, ganti dengan nama URL/Nama Blog  Anda.

Oke ..... Mudah bukan cara buatnya. Semoga bermanfaat untuk Anda.

Salam.