There are some useful and must have widgets which can help you to increase traffic to your blog and keep your visitors engaged on your blog. Facebook Like Box, Twitter Follow Button and Popular post widget are some of those widget. I had previously posted on Adding Label and Categories Cloud on your Blog, In this tutorial i will teach you to add and style popular post widget using CSS. After styling the widget it will look more stylish and more attractice as you can see on the left. You can even customize this further to match your blog template. So lets get started customizing blogger popular post widget.
Adding Popular Post Widget To Blog
1. Go to Blogger Dashboard > Layout > Add Gadget and choose Popular Post Widget.2. Now set this setting as shown below.
3. You may change number of post to show upto 10 but dont make it below
Styling Popular Post Widget With CSS
1. After Adding Popular Post widget to your blog. Go to Blogger Dashboard and choose Template.2. Now Backup your Template to be safe if you mess something up. Check below tutorial if you dont know how to do that.
How To Backup Blogger Template ?
3. After Template been selected click on Edit HTML and search for below code.
]]></b:skin>4. Now paste below code just above the code you search in Step 3.
/*--- Mybloggertutorials.blogspot.com Popular Posts --- */5. Now save this template and you are done.
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #6BB5FF;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;}.popular-posts ul li:hover {
border:1px solid #009900;
}.popular-posts ul li a:hover {
text-decoration:none;
}
Further Customizing The Widget
If you follow above steps correctly then you have install and style popular post widget on your blog.This part is completely optional. So if the border of the widget does not match your blog template or you want some different color then change the setting shown below.6BB5FF - Change this to change the border color at static mode.
009900 - Change this to change border color on hover effect.
Need Help?
If you have any question or suggestion or come across a problem while implementing this widget then leave a comment below i will be glad to help you out.
About Author
Subscribe via email
Receive Quality Tutorials Straight in your Inbox by submitting your Email ID below.
How To Add Stylish Popular Post Widget In Blogger
4/
5
Anonymous
If you like our post or have any suggestion or got stuck at any step implementing the widget to your blog then leave a comment below i will be glad to help you out.