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.


Tech blogger, SEO expert, cryptocurrency enthusiast, and freelancer are the terms that describe me. I'll rather write a thousand words than speak hundred words, and that describes my passion as a content creator.