Scrolling Popular Posts With Thumbnails Widget For blogger

Tweet

Scrolling Popular Posts Widget With Thumbnails For blogger:

Scrolling Popular Posts images with some Description and Title is a very Nice way to make your Blog Look stylish as well as user friendly for the user's to pick up a Post and Read!
it also make your blogspot look stylish.
when the images are scrolling it also gives a nice way to attract users to let see it. and more chances for the users to pick up from it their liking post. make your blog better and look professional.
i personally recommend to all blogspot owners.
one feature of this widget is also that it don't reserve more space in your blogspot site.
if you are using the default traditional popular post then it look boring and do not attract the users to let have a time on it.
Another feature of this widget is that it increase the duration of visitors on your blog or on a site.
so feel free to watch demo and decide to add it to your site.

How To Add to Blogger:

Step-1: Go Your Blogger Layout and Add Gadget then Select Popular posts. 

Step-2: Copy the Below Code and Paste it in a Gadget, Html/Javascript.

<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>

Step-3: Now Look the Below Screen Shot and Make your Popular posts and Html/javascript code arranged like this

Step-4(optional):

This Step is optional and use as trouble shooting. if your popular posts are not scrolling then do this step, otherwise ignore it.

Add the Below code just before </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Please Share it! :)