Add A Square Popular Post Widget with Rotating Effect In Blogger

Having a popular post widget on your blog helps readers view the most interesting and most read articles on your blog. There a...

Having a popular post widget on your blog helps readers view the most interesting and most read articles on your blog.

There are many widgets online that can be used to show popular post on a blog, but in this, I will be sharing with you a popular post widget with a rotating effect. This widget helps in decreasing bounce rate of your
blog.

This widget is kind of different from other popular widget, because it doesn’t only shows the popular post, but as well rotate when hovered on any of the thumbnails.

Follow the few steps below to add add a square popular post widget with rotating effect in Blogger.

How to Get Started

=> Firstly, log in to your blogger dashboard

=> Go to layout and click on Add a Gadget

=> A pop up menu comes up, select Popular Post and don't forget to check Show thumbnail option

Save

=> Go to your blog template and click on Edit HTML

=> Press Ctrl + F and search for ]]></b:skin> in search box

=> Immediately below it, copy and paste the code below

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

=> Save the Template

<!= Let’s Design your professional Blog for you in less than 1week =!>

That’s all.

Hope it helps...

Feel free to share this post.

In order not to miss my daily updates, subscribe here.

Click on the link, type in your email address and immediately you are done; you will receive a confirmation mail. Confirm your email address and that’s all. Absolutely free! Henceforth, you’ll start receiving my daily updates via mail

Oladipupo Olutayo

FACEBOOK – www.fb.com/olutayo.segun or www.fb.com/teyusfreedom
TWITTER – www.twitter.com/teyusthedon
2GO - Teyus

Thank you!

Read my post on:

Teyusfreedomtobrowse

Add A Square Popular Post Widget with Rotating Effect In Blogger

COMMENTS

Labels

POPULAR POSTS

Add A Square Popular Post Widget with Rotating Effect In Blogger

SHARE:

RECOMMENDED FOR YOU

Clean your Facebook profile with FaceWash

Facebook Introduces Graph Search

COMMENTS

Labels

POPULAR POSTS