The Yaj Computers Portal

Post Top Ad

Post Top Ad

Tuesday, July 7, 2015

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.

                                          No comments:

                                          Post a Comment

                                          You May Like to Read:

                                          You May Like to Read:

                                          Follow by Email

                                          Popular Posts