 |
| How to dress up your popular post widget in blog with CSS |
How to customize popular post on our blogger blog???
It looks not stylish so here we will see how to dress up this in simple steps.
This will change your fonts and colors and boarder also. And this will not effect on your page speed. Because we are using popular post given by the blogger itself. We are only styling our popular post widget using the cascaded style sheet.
Go to Dashboard >> Design - Edit HTML >> Expand Widget Template
Use (CTRL + F) to find this code:
Now add below css code to above the code :
For the change of border color in mouse hover mode change #6BB5FF.
1.
Go to Dashboard >> Design - Edit HTML >> Expand Widget Template
2.
Use (CTRL + F) to find this code:
]]></b:skin>
Now add below css code to above the code :
/*--- Careerandtricks.com Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;}.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}.popular-posts ul li a:hover {
text-decoration:none;
}
Customization:
For the change of border color in static mode change #dddddd.For the change of border color in mouse hover mode change #6BB5FF.
