Square Popular Posts Widget with Rotating Effect

Posted On // 6 comments


Popular Posts is a widget which every good blogger uses. From small blogs to all big blogs you can see Popular Posts widget. It helps to decrease bounce rate of your blog. I have already added three popular posts widget in my blog.

This one is a bit different and looks more elegant. It has a rotating effect when hovered on any of the thumbnail. 

To add this widget in your blogger blog follow the below steps given.



Adding CSS in Edit HTML


Firstly go to  Blog Title → Layout → Add Widget → Popular Posts. Add the widget and don't forget to check Show thumbnail option.

Secondly go to Blog Title → Template → Edit HTML. Expand <b:skin>....</b:skin> if it is not expanded. Press Ctrl + F and search for ]]></b:skin> in search box. [As per the new HTML editor]
Add the below given code just 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;
}

Once you have added the code save the template.

You are done now. Now you and your visitors can see this awesome Popular Posts widget with rotating hover effect in your blogger blog.

6 comments

Hamza Khan Author
28 August 2013 at 08:21

Hi I Have Used This Widget But My Front Corner Of This Widget Is Empty, U Can Check & Please Help!
http://extra666.blogspot.com/

Reply
29 August 2013 at 02:04

You can resolve it easily be changing the code
[pre]
float: right [/pre] to [pre] float:left [/pre] in the code

.PopularPosts .widget-content ul li {
[/pre]

Reply
Hamza Khan Author
29 August 2013 at 05:56

ThanKs, Its Working :)

Reply
thestar14ever Author
19 September 2013 at 08:52

AWS it works >>>>>> thanks pro .

PS : u must uncheck the other option when u add popular post

Reply
ajay Author
29 September 2014 at 22:25

hey buddy, i need the similar style for recent posts please help me

Reply
16 April 2016 at 06:00

Verry nice....Thanks

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Square Popular Posts Widget with Rotating Effect |