Add Scrolling Popular Posts Widget To Blogger

Popular post widget is one of the most important widget for blogger. Its increase the engagement of the visitors with your site. It helps you to increase your site's pageviews. By default blogger has a popular posts widget. But this is a simple widget. As result it can create very low attraction on your visitors.

If you make a simple change in this default Blogger popular post widget then it will be more attractive and effective. Today I am gonna share a simple code, which will turn the Blogger popular posts widget into Scrolling popular posts widget. As result this this widget will be more attractive and also will increase the page view of your site.

Adding Scrolling Popular Posts Widget to Blogger:

First You need to Add the Blogger Popular Post Widget in your Blog.

Log Into your Blogger Account and go to Dashboard.
Then click on Layout.
Then click on Add a Gadget and you will get a gadget list.
Here in this gadget list Select Popular Posts and then click Save button.

Now Turning this Widget to Scrolling Popular Posts Widget.

Now again go to Layout and click on Add a Gadget.
Then from the gadget list Select HTML/Javascript.
Now Paste the below code in the Content Box and then click Save button.

}
#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/AVvXsEgf2OvmSMXOxXJH7g4u-W70tS1LSZo7uBjF5O5ZJH67NjNmA929Y4lXUWkMZGDJ8x7jXq_g_vpq5QKYZnIiyuCY4pgIR0NXxpISZvDvoPaIYd8XlZnCkxmzt0xIlIU9AYNsBxqB6EZ74AY/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 go to Layout and keep the two widgets together. Place HTML/Javascript widget on the Popular Posts widget as shown in the below image.

Note: If you want to show Image thumbnail and Snippet on this scrolling popular posts widget then you will have to show it from Blogger Popular Posts widget.

That's it. Now visit your blog and see Popular posts Widget is scrolling.

Stay with www.iTTimesbd.com for more IT related Post

Pages

Wednesday, July 23, 2014

Add Scrolling Popular Posts Widget To Blogger

2 comments: