HackingUniversity - Hacks . Tricks . How-To's

13 August 2013

Awesome CSS Styled Popular Post Widget for Blogger Blogs

popular-post-widgetBlogger by default provides you with the popular post widget that you can use and display all your popular post's without installing any additional scripts or anything. It provides every option to be customized at the functions level but not at the designing level, so today we are going to see how you can style out popular post widget and make it much more awesome. Well I even posted the random post widget earlier you can use that too instead of popular post or you can use post of them so they will surely fetch you some more views.

Well as you can see in the image on the right I am providing you my own widget, so currently I am using this same widget on my blog you can see on the right. So I have just removed the image option from popular post widget as it looks good without images.

  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.

    .popular-posts{background: #f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1))}.popular-posts ul{border: 1px solid #aaa;font-family: cambria;font-size: 12pt;margin: -20px 0;padding: 0}.popular-posts ul li{background: url(http://i.imgur.com/d2qDDPf.png) no-repeat 0 -64px;border-bottom: 1px solid #ccc;height: 44px;line-height: 1.5em;list-style-type: none;margin: 0;overflow: hidden;padding: 6px 10px 10px 3em !important}

  3. Now hit Save Template.
  4. popular-post-settings-bloggerNow navigate to Blogger > Layout > Add Gadget. and Add Popular Post Widget.
  5. Now make sure your popular post settings are like in the image on the right.
  6. Make it Last 7 days that will show best post viewed from last 7 days period.
  7. Now uncheck image thumbnail option and snippet option, as it will look without these things.
  8. Now you can also choose the display upto 7 posts option or you go for the 10 post that's your will.

That's it now your popular post widget is up and running just check out if the design is working great or not, hope you like this styled widget have fun and do share.