Awesome Square Popular Posts Widgets with Rotating Hover Effect for Blogger

There are so many ways to reduce your blog’s bounce rate. One of such ways is to add a popular posts widget which will tell your blog visitors about the most viewed posts in the blog. Earlier this week, I showed you guys how to add a Cool Numbered Popular Posts Widget for Blogger which when added to your blog can help increase your blog’s readership. For this post, I will be showing you guys how to add awesome square popular posts widget with a rotatable hover effect.

Adding this widget is very simple and it follows the same method as the tutorial on adding a Cool Numbered Popular Posts Widget for Blogger. So to add this awesome looking square popular posts widget to your Blogger page;

  • Go to your Blogger Dashboard.
  • Navigate to Template >>> Edit HTML.
  • In the Edit HTML page, search for ]]></b:skin> using Ctrl + F.
  • Copy the CSS code below and paste just before/above ]]></b:skin>
.PopularPosts .item-title {

display:none;

}

.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;

}
  • Finally click on Save Template to apply the changes to your Blogger page.

Remember that you need to have added a popular posts widget to your Blogger blog page for the CSS code above to work. If you have not added it yet, then you need to do so following the procedure below

  • Once in your Blogger Dashboard, navigate to Layout >>> Add a Gadget.
  • From the pop-up page that will come up, locate and select Popular Posts.
  • Configure the widget as you want and then click on Save.
  • Drag the widget to the side you want it to appear if need be and then click on Save Arrangement.

With that done, you should have a square popular posts widget appearing in your blog which rotates once hovered over by mouse.

LEAVE A REPLY

Please enter your comment!
Please enter your name here