Cara Membuat Recent Post dengan Animasi di Blog

Salah satu cara untuk mempercantik sebuah blog adalah Membuat Recent Post dengan Animasi. Cara Membuat Widget Recent Post dengan Animasi di Blog ini tidak lah susah. Hanya membuatnya di widget saja.

 Tujuan Cara Membuat Widget Recent Post dengan Animasi di Blog hanya untuk mempercantik tampilan saja. Jadi terlihat indah di mata. Kalau mau tahu Cara Membuat Widget Recent Post dengan Animasi di Blog, yuk mari kita lihat hasilnya di samping kiri.

Inilah Cara Membuat Widget Recent Post dengan Animasi di Blog:
1. Seperti biasanya, anda harus membuka Akun Blog anda sendiri (pinjam boleh asal disetujui, heheheh)
2. Pilihlah Rancangan / Design pada Dasbor Blog Anda (seperti biasa juga nih)
3. Lalu tambahkan Widget (klik add widget / tambah gadget)
4. Pilih mode HTML/Javascript
5. Copy-lah script dibawah ini dan paste-lah pada kotak widget yang tadi anda tambahkan.

<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.blogspot.com/";
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://kumpulan-adsen.blogspot.com/2012/04/cara-membuat-widget-recent-post-dengan.html" target="_blank">get this widget here</a></small></center></div>

6. Simpan Widget dan simpan template blog anda.
7. Lihat Hasilnya.

Catatan :

• Untuk yang berwarna biru silahkan anda ganti dengan URL Blog anda. contoh: http://hendryhermawansoftware.blogspot.com/
• Untuk yang berwarna merah Silahkan kawan sesuaikan saja ukurannya yah. 

Selamat Mencoba. Semoga Bermanfaat :)