Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Widgets » Animated Grid Style Popular Posts Widget For Blogger

Animated Grid Style Popular Posts Widget For Blogger

to attract viewers is the first and top priority in blogging that is helpful to increase your pageviews and revenue also. From the best SEO Technique of a good and well stranded blogger. He will do anything for the sake of good targeted visitors,viewers and subscribers. When a visitor comes on your blog according to a general survey he will first see the template design then the sidebar of your blog and wishes to see any awesome widget and then the font and in last in the bottom revenue section. Most of the users and bloggers place popular posts in there blog side bar that is awesome. If you have placed it in footer section then you are loosing a huge traffic that will be a cause of low ranking and also low revenue. For better response place it on the sidebar just under two or three widgets it will put a great impact on your posts.

So after adding PopularPost widget in your side bar it will automatically increase your pageviews, ranking ans also help to decrease bounce rate. Generally when anybody visits any blog he/she read the desired first further see the popular posts widget that what kind of quality posts the author is boosting high on this blog.

Here we just upgrade the popular posts widget in grid style and a rotational effect via CSS3. It is already installed approx on every top blog and look more stunning and attractive and can raise your popularity of some old and mostly visited posts. So without any further delay, jut have a look on features and upgrade your popular post widget into grid style now.


1.) Pure CSS Code Added With Little CSS3.
2.) No J-Query Or External JavaScript Added.
3.) Not Any Third Party Widget.
4.) Just A Upgrade To Blogger Official PopularPost Gadget.
5.) Max 9 Post Added.
6.) Can Control From When To Show.
7.) All Official PopularPost Function Working.
8.) Can Get The Default One Without Any Extra Works.
9.) Quick To Load And Easy To Add Code.
10.) Can Increase Your Page Views.
11.) Will Help You To Decrease Bounce Rate.
12.) Simply Better For SEO And Also Helpful To Visitor.
13.) Rotation Image CSS3 Added.
14.) Attractive And Awesome Style.
15.) Grid View Widget Converted Code.
16.) Can Save Your Extra WebSpace.
17.) No Post Name And Description Will Be Visible.
18.) Post Title Will Be Visible On Hover Or MouseOver.
19.) Fully Customizable And Can Also Add Extra CSS Codes.
20.) Automatically Will BE Adjusted With Your Existing Template..

How To Add In Blogspot?

1.) Go To Your
2.) Open Your Desire Blog.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “Popular Post
6.) Click “+” Icon To Add It.
7.) Now Add Your Desired Setting But Must Check On “image thumbnail” And Remove Check From “snippet” And Display “9” Post As Shown In The Red Box Of The Below Pic…
8.) Click “Save“.

PopularPost In Grid Style Config

9.) Now Go To “Template“.
10.) Click “Edit HTML“.
11.) Now Click Within Code Box.
12.) Press [CTRL+F] To Search The Below Code.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>...</b:widget>

13.) Now Copy The Below Code And Paste It Instead Of The Above Full Code.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' src='' expr:width='data:thumbnailSize'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

14.) Now Again Press [CTRL+F] To Search ]]></b:skin> Code.
15.) Now Copy The Below Code And Paste It Before The Above Code.

/* Popular Posts
----------------------------------------------- */
.PopularPosts { height: 360px;}
.PopularPosts .item-thumbnail{float:left;margin-left:5px;}
.PopularPosts ul{padding-left:5px;}
.PopularPosts ul li {list-style-image: none;list-style-type: none;display:inline;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}

16.) Now Click “Save” And Done.

Reverting Back To The Old One:

If you are not satisfied by the way it looks, then revert it back. To be back with old style just remove the Popular Posts widget from the layout page hen add it back again. Also remove the CSS which you added in your template. That’s it. Stay blessed and happy blogging…

You Like It, Please Share This Recipe With Your Friends Using...

13 Responses to “Animated Grid Style Popular Posts Widget For Blogger”

  1. Its working, but Post thumbnails are not showing, its blank. I have even checked Show Post thumbnails in Popular Post Widget in layout.
    You can also check here, how its appearing in this image:

    Please tell a solution :), I really want this widget

  2. Gaurav kUMAR says:

    thanks for sharing for good post.

  3. Nice one

    here is vidoe you can easy understand

  4. Hi! I love this grid style, however; something went wrong. My widget is still trying to show list style (dots at the left side) and the images are not in a 3×3 square, only 2 images side by side. Can you help? My site is here

    • I see its quite late in your time zone, I’m going to revert it back and perhaps keep looking for something different. I suspect there’s list styling somewhere in my css code that is overriding the popularposts styling but I couldn’t find it. So if you view my blog its most likely going to have some different code for the popular posts. I do thank you for this work though!

    • EXEIdeas says:

      Please Make A DEMO Blog And And Add Your This Blog Template And Then Add My Code There And Then Reply Me Here With Your Blog URL To Check It Live…

    • Flipkart Coupons says:

      was looking for animated grids posts since long time….thanks!

    • EXEIdeas says:

      Welcome here and thanks for liking our widget. Stay with us to get more like this…

Leave a Reply

Your email address will not be published. Required fields are marked *