Tuesday, September 20, 2016
Customize Bloggers Official Popular Posts Widget
Customize Bloggers 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/AVvXsEjxkR3I5lTUJKhlBVT73FrbIRGSY6Bsdz-M4QH1NeKCD_VvKR98QYol-4ss8ulZdejW7xzeKDVzwKpr-WUQV1ZvWfriV3RjnEmhDI7Yi4qtn1C2CEbwCyepmCL6g7BjYrl18gukAatCBAg/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
Go to link download
alternative link download
