Widget Recent Post Animasi dengan JQuery

Merupakan salah satu dari Widget Recent Post untuk Animasi Blog. Yang akan saya coba sedikit untuk menjabarkan dihalaman ini. Widget ini sendiri menggunakan effect animasi SPY karena menggunakan script JQuery juga yang dilengkapi dengan thumnail dan caption. Merupakan sebuah karya kecil pengembangan dari Bloger Indonesia Abu Farhan.
Nah berikut prosedure tutorialnya.


1. Langsung dari halaman familiar aja, yaitu Deign / rancangan. (mutlak login 1st)
2. Pada Page Element klik Add Gadget untuk menambah Kolom HTML/JavaScript
3. Copy script berikut, dan Paste pada kolom konten.

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

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:260px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#000000 url(http://i290.photobucket.com/albums/ll241/aQbi/Blog/h2.gif) repeat-x;
border:1px solid #000000;
}

#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:#000000;
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://i290.photobucket.com/albums/ll241/aQbi/icon/Smile.jpg";
imgr[1] = "http://i290.photobucket.com/albums/ll241/aQbi/icon/Smile.jpg";
imgr[2] = "http://i290.photobucket.com/albums/ll241/aQbi/icon/Smile.jpg";
imgr[3] = "http://i290.photobucket.com/albums/ll241/aQbi/icon/Smile.jpg";
imgr[4] = "http://i290.photobucket.com/albums/ll241/aQbi/icon/Smile.jpg";

showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";

showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.aqua-small.co.cc/";
limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

4. Klik Simpan. dan Klik simpan untuk buttom Design.
Cukup simple bukan !

Catatan :
* Untuk text yang berwarna Merah adalah URL Blog Masing - masing.
* Dan utnuk texr berwarna Kuning adalah URL Image default versi Saya, Sobat bisa sesuaikan dengan URL Keinginan. Dan kode lainnya masih bisa Sobat Modifikasi lagi seperti Background Image, Lebar & tinggi tumbnail, lebar caption etc.


.