Cara membuat Popular Post Dengan Animasi

Cara membuat Popular Post Dengan Animasi ini daya Gw dapat dari seorang teman. dan sekarang Gw mau coba baut ngeposting di sini Gw harap bisa berguna bagi para awam seperti Gw.
Tujuan dari Cara membuat Popular Post Dengan Animasi ini untuk menghiyasi tampilan Popular Post agar lebih menarik di lihat. untuk contoh hasil nya kalian bisa lihat di tampilan Popular Post Gw ini



Ok daripada Gw ngebacot terus mendingan langsung aja kita peraktek lo ikutin aja langkah - langkah di bawah ini:
1.Pastinya lo mesti login ke Blospot dulu
2.Lalu masuk ke Dashboard dan Pilih Design - Page Elements
3.Buatlah dua Gadget (Add Gadget) yang pertama untuk "Popular Posts" yang kedua untuk "HTML/Javascript". Jika sebelumnya sudah ada Popular Posts berarti hanya bikin satu Gadge saja
 4.Masukan code dibawah ini ke Gadget "HTML/Javascript"

<style type="text/css" media="screen">

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
   
}

#PopularPosts1 ul {
width:320px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
 width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

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

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;   
}

#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script> 

 kalian bisa merubah ukuron bok yg di dalam nya degan mengedit bagian yg berwarna merah

5.Simpan dan lihat hasilnya

selamat mencoba