How to Add Popular Post Widget with Numbering

PLACE YOUR CODE HERE

Add Stylish and Beautifull Popular Posts widget/ gadget to your. Blogspot is a free platform introduced by google. many bloggers choose Blogspot as a free platfor as it is really very easy to use. I will be sharing more blogger Tutorial soon In sha Allah. This are very easy to add. You don't need to Add a widget to your blog/website. You need to add a effect. which will make your popular post section look different from others, with auto numbering . It will number beside the posts.


i will show you a very easiest way to add this below effects.

At first add Popular post widget,
By going to Blogger dashboard>Layout>Popular Posts
If you have added before, no need to add again.

• Now go to Dashboard>Template>EditHtml and search for 

]]></b:skin>

• Now Paste the below code just above ]]></b:skin> , and then hit save.

/*--- MBT 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; }

• Customization : You can easily change the colour of the Square bubble by changing this #292D30
• You can change the text colour of the bubble by changing  #ffffff
• 
  

THAT'S ALL.


Let me know how was the tutorial, Comment below. And share this post.

Courtesy Mybloggertricks

PLACE YOUR CODE HERE