How To Customize Blogger's Popular Post Widget

If you're reading this, you're probably not a 'code warrior'.  You're probably like me.  You can't just sit down and pound out page after page of ampersands, brackets and ampersands. You're more of a tweaker.
     That doesn't mean you can't usually get the results you want from a template.  It just means that sometimes you have to search for helpful websites to give you some guidance. Something sort of 'specific' in context, but 'general' in terms of offering the solution. That's what this is.  It's a way to change the way your 'Most Popular Post" module in Google's Blogger application appears on your page.  This is how you can do that.

Why Change The Popular Post Widget?

Currently the widget's choices of formatting is limited to the title, how popular in what number of days, whether you show an image and a snippet of information about the posts, number of posts, and how many of the posts you want to display.  That may not be enough selection for you.  You might want your Popular posts to stand out a little more.  

Add the Widget

1. Go To Blogger > Design
2. Add a gadget and select "Popular Posts"  from the list provided by blogger
3. Select how many, when, and whether you want images and snippets. 
4. Save your configured widget
5. Go to Blogger, then click Design, then click Edit HTML
6. On the top right hand side, click the button to backup your template, then click proceed. 
7. Hold down the Control Key and hit "F" key to bring up a 'Search' bos.  Search for this
   ]]></b:skin>
8. Once  you find that code, put your mouse right above it and paste the following CSS code,
   /*--- SWS  --- */
   .popular-posts ul{padding-left:0px;}
   .popular-posts ul li {background: #FBF6CE ;
   list-style-type: none;
   margin:0 0 5px 0px;
   padding:5px 5px 5px 20px !important;
   border: 2px solid #46A5E5;
   border-radius:10px;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   }
   .popular-posts ul li:hover {
   border:2px solid #A1C436;
   }
   .popular-posts ul li a:hover {
   text-decoration:none;
   }
9. To change the widget to YOUR preference you can do this to customize the default look:
   To change the active mode border color, change #46A5E5
   To change the mouse over border color, change  #A1C436
   To Change the background INSIDE the module, change #FBF6CE
10. Save your widget and you should have a new look!

That's It! You Should Have Better Looking Popular Post Now

I used this to change mine to the format you see on the right of this page. Please leave a comment below if you find this helpful. If not, leave a comment and let me know why.  And be sure to 'Add Me' to your circles on Google+ to!  I'd love to hear from you. Thanks for stopping by!