How to Increase Thumbnail Resolution on Blogger

With a good Thumbnail resolution, your blog post looks more stylish. The default thumbnail size in Blogger is 72x72. But with little bit modifying we can increase Thumbnail Resolution on Blogger. If you want to increase your Blogger post thumbnail resolution then follow our below steps. You may like Top 10 widgets for blogger blog created with HTML.

Increase Thumbnail Resolution on Blogger.

1. Go to the Blogger.com and log in your account.
2. Select your blog where you want to increase Thumbnail resolution.
3. From your blog dashboard click on the template option.
4. Now from the next page click on the edit HTML Button.  
   
5. In the next page, you will see your Template code.  
   
6. Click anywhere on the code and search </head> by pressing CTRL+F.
7. After finding the </head> paste the following code just before </head>.

<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 120px;
margin: 0 0px 5px;
overflow: hidden;
width: 200px;
border: 1px solid #EEE;
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 #EEE;
border-radius: 10px;
box-shadow: 0 4px 10px #EEE;
color: #555;
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>

Again search for </body> tag. And paste the following script before 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-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",200);                
</script>

Now click on the save changes Button. And visit your blog to check is it working or not. If it will not work for you then drop your comment I will help you.

Thanks for reading my this post. Keep visiting for more useful posts. If you have any question about this post you can ask me by dropping your comment.