Auto Scrolling Popular Post Blogger Widget

Scrolling Popular Post Gadget/Widget For Blogger

Popular post widget as one of the best blogger gadget can be changed from its default design to a customized one like the auto scrolling popular post blogger widget which slides your most read post up and down. A basic widget which you'll see on most sites you visit  is the popular post blogger widget, mainly because attracts readers who are inquisitive in knowing why that particular post is popular or that it might be really relevant to have such high page views. This blogger widget can reduce the bounce rate of your blog and increase your blog's pageviews.

Also Read:    Popular Post Blogger Widget With Hover Effect

                    Link to This Post Widget' to Blogger 
                    IP Widget For Blogger

One major problem with blogger gadgets/widgets is finding the right location on the blog to place them which will get the attention of as many readers as possible that visit the blog. With this auto Scrolling Popular Post widget, you'll be sure that your blog readers will be easily attracted because of the scrolling effect.

Also Read:  Related Posts Widget For Blogger / Blogspot with jQuery
                    Square Popular Posts Blogger Widget with Rotating Effect 
                    Sliding Recent Posts Widget For Blogger

How to Add Scrolling Popular Post Gadget For Blogger


  • From your blogger dashboard, goto 'layout'
  • Select 'add a gadget' depending on where you want to place it on your blog
  • Select on 'html/javascript'
  • Copy the code below and paste in the text field.



<!----Start copy here---->
<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(http://4.bp.blogspot.com/-AexFsTTa33c/TmFNoxg9zSI/AAAAAAAAE6I/7K8bPKYBr8Q/s400/popular%2Bposts.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><div style="float:   left;">
<a href="http://techlass.com/2014/10/scrolling-popular-post-gadget-for.html" target="_blank"><sup> Widget </sup></a></div>
<!----Stop copy here---->

  • Save the gadget.



Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:


HTML Link Code:

BB (forum) link code:

Comments

  1. This totally magnificent. I have searching for this widget for a long time. Finally i've gotten it, what a nice widget. Just added it on my blog. Cheer!!

    ReplyDelete

Post a Comment

Please share your views on this topic with Grace Joseph by leaving a comment.