How To Increase Thumbnail Resolution On Blogger

Thumbnail plays an important role in websites. Therefor have a good and attractive thumbnail quality can archive a good amount of traffic. Thus in the blogger, the default size is 72 x 72 px is not enough to achieve a good quality thumbnail.

Now, to do so we have to play with a javascript. Because the reason is that the CSS cannot do the whole job.

I will show You 4 easy steps to increase your thumbnail resolution.

Increase Thumbnail Resolution On Blogger-

Step 1: In this first step we have to add the gadget to Layout -> Click on the Add a gadget scroll down and select poplar posts.

Step 2: Now go to the Template -> Edit HTML now on the code box click it once and press Ctrl + F to search

Step 3: On the search box type and search for " </head> " tag.

 After you found the tag, Add the CSS just above the </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 4: Now search for the </body> tag, and add the Below code just above it. 

<script type='text/javascript'>                  
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/w72-h72-p-k-no-nu/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>

just you need to change the Populaposts1 to your widget-id. 

If you don't know how to add the widget-id  also read
how to find the widget Id and Section Id in blogger

Tags: Thumbnail Resolution