Create A Stylish Rolling Grid Effect For Popular Posts In Blogger

Popular post is one of many important features you need for your blog. The most read posts are displayed to let visitors know about other interesting posts or topics they might like. This will let visitors stay on your blog longer.

This widget will create a nice rolling effect everytime you hover your mouse on the post preview.

Please follow the below steps carefully to create this rolling widget : 

Adding A Popular Post widget

• Log in to your blogger account and go to LAYOUT.
• Click "Add Widget" (A pop up window will open)
• Choose "Popular Post" from the list.

• Save your Popular Post widget before taking the next steps (Put the widget anywhere you want in the header, right sidebar or in the footer section). 

Customise the widget's appearance and effect from HTML template editor

1. Now go to TEMPLATE > EDIT HTML > PROCEED
2. Check the "Expand Widget Templates".
3. Use the “Ctrl+F” search function, Find this code :  

 ]]>

1. Copy and paste the below codes BEFORE it :

    /*Popular Post*/
    .popular-posts{margin-left:15px;}
    .popular-posts .item-thumbnail{float:left;}
    .popular-posts ul{padding-left:0px;margin-left:4px;margin-top:6px;}
    .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}
    .popular-posts ul li img {-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
    .popular-posts ul li img:hover {-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px violet, inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px violet, inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px violet, inset 0 0 20px rgba(255,255,255,1);}

• Use the “Ctrl+F” search function again to find this code : 

.......................
.......................
.......................
.......................
.......................

• Replace the above codes from  to 

 with these codes :

   
   
   
   

   
   

   
   

   

   
   
• 
     
     
     
     
     
     
     
     
     
  
     
     
     
     
  
     
  
     
     
  
     
     
     
     
     
  
     

  
     
     
     
     
     
     
     
     

  
     
  
     
     
     
  
     
     

  
     
     
     
     

  
     
     

  
     
     
     
     

  
     

  
     
     

  
     
  
     
  
     
  
     
     

   
   

   

   
   

•  Save your template for changes to take effect.