--> Customize Blogger's Official Popular Posts Widget | Experience Lab - Online business creation and development guide for bloggers and startups

Customize Blogger's Official Popular Posts Widget

I rarely use a tool unless I know I can design it according to my preferences. Blogger Team introduced their official Popular Post widget ...

Popular posts widget

I rarely use a tool unless I know I can design it according to my preferences. Blogger Team introduced their official Popular Post widget which could display a snippet of your most viewed posts along with a thumbnail image based on your Analytics stats. But wait! the widget today is a step ahead of it. We will override the stylesheet for this widget completely with our custom fonts and colours. You can view this popular gadget right on our sidebar.

The biggest advantage of this widget is that we don't need to install any heavy Javascript because we are using a widget stored on Blogger's servers and we will just alter its look to make it blend perfectly with your blogspot blogs.

I hope you will find today's tutorial pretty interesting. So lets go playing!


Adding Popular Posts Widget To Blogger

  1. Go To Blogger > Design
  2. Click on add a gadget and select the "Popular Posts" gadget from the list provided by blogger
  3. Now make these settings

uncheck snippets and thumbnails

  • Set Most viewed to all time
  • Uncheck image Thumbnail and snippet. We only need to display popular links so we don't need that bulky image and unnecessary intro text.
  • You can display between 1 to 10 posts. So choose at least 7 posts.

       4.   Save your widget

       5.    Now go to Blogger > Design > Edit HTML

       6.   Backup your template

       7.   Search for this


       8.    Just above it paste the following CSS code,

/*--- MBT Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;


.popular-posts ul li:hover {
border:1px solid #6BB5FF;

.popular-posts ul li a:hover {


Make these changes to customize the default look:

  • To change the bullet image replace the image link in bolded black in the code above with your bullet URL.
  • To change the border color in active mode edit #dddddd
  • To change the border color on mouse hover edit  #6BB5FF

You can use our color Chart for changing the colors.

   9.    Finally save your widget and say bingo!

Visit your blogs to see it hanging just fine on your sidebar. Do let me know if you needed any further help in changing the font type or color. The widget will automatically apply to it default colors of your blog but in case you wish to change them to something different then feel free to let me know by posting your comments below.


This widget model is brought to you by MBT therefore if you liked this widget and wish to share it with your readers then kindly link back to this tutorial. Peace buddies. :)

You may also like: Popular Posts Widget With Rotating Slides



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: Customize Blogger's Official Popular Posts Widget
Customize Blogger's Official Popular Posts Widget
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy