Friday, September 18, 2020
Home Blogging Tips & Tweaks Awesome Square Popular Posts Widgets with Rotating Hover Effect for Blogger

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

- Advertisment -

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments