Adding Popular Posts Rotating Slides Widget

Hi Blogger Tutorials friends! Today I want to share with you how you can Add Rotating Popular Posts Widget (With Slide Effect). I thought of sharing this great slideshow widget with all of you. It is extremely easy to install this widget on blogger. You only need to paste the code inside a HTML/Javascript widget. This new script works on all major browsers and can easily be customized.

Note: No thumbnail images will appear if you have not added any image in your posts. Posts which are viewed most will be picked by blogger stats widget and displayed through this new gadget.

1. Go To Blogger > Design 
2. Click add a gadget 
3. Choose Popular Posts Widget provided by blogger 
4. Keep post number greater than 4

(If you already have this gadget skip this step)

• After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
• Put all script bellow to the “Content” of HTML/Javascript Gadget

• Done

Code

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

Make Changes To Colors and Fonts

Not all of you uses a white background for your blogs and some of you may wish to have complete control over the appearance of the widget. I am listing below important areas which you can edit to let the widget perfectly blend your template.

• To Change Widget container height editheight:310px;
• To change the small rectangles width edit width:310px
• To change width of the text snippet then edit width:290px;. Keep this width20px smaller than the rectangles width. For example in this widget I have kept rectangles width=310px; and snippet width=290px;
• To change link title color and font size edit color:#7CA2C4; font:bold 12px verdana;

• To change thumbnail image's border colour and size edit border:2px solid #7CA2C4
• To change the snippet text's font size, family and colour then edit the yellow highlighted code

What if your template background colour is black or dark?

In such a case replace the following code,

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghTXOWIXhcjbvs8uWAU68P3nvuppdfND8nssXSG2FnOb53mm3K7_08Tbjks99u4xVg1pdtO50lXmlESJsBS1_DFsxqKkB9XZYGtm_Qf4S111Ec2U8fNV4YY_oaLFs1Uyq6ElADiYxjqKw/s400/popular+posts.jpg) repeat-x;

with this,

background:#ffffff;

Demo: View my Popular Posts
I hope my post can be useful for you. Thanks for visit my blog-Blogger Tutorials
You might also like
Change Facebook Theme, Color & Appearance
Get XLM sitemaps in 4 simple steps