Follow Me:

Monday, August 18, 2014

Adding Top Popular Post Widget Blogger

Top Popular Post Widget in Blogger
Blogger use popular post widget in their blog to show the most post visited. Today we bring to you the best customized popular post widget.

This created popular post shows you top visited post with title image and summary while the rest with only title as shown in the picture. Note its easy to add in your blogger you just need to add the CSS code just follow the steps.

1. Go to your Blogger account.

2. Edit your template

3. Find the </b:skin> code and just above it add the below code.
TNB Widgets
* ***************************
.PopularPosts .widget-content ul {
margin-top: -10px;
}
.PopularPosts .item-thumbnail {
margin: 0;
}
.PopularPosts .item-title a {
text-decoration: none;
color: #444;
font-weight: bold;
}
.PopularPosts .item-title a:hover {
color: #cf5a4b;
}
.PopularPosts .item-snippet {
font-size: 12px;
line-height: 1.6em;
color: #777;
padding-top: 10px;
}
.PopularPosts li {
border-bottom: 1px solid #ddd;
}
.PopularPosts li .item-thumbnail,
.PopularPosts li .item-snippet {
display: none;
}
.PopularPosts li:first-child .item-thumbnail,
.PopularPosts li:first-child .item-snippet {
display: block;
}
Now save your template and view your blog.

No comments:

Post a Comment

Creative Commons License