Square Popular Posts Blogger Widget with Rotating Effect

Below are guidelines on how to add square popular posts widget with rotating effect In blogger/blogspot.

On visiting most blogs, you'll definitely see a popular post gadget/widget which displays the most read post, usually in an ascending order.

This is because it is one of the best blogger widgets that any blog should have.

One customized form of this widget is the square popular post widget with rotating effect for blogger blogs.

It helps in decreasing the bounce rate of your blog, where a visitor visits your site from a particular link or google, then leaves your blog without reading any other post.

Also, it'll lead to an increase in your blog's pageviews.

This gadget has a rotating effect when hovered on any of the thumbnails.

Also read:    How to Add “Link To This Post” Widget Below Blogger Post
                     How to Add Labels Cloud Widget In Blogger
                     How to Add IP Widget In Blogger Blogs 

How To Add Square Popular Blogger Gadget On Blogger

To add a Square Popular Posts Blogger Widget with Rotating Effect  in your blog, follow the steps below:
  • From your blogger dashboard, click on 'layout'.
  • Click on 'add a gadget' depending on the desired location you want it to appear on your blog.
  • Select 'popular post' from the listed options. Save the gadget.
  • Goto your blogger 'template', backup your template from the top right corner.
  • Click o 'edit hml', using ctrl+f search for ]]></b:skin> inside your template. 
  • Copy the CSS code below and paste 'above' ]]></b:skin>

.PopularPosts .item-title {
.PopularPosts .widget-content ul li {
background: none repeat scroll 0 0 transparent;
float: right;
list-style: none outside none;
margin: 10px 0 0 !important;
padding: 0 !important;
.PopularPosts .item-thumbnail {
margin: 0 8px !important;
#PopularPosts1 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 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);}

.item-thumbnail img {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
border: 3px solid #ccc;
height: 60px;
padding: 3px;
width: 60px;

  • Save the template. 

You can now view your blog to see this blogger widget after this changes have been made.


With the steps outlined above, you should be able to add the Square Popular Posts Blogger Widget with Rotating Effect to your blog.

Did this work for you?

We'll like to hear from your in the comment section.

Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:

HTML Link Code:

BB (forum) link code:


  1. Kul buh didnt try it, I like ur blog tho

  2. Hello Gracia,
    It's a beautiful one here expecially the way it rotates' I like the effect, every blogger using the blogger blogging platform will sure need this widget for the fancy of their blogs and also to satisfy their need for the popular post widget.

    Thanks for sharing Ma'am, and do hav a wonderful day ahead.


Post a Comment

Please share your views on this topic with Grace Joseph by leaving a comment.