Wednesday 20 March 2013
Customize Blogger's Official Popular Posts Widget
JavaScript always increase page load time and also increase bounce rate of your blog. And also we are using widget stored in blogger server and we just alter its look and shape to make it blend with your BlogSpot.
I hope you will find today tutorial pretty
interesting. Always write a comment to shear your suggestion. So now let’s go to plying with these beautiful widgets.
interesting. Always write a comment to shear your suggestion. So now let’s go to plying with these beautiful widgets.
Adding popular post widget in to your blog!
- Log in to your blogger account.
- Click on blog title in which you want to add This Popular Post widget.
- Go to layout and then click on "Popular Post" gadget from the list provided
- Now make these settings
Now Hit save. and search for
]]></b:skin>
- Just above it paste the following code.
/*** KH Popular Post ***/
.popular-posts { margin: 10px 0px 5px 0px;}
.popular-posts ul{padding-left:0px;
font: normal 13px Arial, Tahoma, Verdana;}
.popular-posts ul li {background: #fff
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYoTHJYMPfrqWgBmDlGu6rgxyUc5rH2-2lJ6N79b2F7Kyg3a9FPSRTZx4eYOiheq2aNpiTDdR26gqXXl_Sy5khrsCJUZwE6tZpNN48kGiSX5WOclNE8R6Mf29NfupL5AdVRKvudzFjwog/s1600/kutebkhana.png)
no-repeat 2px;
list-style-type: none;
margin: 0 0 5px 0px;
padding: 5px 5px 5px 30px !important;
border: 1px solid #007D47;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.popular-posts ul li:hover {
border:1px solid #80FEC8;
}
.popular-posts ul li a:hover {
text-decoration:none; }
Customization!
- To change the bullet image replace the image link in Red in the code above with your bullet URL.
- To change the border colors in active mode edit #007D47
- To change the border colors on mouse hover edit #80FEC8
Use Our Hex Color Code Generator For Choose Color
Shakeel Asghar 
Posted By: Shakeel Asghar
Shakeel Asghar is the owner and founder of kutebkhana.blogspot.com. I love to blogging, Design Blogger template, Web Developing and Designing.i like to learn and share tips with you.
|
|
|
|
Get Free Email Updates Daily! |
Follow us! 
|
Subscribe to:
Post Comments (Atom)
I'm 
3 Responses to “Customize Blogger's Official Popular Posts Widget”
13 April 2013 at 21:17
@ Rohen Mod
welcome buddy keep visiting keep in touch!
27 April 2013 at 21:24
@ rishab panchal
thanks for your beautiful comment keep in touch.
12 May 2013 at 21:59
Nice thing.....i modified my blog looking Awesome really..
http://onlinesoftweb.blogspot.com/
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. If you have a problem check first the comments, maybe you will find the solution there.
Regards,
Shakeel Asghar