Customized Popular Post Widget For Blogger

Popular post widget is widget by blogger which shows you a most clicked posts of your blog, It’s default style is simple, but you can edit it and make it custom and more stylish to take visitors attention.
Here is the view of how it will look custom popular post widget.

Looks Nice ?

How can you customize widget, it’s really easy and takes no time,
First add a popular widget,
– Go to blogger dashboard
– Navigate to layout
– Select popular posts
– Select  option for popular posts, also shown in image below,

Add Popular Post Widget
Now you’re done adding popular post widget. You can select any number of posts in last option, i recommend 7 !
Now edit the widget for custom stylish view,
 Creating Custom Style

# First open your blogger dashboard
# Navigate to template
# Click on edit html
# Now search for “]]></b:skin>”
# Now add css just above ]]></b:skin>
# Here is the css

.popular-posts ul
{
padding-left:0px;
padding-top:10px;
}
.popular-posts ul li
{
margin:10px 0;
border: 1px solid #000;
border-radius: 100px;
}
.popular-posts .item-thumbnail img {
border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
-webkit-border-radius: 50px;
box-shadow: 0 3px 3px rgba(0,0,0,1);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,1);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,1);
-ms-box-shadow: 0 3px 3px rgba(0,0,0,1);
-o-box-shadow: 0 3px 3px rgba(0,0,0,1);
border: 4px solid #e6e6e6;
}
.popular-posts .item-thumbnail img:hover
{
transform:rotate(10deg);
-moz-transform:rotate(10deg);
-ms-transform:rotate(10deg);
-o-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
}
.popular-posts a {
text-decoration: none;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}

Now click save template,
Check if working..,
if still not working then comment with your problem and blog url…

More Blogger Widgets

Share This Now:

10 Comments

Add a Comment

Your email address will not be published. Required fields are marked *