Add custom popular posts widget to blogspot blog - In one of my previous post we saw
how to add blogger's official popular posts widget to blogger which is a 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 the preview of this widget in screenshot below, after adding this
customized popular posts widget to your blog, it will look as same as you are seeing in screenshot but if you would like to change colors, fonts and border styles etc. then you are also enable 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 blog.
Also see : Add Stylish Most Commented Posts Widget to Blogger
Preview : - How to Add Custom Popular Posts Widget to Blogger?
Go to
Blogger Dashboard > Layout > Add a GadgetChoose "
Popular Posts" Widget from the list.
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, its time to customize that simple/official popular posts widget to a stylish one. In the next steps we going edit HTML of your blog. So, its good practice to backup your blogger template before processed.
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 !! :)