Stylish Custom Popular Post Widget For Blogger:Digital Tech Inspiration

Blogger allows us to easily add a "Popular Posts" widget, which we select from its list of gadgets, and we can do that by going to the "Layout" of our blog.

I will provide you step by step procedure and method for how to add a stylish custom popular post widget in blogger templates.

Add the gadget, if you haven't done it yet!

1. Select the "Layout" tab and add the "Popular Posts" gadget in that part of your blog you want to appear, such as in your sidebar, by clicking on "Add a Gadget".

2. Configure the widget to show only the post titles. You can do this by clicking on the "image thumbnail" and "snippet" checkboxes, as shown in the following image.

3. After configuring the widget, save the changes by clicking on Save, and then Save arrangement.

Styling popular posts widget to blogger

STEP #1: Go to your blogger dashboard.

STEP #2: Select Template option.

STEP #3: Select Edit HTML.

STEP #4: In the template code find (ctrl + f) for ]]></b:skin>

STEP #5: Just above it paste the following CSS

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:25px;

}

#PopularPosts1 li{ /* Styles of each element */

width:100%;

position:relative;

left:0;

margin:0 0 6px 10px;

padding:4px 5px;

}

#PopularPosts1 ul li:before{ /* Style of the numbers */

content:counter(li);

counter-increment:li;

position:absolute;

top:3px;

left:-39px;

font-size:21px;

width:28px;

height:28px;

border-radius: 50%;

color:#000; /* Text color */

-webkit-border-radius: 999em;

-moz-border-radius: 999em;

border-radius: 999em;

border: 2px solid #ddd;

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

padding:0;

text-indent:9px;

}

#PopularPosts1 ul li a{

display:block;

position:relative;

left:-45px;

width:100%;

margin:0;

min-height:28px;

padding: 5px 3px 3px 39px;

color:#333; /* color of the links */

text-decoration:none;

font: 11px/150% "Arial" Georgia,Times,serif;

letter-spacing: 1px;

}

#PopularPosts1 ul li a:hover{

text-decoration: underline;

color: black;

}

STEP #6: Now click on Save template and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.