Change The Format Of 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.  Currently the widget's choices of formatting are 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.  This is how you can do that.

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!

You're All Done!

I used this to change mine from the image you see in the top of this post, 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 cirlces on Google+ to!  I'd love to hear from you. Thanks for stopping by!

Other sites managed by Stan Bush (Me) are Georgiawebs | GeorgiaWebs Hosting | Sales Training And Networking | Northside Eagles .You can also find me on Google +Find us on Google+
Post a Comment

The 411 On S.T.A.N.


Stan Bush's (Me) passions are marketing, music, research, reading, writing and listening. I provide various consulting services, as well as hands on implementation for proof of concept. I began writing Surfin With Stan in 1994 and was published in various Knight-Ridder newspapers. I am self employed. Sales Training And Networking on Google+