How to add a custom popular posts widget in blogger
Recommended widgets:
- Add link to me widget for backlinks.
- Add Feedburner email subscription widget.
- Add all in one social network widget.
How to add a custom popular posts widget in blogger
Part-I
Add default popular posts widget:
- Login in to your Blogger account.
Navigate to the layout section and click on add a gadget from sidebar.
Choose popular posts widget from the gadgets list.
You will be asked to make some adjustments for your popular posts widget, as
shown below:
You can choose what to display and how. Like if you don’t want to display the
post snippet, you can simply uncheck that.
After making the important adjustments, click on add and save the arrangement.
This will add a default blogger popular posts widget in your blog.
Click on view blog to check the default blogger popular posts widget.- You have just added built-in popular posts widget in your
blog. Now we will customize its CSS styles to make it more attractive.
Part-II
Customize popular posts widget
- Navigate to the template section and take backup of your blogger blog.
After taking backup click on edit HTML and find the code ]]/b:skin
using CTRL+F.
Now carefully paste the following code just before the code.
/*UT Popular posts Widget Style Rules*/
.popular-posts ul{padding-left:0px;}
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
Click on save template and then view blog.