Skip to main content

Customize Popular Post Widget

Customize Popular Post Widget

'Recent Posts' or 'Popular Posts' widget is very essential widget for every blog. It displays your popular blog posts (based upon some analytic statistics) along with image, title and description (obviously these are optional). By default blogger provides some styles for this widget but somehow these are obsolete and unprofessional. I've written few posts about customization of this widget. This post is also one of those customization using css3 transition property. The main reason for using css instead of javascript or jQurey is that it requires less time for loading of DOM. Also css properties are very easy to understand as well as to implement. Hope you'll like it.


Features

Controllable '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>
  9. /* --------- Popular Posts by Bloganalyzer ----------- */
    .PopularPosts .widget-content ul li {
      position: relative;
      padding: 0;
    }
    .PopularPosts .item-snippet {
      position: absolute;
      left: 20px;
      top: 100px;
      font-size: 15px;
      line-height: 1.2em;
      width: 230px;
      background-color: #ececec;
      padding: 7px;
      border-top: 2px solid #0009ca;
      z-index: 2;
      height: 4.5em;
      visibility: hidden;
      opacity: 0;
      transition: all 0.6s ease;
      -moz-transition: all 0.6s ease;
      -webkit-transition: all 0.6s ease;
      -o-transition: all 0.6s ease;
    }
    .PopularPosts .item-snippet:before {
      content: "";
      position: absolute;
      left: 10px;
      top: -8px;
      height: 0;
      width: 0;
      border-bottom: 7px solid #0009ca;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent
    }
    .PopularPosts .widget-content ul li:hover .item-snippet {
      top: 105%;
      opacity: 1;
      visibility: visible;
    }
    .PopularPosts .item-title {
      font-size: 20px;
      padding-left: 5px;
    }
  10. Click 'Save template'
If you have any questions on this, please let me know. Enjoy !

Comments