Add scrollbar to Blog Popular Posts widget

Add scrollbar to Blog Popular Posts widget

0
data:blog.title
Popular posts

We know blog popular post always occupied a large space on your blog template.  There are many widget has created to squeeze the popular post widget for saving the space. Because we use this widget on blog sidebar for this reason blogger often fall in problem to display ads or add some other widget in blog sidebar. Because we know that this is a very important place where visitors easily destruct their eye there. So I am going to share a trick where we can add a scrollbar in Popular post widget to save space from blog sidebar. Though I have share before that how we can add scrollbar to any widget but in case of popular post widget is little bit different because we know that Popular post widget is integrated by Google blog. So let's proceed to the tutorial for adding scrollbar into Popular post widget.


Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "Popular Posts" Widget.



Uncheck snippet. Because we will display popular Post's image Thumbnail. And if you want to display only text then Uncheck image Thumbnail also. And choose 10 posts.





Step 4 Now Save the  "Popular Posts" Gadget.
Step 5 Click on -> Template -> Edit HTML

Step 6 Now Find this code ]]></b:skin>  by pressing  Ctrl + F


Step 7 Paste the below code  Before/above ]]></b:skin> 


#PopularPosts1 .widget-content{
height:250px;
overflow:auto;
}

Step 8 Now Hit the Save button.

Customization

  • Change 250px for adjusting the popular post widget height
Hope now you would be able to Add scrollbar to Blog Popular Posts widget
Add scrollbar to Blog Popular Posts widget
4 Stars stars - "Add scrollbar to Blog Popular Posts widget" We know blog popular post always occupied a large space on your blog template.  There are many...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *