Cara Membuat Widget Recent Post dengan Animasi di Blog

AB | Cara Membuat Widget 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. Kawan-kawan tinggal menyalin saja script yang AB pajang nanti di bawah.

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 (klik spoilernya) dan paste-lah pada kotak widget yang tadi anda tambahkan.

Klik Spoiler Berikut:

<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://kumpulan-adsen.blogspot.com/
• Untuk yang berwarna merah Silahkan kawan sesuaikan saja ukurannya yah.

Itulah Cara Membuat Widget Recent Post dengan Animasi di Blog. Gampang bukan, Selamat mencoba, by the way... itu dulu... ntar disambung lagi yah... heheh. Jangan lupa tuh kolom komentar masih kosong... di isiin yah kawan-kawan... heheh. Salam Blogger. Kumpulan Adsen Blogspot.