Attractive Blogger Popular Post Widget With Different Style v2

Few days back I got an request from one of our valuable reader about to make tutorial for adding our new popular post widget. The new popular post widget is part of new design of SoftGlad. Several types popular post widget styles are released by many blogger.

Popular Post is a widget which display most read or popular blog post with title, thumbnail and description based on blog analytic stats. Although popular post widget will make the visitor continuing reading your article from displayed post in the widget.

[ Read Attractive Popular Post Widget v1 ]

So making an attractive to popular post widget will more eye catching for visitors. This tutorial will help you to make your popular post widget as in attractive one using CSS3.

See Live Demo at Right Sidebar  → →

How To Add Attractive Popular Post Widget To Blogger

First of all you should add popular post with snippet, thumbnail and title in your blog and follow the steps below to add attractive popular pot widget.

• Go to Blogger →  Template  → Edit HTML
• Find  ]]></b:skin>   and add the following CSS code before it.

.PopularPosts .widget-content ul li {
padding: 0;
list-style:none;
background: #eee;
margin: 10px 0px;
border:0;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
}
.PopularPosts .item-title {
padding: 0 5px;
}
.PopularPosts .item-snippet {
padding: 0 5px 5px;
}
.PopularPosts .widget-content ul li {
overflow: hidden;
}
.PopularPosts .widget-content ul li:hover {
background: #000;
}
.PopularPosts .widget-content ul li:hover .item-snippet {
color: #fff;
}
.PopularPosts .widget-content ul li:hover .item-title a {
color: #fff;
}
.PopularPosts .item-thumbnail {
height: 100px;
overflow: hidden;
margin-right:0;
}
.PopularPosts img {
width:100%;
margin-top: -40px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
}
.PopularPosts ul li:hover .item-thumbnail img {
margin-top: -150px;
}

You Should implement jQuery in your blog if didn't yet. To implement jQuery, add the below small code before  </head>  

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

The default popular post image size is 72pm, but that size will not cover attractive. We need to resize image to fit the sidebar. So using JavaScript we can resize it instead of CSS. If we use CSS we can adjust the width, that will lose the quality of image. JavaScript change width of default image size 72px to 296px.

Add the following code before  </body> in your template.

<script type='text/javascript'>
    //<![CDATA[
    var newSize = 296;  // this is the new thumbnail size, you can change this
    $(".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>

At last Save it. See the result in your blog live.

I hope you like this widget very much. This post specially dedicated for our valuable reader. One comment inspire me to post tutorial about the new popular post widget as a part of new design of SoftGlad. So you can also request us to give you special tutorials via our blog. Post your valuable comment and if there any error feel free to comment it below. 

SHARE

Tweet