How to Increase Thumbnail Resolution on Blogger

While creating a post on blogger, it creates a thumbnail from the very first image of the post of size 72x72px. However, originally the size of the thumbnail couldn’t be increased. But a java-script can be used on the page to replace the thumbnail with the same image of higher resolution.This method uses a simple java-script which remove and replace the text from any particular section of your blog. When your Blog is opened in a browser it loads the original smaller version of the thumbnail, but the java-script replace the link text with a link of higher resolution of that image.

How to Increase thumbnail resolution on Blogger

To add this java-script to your blog:

Step 1: Open your blog Go to Template>Edit HTML

Step 2: Copy the below java-script at the end of your blog just before </body> tag


<script type="text/javascript">

function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById(“Blog1”);
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c/gi, “s200-c”);
bodyText.innerHTML = theText;
}replaceText();var txt = “Technology Induced”
document.write(“<small>” +“”) + “</small>”); //]]>


* Red Marked text is the id of div container or widget(Blog1 is widget id of your blog posts, similarly any other widget id such as “popularposts1” can be added to it to increase its thumbnail resolution by adding the same java-script)

* Green marked is to increase the resolution to higher numbers (Limit is 1500).

Step 3: Now save the template

Make sure you have a working j query plugin. It hasn’t been tested without J query.

Related posts

Resize Uploaded Photos on Blogger


Microsoft’s New Messaging App for Android
Resumable Downloads from Google Drive
Know Which Website Has Access to Your Device Hardware
Save Any Image or File from a Website to Your Google Drive Account