How to Add Custom Popular Posts Widget to Blogger | Blogger Widget Generators

How to Add Custom Popular Posts Widget to Blogger | Blogger Widget Generators

Add custom popular posts widget to Blogspot blog – In one of my previous posts we saw how to add blogger’s official popular posts widget to blogger which is simple and none attractive to the different blogger templates and this is why here I am going to show how you can add customized popular posts widget to your bog. As you can see in the preview of this widget in the screenshot below, after adding this customized popular posts widget to your blog, it will look as same as you are seeing in the screenshot but if you would like to change colors, fonts, and border styles, etc. then you are also unable to make these changes by editing into the CSS code that will be provided here. So, let’s move to the tutorial of adding custom popular posts widget to Blogspot blogs.

Preview : –

How To Add Custom Popular Posts Widget To Blogger

  1. Go to Blogger Dashboard > Layout > Add a Gadget
  2. Choose “Popular Posts” Widget from the list.
  3. Configure box of popular posts will be open, Configure the settings as you like and finally, Click “Save”.

As soon as you click on the save button, it will be saved to the layout. Now, it’s time to customize that simple/official popular posts widget to a stylish one. In the next steps, we going to edit the HTML of your blog. So, it’s good practice to backup your blogger template before processed.

Related Posts

From your blogger dashboard navigate to Template > Edit HTML then search for  ]]></b:skin> tag. (Learn more how to add CSS code in blogger template) Paste the following CSS code just above the ]]></b:skin> tag.

.PopularPosts h2{
padding-right:.4em;
padding-left:1em
}
.popular-posts ul {  padding-left: 0;
  counter-reset: trackit;/*setting counter-reset*/
 }
.popular-posts ul li { 
border-bottom: 1px solid #ffffff; 
list-style: none outside none !important; 
margin-left: 0 !important; 
overflow: hidden; 
padding: 10px 0 !important; 
transition: all 0.25s linear 0s;
counter-increment: trackit;/*setting counter-increment*/
  }
.PopularPosts ul li:before{
content: counters(trackit, ".");
padding: 0 .1em 0 0;
font-size: 20px;
font-weight: bold;
color: #ffffff;
float:left;
margin-right:10px;
} /* creates counter before lists */

.PopularPosts li:first-child{
border-top:1px solid #000000
}

.PopularPosts li:nth-child(even)
{background:#0099ff
}/*define background color for even number lists*/

.PopularPosts li:nth-child(odd)
{background:#000000
}/* define background for odd number lists */

.PopularPosts .item-thumbnail {display: true!important}, .PopularPosts .item-snippet { 
display: true!important}/* Hides Thumbnail and Snippet */

.PopularPosts a, .PopularPosts a:hover{
color:#ffffff;
font-size:.9rem
}
#PopularPosts1 li{
padding-right: 1em !important;
padding-left: 1em !important;
}
.widget.PopularPosts{padding:1.2em 0em !important}

Finally, Save Template and You’re done ! See your blog, Now you should have a customized popular posts widget in your blog.

Drop your comments and questions below !! 🙂

How to Add Custom Popular Posts Widget to Blogger | Blogger Widget Generators

Related Posts

Scroll to Top