How to Dress Up your Popular Post widget in Blog with css

blogger tips blogger widgets
career+and+tricks

dress up popular post widget

Today we will see how to customize a popular post widget in blogger blog. When we will enable our popular post widget in our blog. Than 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. You can see this in my right side bar as well. So see the simple steps below for that.






Steps to customize popular post widget:

Step 1: Go to blogger dashboard>>>Add a widget>>click on Popular post >>>And do the settings as shown below.

popular post,popular post settings


Now check most viewed on all time.

Set display up until to 7 to 10 posts.

Uncheck the image thumbnail and snippet.

Step 2: Now save your widget.

Step 3: Now go to blogger dashboard>>>>template tab>>>>edit template.

Step 4: Now you must backup your template.

Step 5: Now search for below code.

]]>

Step 6: Now add below css code to above the code you search in step 5.

/*— 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.

Step 7: Now just save your template.

Enjoy the widget and do let me know if you want any further help. If you like this than please subscribe my blog. And get all new updates from my blog in your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge