Animated Popular Posts

How to add Animated Popular Posts in blogger

Popular posts widget is used to show what is popular in our blog. Mostly it is calculated by views of the post. In blogger they are created this widget without any animated and it is look so simple. Now we have a solution for this issue. now we are going to animated this widget. Here we can add most number of post. One good thing is it never occupy more space. And it looks beautiful.

•  First step you sign in to ur blogger account.
• Then go to design–>Add a Gadget–> Popular Post . Add this popular post widgets
• To add Animated effect on this Gadget go to Design–>Add a Gadget–>Html JavaScript.
•  Then copy and paste below coding on that box.

<style type=”text/css” media=”screen”>
#PopularPosts1 { 
overflow:hidden; 
margin-top:5px; 
width:100%; 
padding:0px 0px; 
height:410px;
}
#PopularPosts1 ul { 
width:310px; 
overflow:hidden; 
list-style-type: none; 
padding: 0px 0px; 
margin:10px 0px 0px 10px; 
}
#PopularPosts1 li { 
width:290px; 
padding: 5px 5px; 
margin:0px 0px 5px 0px; 
list-style-type:none; 
float:none; 
height:80px; 
overflow: hidden; 
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjFULZGaqnlYX59qk_k3PR4nX04Mmh4h1BqNzvJvrwLI6vyeZbjBTc8o65JqY5Buza137sMLm9GghTI8vknaSBe-jNs2zB8eEEcZfP425pDzHDufuC1sPdTPGYbjU2Jl658oy9XzXJpZo/s400/popular+posts.jpg) repeat-x; 
border:1px solid #ddd; 
}
#PopularPosts1 li .item-title {
font-size:1em; 
margin-bottom:0.5em; 
}
#PopularPosts1 li .item-title a { 
text-decoration:none; 
color:#7CA2C4; 
font:bold 12px verdana; 
height:18px; 
overflow:hidden; 
margin:0px 0px; 
padding:0px 0px 2px 0px; 
}
#PopularPosts1 li img { 
float:left; 
margin-right:5px; 
background:#EFEFEF; 
border:2px solid #7CA2C4; 
}
#PopularPosts1 li .item-snippet { 
overflow:hidden; 
font-family:Tahoma,Arial,verdana, sans-serif; 
font-size:10px; 
color:#289728; 
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>

• Then Press save
• Finally you have to move this script before the popular Post widget like the below image shown.