How to increase Thumbnail Resolution in Blogger

When we add a gadget in Blogger, the thumbnails will keep a default size 72 x 72 px which may not look great in the event that we attempt to make them greater using just CSS. In any case, with a bit of JavaScript we will ready to replace the thumbnail with the same picture of higher resolution and this way, large pictures will no more seem blurry.

In this article we will see How to increase Thumbnail Resolution in Blogger

Changing the Thumbnail Size for the Popular Posts Widget

Step # 1: Firstly add the Popular posts gadget and go to the  Layout > Add a Gadget > Popular Post from the pop up windows

Step # 2: Go to Template > Edit HTML and open the search through Ctrl + F

Step # 3: Copy the following code and paste the search box and find the following tag

</head>

Step # 4: Copy the following code and paste above </head> tag

<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 130px;
margin: 0 0px 5px;
overflow: hidden;
width: 210px;
border: 2px solid #EEEEEE;
border-radius: 20px;
}
.PopularPosts .item-thumbnail img {
position: relative;
top: -30px;
transition:all .2s linear;
 -o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.PopularPosts .item-thumbnail img:hover{
opacity:.6;
filter:alpha(opacity=60)
}
.PopularPosts .widget-content ul li {
background: #F9F9F9;
border: 2px solid #EEEEEE;
border-radius: 10px;
box-shadow: 0 4px 10px #EEEEEE;
color: #555555;
padding: 10px;
margin-bottom: 5px;
}
.PopularPosts .item-title {
clear: both
font: 14px Cambria,Georgia, sans-serif;
color: #2288BB;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.PopularPosts .item-snippet {
display: none;
}
.widget .widget-item-control a img {
height: 18px;
width: 18px;
}
</style>

Step # 5: Now search and find this tag

</body> 

and just above it, add this script

<script type='text/javascript'>                
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("PopularPosts1",210);                
</script> 

I highlighted in red is the gadget ID for the Popular Posts gadget. To change the thumbnail size for any of your blog widget, first you need to find the gadget ID and then add a line below this part

 changeThumbSize("PopularPosts1",210);
changeThumbSize("widget-ID-HERE",210) 

Replace widget-ID-HERE text with the ID of that widget

Share on Google Plus

About Unknown

My Name is Usman Ali and i am SEO Consultant, Online Mentor who has been working since 2012. Blogging is my pession. I can help you in Make Money Online, Blogging, Teachnology, Tips and Tricks, How to and Specially SEO Related issues.