How To Add Numbered Popular Posts Widgets For Blogger


If your business or personal blog running through Blogger as a platform, and you’re planned to personalize it and make it with your own ideas. means This is a way to do it, you’ll make your blog pages are highlighted in unique and eye-catching from the other blogs on the internet. You’ll also get the attention of your target audiences, encourage them to browse more through your blog posts and make them become your daily readers and also your followers. by adding the popular post widget.

there are many ways to customize your free blog in Blogger, and one of the methods is to personalize your Popular Posts widget. if you’re not added this yet? Don’t worry it easy to add in your do that follow the below steps or if you already added to your blog means skip the below step.

How To

How To Add Numbered Popular Posts Widgets For Blogger

Step 1.

First to do that go to the Blogger website, after login to your Blogger Dashboard, then click the “Template” section refer to the image below and then hit the “Edit HTML” button.

Step 2. Click Back Up and restore button to back up your current blogger template before the changes you make. it is only for the safety purpose it is most recommended.

Step 3. After loading the HTML section of the blogger Click anywhere on the HTML code area and the, press the CTRL + F keyboard keys to Open the search box. Inside the HTML code.

Step 4. Copy the following text and past it into the search box and hit enter to find the text.


Step 5. Copy the following text and past it in Just above the </head> tag.

Note: If your blog has Popular Posts widget is the footer section, remove the .sidebar class in the above CSS code, in order to make it work. most of the styles are using the ‘Oswald’ font, you need to add to your template’s code.

READ ALSO  How to Add the Popular Posts Widget for Blogger

search for this tag:


and add the below code just below the above code:

<link href=',700' 
rel='stylesheet' type='text/css'/>
Adding the JavaScript code

the widget also requires a script in order to trim the post title and snippet and resize the image or thumbnail of the post

To add the JavaScript code,

search for the </body> tag and paste the following code just above the </body> tag :

<script src='//'/>
<script type='text/javascript'>
$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-
nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$
(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).
replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each
(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).
Note 2:
if your blog template has already the jQuery library, in above code just remove the line in red. and After that added all the remaining codes in before the following tag,

and just click the “Save theme” button to save the changes. That’s it!


Please read the above guide thoroughly to get the good result. If you have any queries feel free to contact us or comment below. We hope the above article is very much helpful to you if you like this article the share with your friends. Please fill out the email subscription to our new articles direct to your email inbox, and follow us on social media to get instant post updates to you.

Facebook    :       Twitter        :                                          Google +     :                      YouTube      : Pinterest     :                                          Instagram   :

READ ALSO  How to create a blog at | Easy Steps For Beginners 2018


Please enter your comment!
Please enter your name here