How To Add Rotating Popular Posts Widget (With Slide Effect) To Your Blogger

Friends, Now i share a beautiful popular post widget to your blogger. It make your blog more professional and also attract  visitors. This widget created by Abu Farhan. You can easy to add this widget on your site. Please follow this post and install it on your blog. Try it and enjoy…  

Go to Blogger account.

• Hit on Layout.

 

• Click Add a gadget option.

 

• Select Popular Posts Widget (provided by blogger) from given list.

 

• Keep post number greater than 4.

 

• Save your widget.

 

• Again click Add a gadget option

 

• Now select an HTML/Javascript option from given list

 

• Paste the following code inside it.

 

 

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

 

You can customize this widget.  Change highlighted RED color with your taste. ( If you don’t want any change in this widget, Copy this code without any change.)

Leave a comment ……………….If this widget is not working……………thanks