Monday, November 2, 2015
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 to decrease 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
Also Read: Scrolling Popular Post Gadget For Blogger
Sliding Recent Posts Widget For Blogger
Popular Post Widget With Hover Effect
How To Add Square Popular Blogger Gadget On Blogger
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
Also Read: Scrolling Popular Post Gadget For Blogger
Sliding Recent Posts Widget For Blogger
Popular Post Widget With Hover Effect
How To Add Square Popular Blogger Gadget On Blogger
- 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 {
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. view your blog to see this blogger widget after this changes have been made.
