Auto-Numbering Popular Posts Widget for Blogger

Popular post widgets are terribly very helpful for blogging. As a result, it attracts the visitors.Recently, I added up New Attractive CSS Sliding Popular Posts Widget for Blogger.  By attracting the users the blog traffic are accrued. Today I’m here to share New Numbered Popular Post device for blogger. And this device was first employed by MyBloggerTricks. This device is makeup-ed with CSS3. Lets add this impact to blogger by following my straightforward instruction given bellow.

 Popular post widgets are terribly very helpful for blogging. As a result, it attracts the visitors. Recently, I added up New Attractive CSS Sliding Popular Posts Widget for Blogger.  By attracting the users the blog traffic are accrued. Today I'm here to share New Numbered Popular Post device for blogger. And this device was first employed by MyBloggerTricks. This device is makeup-ed with CSS3. Lets add this impact to blogger by following my straightforward instruction given bellow.     Also read this :  New Awe-Inspiring Related Post Widget for Blogger  While not the assistance of JavaScript this popular post widget was created. I already mentioned that popular posts plugins is a good tool to extend your blog's traffic further as page views. With the assistance of popular post widget you'll be able to get a lot of internal traffic for your blog. Adding Numbered Popular Posts Widget  First Go to Blogger >> Layout Hit "Add a Gadget" >> And Choose "Popular Posts"  In that new page you need to un-check the "image thumbnail" and also "snippet"  Choose your number of post to be published. Then Save it ! Then again Go To Blogger >> Template It is better to backup your template before making any changes in your blog. Then Hit "Edit HTML" Now search for </b:skin> by using shortcut keys. Once you finished searching it paste the following code given bellow just above </b:skin>  /*--- Numbered Popular Posts --- */  .popular-posts ul {  padding-left: 0px;  counter-reset: popcount;  } .popular-posts ul li:before {  list-style-type: none;  margin-right: 15px;  padding: 0.3em 0.6em;  counter-increment: popcount;  content: counter(popcount);  font-size: 16px;  background: #292D30;  color: #ffffff;  position: relative;  font-weight: bold;  font-family: georgia;  float: left;  border: 2px solid #dddddd;  box-shadow: 1px 2px 9px #666666; } .popular-posts ul li {  border-bottom: 1px dashed #dddddd;  } .popular-posts ul li:hover {  border-bottom: 1px dashed #696969;  } .popular-posts ul li a {  text-decoration:none; color:#5A5F63;  } .popular-posts ul li a:hover {  text-decoration:none;  } That's it ! Now Save your template Enjoy ! Still you get in Trouble ! Just comment Below we will fix your problems :)  Have a nice day ! Happy Blogging !

Also read this :  New Awe-Inspiring Related Post Widget for Blogger

While not the assistance of JavaScript this popular post widget was created. I already mentioned that popular posts plugins is a good tool to extend your blog’s traffic further as page views. With the assistance of popular post widget you’ll be able to get a lot of internal traffic for your blog.

Adding Numbered Popular Posts Widget

  • First Go to Blogger >> Layout
  • Hit “Add a Gadget” >> And Choose “Popular Posts” 
  • In that new page you need to un-check the “image thumbnail” and also “snippet” 
  • Choose your number of post to be published.
  • Then Save it !
  • Then again Go To Blogger >> Template
  • It is better to backup your template before making any changes in your blog.
  • Then hit “Edit HTML
  • Now search for </b:skin> by using shortcut keys.
  • Once you finished searching it paste the following code given bellow just above </b:skin>

/*— Auto-Numbered Popular Posts — */ .popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

  • That’s it ! Now Save your template
  • Enjoy !
Still you get in Trouble ! Just comment Below we will fix your problems 🙂 Have a nice day ! Happy Blogging !
Script source : My Blogger Tricks
About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.