Customize Popular Post Widget

'Recent Posts' or 'Popular Posts' widget displays your popular blog posts (based upon some analytic statistics) along with image, title and description (although these are optional). It is undoubtedly very essential widget for every blog. I've written quite a few posts about customization of this widget. This post is also one of those. Here some css3 properties like transition, transform, backface-visibility, transform-style etc. are used. You can also use css3 perspective property, but right now this property is not supported in all browser. The main reason for using css instead of javascript or jQurey is that it requires less time for DOM loading. Also css properties are very easy to understand as well as to implement. Hope you'll enjoy it.

Features

You can control over 'Image thumbnail'. Although it is recommended not to check 'Image thumbnail' for the better view (and performance) of this widget.

Screenshot

Popular posts widget screenshot

Before you make any changes, it is recommended to backup your blog template in case anything goes wrong. It is just a cautionary statement. Don’t get scared. Just stay serious.

Let's proceed. If your blog already has this widget, jump to step #7 after step #1.

1. Go to 'Blogger' dashboard.
2. Click the drop-down arrow adjacent to 'Go to post list' icon and select 'Layout' form the drop-down menu list.
   
3. Click 'Add a Gadget' link as shown in the fig below. A new window will appear that contains list of all available gadgets.
   
4. Scroll down and click on 'Popular Posts' gadget or the '+' icon close to 'Popular Posts' gadget.
   
   

   Add Popular posts widget
5. Configure 'Popular Posts' widget as follows.
   
   • Select the 'Most viewed' option to 'All time'.
   • Select number of the post(s) in 'Display up to' section.
   • Check 'snippet' but uncheck 'image thumbnail'. This is important.
   

   Configure Popular posts widget
6. Click 'Save'.
7. Click 'Template' from left navigation menu and then click 'Edit HTML'.
   
8. Search for (Ctrl+f) </b:skin> and paste the following before </b:skin>

/* ------ Popular Post widget by Bloganalyzer ------- */
#PopularPosts1 li {
  font-size:25px;
  height:3em;
}
li .item-content {
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  transform-style:preserve-3d;
  position:relative;
}
li .item-title, li .item-snippet {
  position:absolute;

  -webkit-transition:-webkit-transform 1s ease-in-out;
  -moz-transition:-moz-transform 1s ease-in-out;
  -o-transition:-o-transform 1s ease-in-out;
  -ms-transition:-ms-transform 1s ease-in-out;
  transition:transform 1s ease-in-out;

  -ms-backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  backface-visibility:hidden;
}
li:hover .item-title { 
  text-align:left;

  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  transform:rotateY(180deg);    
}
li .item-snippet { 
  text-align:justify;
  font-size:16px;
  -webkit-transform:rotateY(-180deg);
  -moz-transform:rotateY(-180deg);
  -o-transform:rotateY(-180deg);
  -ms-transform:rotateY(-180deg);
  transform:rotateY(-180deg);
}
li:hover .item-snippet {    
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  -o-transform:rotateY(0deg);
  -ms-transform:rotateY(0deg);
  transform:rotateY(0deg);
}

9. Click 'Save template'

If you have any questions on this, please let me know. Enjoy !