How To Show Thumbnails of Popular Posts in Blogspot Blogs?

Popular Posts Thumbnails Widget + Dynamic Hover Effect for Blogger

What is Popular Posts Widget?

Popular Posts Widget Basically Was Launched by blogger in 2011. Where the most viewed or most popular posts will display First. Popular Posts Widget is used by maximum blogs to show their Trending Posts. Like I Said this widget is created by Blogger so it is very lightweight Fast and Responsive. But The Main Drawback of this widget is its thumbnails Size When you want to increase the size of the thumbnail by the CSS Code then thumbnail will be stretch and blurred.

Why To Use Popular Posts Widget?

Popular Posts Widget is recommended to use in every Site or Blog of any Type or niche. Popular posts widget will increase blog views and engage readers more efficiently. and we can add this in the sidebar and look beautiful. more importantly the visitors can see the site most popular posts arranged very well. 

What is Popular Posts Thumbnails Widget + Dynamic Hover Effect for Blogger?

This Popular Posts Widget is simple its Just display Thumbnails and on hover it shows Title with With Saturate Effect. 

Check This Widget Also: CSS3 Popular Posts Widget with Auto Numbers+hover effect!

See The Demo Below After the tutorial you will get this Widget:

Let Start! How To Add  Popular Posts Widget in our Blog:

First We Will Add Popular Posts Widget:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.

STEP 3: Click On "Add a Gadget" As highlighted in the image above.

STEP 4:  After Clicking on "Add a Gadget" Choose "Popular Posts" from the list and Open it you will find many options to customize it as highlighted in the image above.

STEP 5: You will need to configure its settings as shown in the image above: uncheck "snippet"  Its better that you display at most 7-9 posts Because If you add more posts The more space it Needs So if you don't want that the widget should take more space then Show Less posts. now Save it.

Styling The Popular Posts Widget:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You will find Template Section as highlighted in the image above Click on Template.

STEP 3: Click On Edit HTML.

STEP 4: After Clicking on Edit HTML Search for

]]></b:skin>

STEP 5:  Copy This Below Code Before ]]></b:skin>

/*--- www.trendingwidgets.com (TW Network) Popular Posts --- */ 

.PopularPosts .item-content:not(img) .item-snippet, .PopularPosts .item-content:not(img) .item-title{
display:none;
}

.PopularPosts .item-thumbnail img{
  display: inline-block;
height: 100px;
width: 100%;
max-width: 100%;
margin-top: 10px;
padding: 4px;
border: 1px solid #A9A9A9;
}

.PopularPosts .item-thumbnail:hover + .item-title {
  position: relative;
 display: inline-block!important;
  line-height: 1.6em;
  width: 100%;
  font-size: 120%;
  font-weight: bold;
}

.PopularPosts .item-thumbnail:hover{
  filter: saturate(300%);
}

Customization:

• The Yellow Highlighted Text is for Width of the Popular Posts Widget. So Change the Width According to your own Choice. and Play with it till you get your best choice.

STEP 6:  All Done Save the template and Check it in your site.

Steps To Fix/Improve Thumbnail Resolution in popular Posts Widget:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You will find Template Section as highlighted in the image above Click on Template.

STEP 3: Click On Edit HTML.

STEP 4:  After Clicking on Edit HTML Search for 

</body>

STEP 5:  Copy This Below Code Before </body>

<script type='text/javascript'>              
//<![CDATA[   

function imageResize(imgLink){

var images = document.querySelectorAll(imgLink);

for(var i = 0; i < 9; i++){var imgSrc = images[i].getAttribute("src"); var newThumbnail = imgSrc.replace(/=?w72-h72-p-k-no-nu/ig, ""); images[i].setAttribute("src", newThumbnail); 
}  

}
// Calling Function By http://www.trendingwidgets.com

imageResize(".PopularPosts .item-thumbnail img");

//]]>              
</script>

Customization:

• The Yellow Highlighted Text is for The Widget ID or Class. Replace the Yellow Text With your Widget ID or Class If it doesn't work.

STEP 6:  All Done Save Your Temple & Check it in your site.

That's It Thanks For Following our Tutorial ''Popular Posts Thumbnails Widget + Dynamic Hover Effect for Blogger ! '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.