Add Popular Posts Widget With Rotating slides

Adding a popular post widget is very useful.users easily find some important post published on your blog.Rotating slides can easily get attention of the readers.It will increase the bounce rate of users.Let's see how to add it to your blog.


First log in to your blog account and go to design
Now click on add  gadget.
After that scroll down and select html/javascript

<style type="text/css" media="screen">
#PopularPosts1 { 
overflow:hidden; 
margin-top:5px; 
width:100%; 
padding:0px 0px; 
height:310px;

}
#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/AVvXsEhGLVJs1shW9r_FBRhUi6luKVAzC5Z59F2LjjGgPiRXlFsjkoAWn2aR1FKup-q8LiHEywRVFrtPK6n1yjQkZadsD-Qlk6IehwHUy9LBOaOTPAY9QoaPTseh35Rg3Jskf4Ubhpk1Mr8lkA8/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>

Now save it.Now take look at your blog.You have done it.


Don't forget to stumble this

Posted in: Blogging