Beautiful Popular Posts Numbering Widget For Blogger

By | June 14, 2013
popular posts widget for bloggerPopular posts on blogger is being always displayed with the default style by Blogger, and it also being displayed with different styles in custom blogger templates. However, it is very easy to customize popular posts widget in Blogger, just you need to target it’s random ID which is automatically created by Blogger when you add a popular posts widget from your Layout page. We have already published a tutorial on how to customize popular posts in blogger. But today’s tutorial is more advance than that, because I’ve a customized colored widget for you which will make your popular posts super beautiful. This widget was created by someone else, but I’ve customized it and fixed its bugs, now it will be working fine on all blogger templates including the custom ones. Just let’s start how to add it to blogger. After adding this widget to your blog, the popular posts on your blog will be looking exactly like you can see on my blog.

How to Add Popular Posts Widget to Blogger?

The steps are very easy and straightforward, and You’ll do it within seconds. Just follow the given steps in order to add this new widget to your blog.

  • Go to Blogger Dashboard
  • Template >> New HTML Editor
  • Now find </b:skin> tag which holds all your CSS styles [see the image below]
If you are not familiar with New Blogger HTML page, then just see the above picture for where to find the </b:skin> tag, when you found that <b:skin>…</b:skin> just click the arrow at left side and all the css styles will be expanded. Now just copy below code and paste before </b:skin>:

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, ‘Times New Roman’, Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 10px 0px -5px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; }
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:”8″}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:”9″}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:”10″}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:”6″}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:”7″}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:”5″}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:”4″}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:”3″}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:”2″}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:”1″}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px;}
#PopularPosts1 img {
border-radius:200px;
width:60px; height:60px;
margin-left:4px;
}

Just save to ur template and you are all done, view your blog for seeing a beautiful popular posts widget in the sidebar. If you haven’t added the popular posts widget then first add it and select 5 posts show.
Cheers & Enjoy, if you faced any problem then let me know by commenting on this post. Take Care.

7 thoughts on “Beautiful Popular Posts Numbering Widget For Blogger

  1. Adeelkml

    Really nice article.Wali can we use the same or similar post widget in wordpress? please mention any plugin which can do the job.

    Reply
  2. Wali Khan

    @AdeelKML,
    Unfortunately brother, we can’t use this on WordPress, however, there are some plugins in WordPress similarly to this widget, which you can use to make the popular posts beautiful. You can search for Yoardi plugin or yardi plugin, also just search popular posts in WP plugins library so you’ll find a lot of nice plugins for this thing.

    Reply
  3. sohail akram

    sir where to paste code? i am unable to understand. me on that line where as shown in above picture. u hv stated paste the code before: before what?????

    Reply

Speak Your Mind