How to Add Moving Popular Posts in Blogger

Wants to add a moving popular post in your Blogger? The trick is very simple but it will create a nice impression of your blog. Most probably you already noticed my popluar posts are moving. If you are interested to add  the same type of moving popular posts widget to  your blogger then this post is for you. The process is very simple. Just follow the simple step.

Go to your Blogger's Dashboard  >> Select layout >> Add a Gadget : Popular Posts ( select more then 4 posts) >> Again Add a Gadget : HTML/Java Script >> Paste the code in java Script Gadget  (given Below). Save the Arrangement. This is it. As simple is that.Your Java Script code is given below.

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

#PopularPosts1 {

 overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:400px;

   

}

#PopularPosts1 ul {

width:220px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#PopularPosts1 li {

 width:208px;

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>