How To Customize Blogger's Popular Posts Widget

How To Customize Blogger's Popular Posts Widget

In this tutorial we would learn how we would be able to customize an official blogger popular post to a different simple and beautiful popular post. Sometimes some bloggers do not often seem to realize the different between a popular post and a recent post, they do think that both are the same but it is not. As the name suggests, popular post show the most viewed post on your blog whiles the recent post shows the new post articles published on your blog or website. Like i said early on, we would learn how to customize it. 
First of all you need to know that you must have it on your site already before even trying to modify it.

To add it
Go to your blogger layout page and add a Gadget, select popular post widget and save your layout. this is the very first step into customizing it. follow the steps below if you are confused !!!!

 This is how it would look like

Adding Popular Posts Widget To Blogger

  1. Go To Blogger > Design Layout.
  2. Click  add a gadget and select the Popular Posts gadget from the list of provided options.
  3. You can choose to make any changes based on your preference.But don't neglect the setting made below....

  • Set Most viewed to all time
  • Uncheck image Thumbnail and snippet.
  • You can display post between 1 to 10 posts. But recommend 7 posts
  • You can save your widget now.....

Step 2
Go back to your blogger Edit HTML. Never forget to back up your HTML because any can happen and if does you would be able to recover your Template
Locate this code in your HTML  Use CTRL + F to find it


Paste the code below  just above or before it

/*--- MBT Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url( 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;

.popular-posts ul li:hover {
border:1px solid #6BB5FF;

.popular-posts ul li a:hover {


You can make the foolowing changes to customize the default look:
  • To change the bullet image replace the image link in bolded black in the code above with your bullet URL.
  • To change the border color in active mode edit #dddddd
  • To change the border color on mouse hover edit  #6BB5FF

2 Type

  1. Search for </b:skin>. 
  Paste the following Styles just above the </b:skin> code

    /*--- MBT Popular Posts --- */
    .popular-posts ul {
    padding-left: 0px;
    counter-reset: popcount;

    .popular-posts ul li:before {
    list-style-type: none;
    margin-right: 15px;
    padding: 0.3em 0.6em;
    counter-increment: popcount;
    content: counter(popcount);
    font-size: 16px;
    background: #292D30;
    color: #ffffff;
    position: relative;
    font-weight: bold;
    font-family: georgia;
    float: left;
    border: 2px solid #dddddd;
    box-shadow: 1px 2px 9px #666666; }

    .popular-posts ul li {
    border-bottom: 1px dashed #dddddd;

    .popular-posts ul li:hover {
    border-bottom: 1px dashed #696969;

    .popular-posts ul li a {
    text-decoration:none; color:#5A5F63;

    .popular-posts ul li a:hover {

Note all credits goes to MBT

0 default, disqus:

Post a Comment