By : 
You can take a live demo on my Popular Post widget place at the right sidebar. Like this you can make your ugly popular post widget into an Stylish one. And, I have named this widget as “Stylish Popular Post Widget“. This widget is totally free to use. While not the assistance of JavaScript this popular post widget was created. I already mentioned that popular posts plugins is a good tool to extend your blog’s traffic further as page views. With the assistance of popular post widget you’ll be able to get a lot of internal traffic for your blog. Let’s see how to install this awesome and stylish Popular post widget to your blog.
Live Demo at Right Sidebar →
Adding Popular Posts Widget
- Go to Blogger >> Layout
- Click “Add a Gadget” >> And Choose “Popular Posts”
- In that pop up page you need to un-check the “image thumbnail” and also “snippet”.
- Then Choose your number of post to be published and Save it!
Adding Style to Popular Post Widget
- Go To Blogger >> Template and Backup your Template.
- Now, click “Edit HTML”
- Now search for </b:skin> by pressing Ctrl +F.
- Then paste the following code given bellow just Above/ Before </b:skin>
/*— Stylish Popular Posts Widget — */
.PopularPosts img {
margin-top: -20px;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
}
.PopularPosts .item-thumbnail {
height: 80px;
overflow: hidden;
margin-right:0;
}
.PopularPosts .widget-content ul li {
padding: 0;
background: #eee;
margin: 10px 0px;
border:0;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
}
.PopularPosts .item-snippet {
padding: 0 5px 5px;
}
.PopularPosts .item-title {
padding: 0 5px;
}
.PopularPosts .widget-content ul li:hover {
background: #3E85F0;
}
.PopularPosts .widget-content ul li:hover .item-snippet {
color: #fff;
}
.PopularPosts .widget-content ul li:hover .item-title a {
color: #fff;
}
.PopularPosts ul li:hover .item-thumbnail img {
margin-top: -120px;
}
- Then add the following code just Above/ Before </body> in your template.
<!– Stylish Popular Post Widget –>
<script type=’text/javascript’>
//<![CDATA[
var newSize = 290;
$(“.popular-posts .item-thumbnail img”).each(function() {
var oldSize = $(this).attr(“width”);
$(this).attr(“width”, newSize); $(this).attr(“height”, newSize);
$(this).attr(“src”, $(this).attr(“src”).replace(“/s”+oldSize+”-c/”, “/s”+newSize+”-c/”));
});
//]]>
</script>
- If you don’t have jQuery then add the following code just Above/ Before </head>
<script src=’http://code.jquery.com/jquery-latest.js’ type=’text/javascript’></script>
- After doing all the steps, just hit the Save Template button and check your blog.
- Enjoy dudes!
I hope your popular post widget is so Awesome than the previous one. I hope you have like this widget. Kindly share this article with your friends and share your previous views in comments. If you have got any problems then make us to know it in comments below.
