There are some usefull 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 Popular
Post widget to your blog, but the default style of this widget that
blogger provides is very boring and not so attractive. So 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.
5. Now save this template and you are done.
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.
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 6. Check below article for detail information.
- Add Popular Post Widget To Your Blog
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 ?
]]></b:skin>4. Now paste below code just above the code you search in Step 3.
/*--- Mybloggersworld.blogspot.com Popular Posts --- */
.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;
}
5. Now save this template and you are done.
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.
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.
0 comments:
Post a Comment