How To Optimize Thumbnail Resolution in all Blogger Widgets

Why This Low Thumbnail Resolution issue is there in blogger?

Many Custom Templates provided by Third Party Fixed this issue but What about those who is using Templates provided by Blogger or free templates. This Issue is because thumbnail size by default in blogger widgets like Popular posts or Recent Posts is 72px  x 72px . and if we make it big like we do it by CSS Increases the size of the thumbnail. this 72px thumbnail stretches and looks very bad. the Pixels Shredded and Image looks blurry and the widgets looks bad for visitors.

How We Can Solve this Low Thumbnail issue in blogger?

We Can Solve this issue by using JavaScript. Not a Big Script we will replace that old blurry low resolution thumbnail with the same  new higher resolution thumbnail.

How This JavaScript Works?

This Script Takes the Widget ID And Target its innerHTML And Replace the Old Thumbnail with the new Parameters so that Higher Resolution image appears and Resize it according to our Desire or Wish.

Let Start! How To Add  Fix/Improve Thumbnail Resolution in all Blogger Widgets in Blogs or sites:

Steps To Fix/Improve Thumbnail Resolution in all Blogger Widgets:

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'>                   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("Your_Widget_ID",210);                   </script>

Customization:

• The Yellow Highlighted Text is for The Widget ID. Replace the Yellow Text With your Widget ID.

• The Green Highlighted Text is Responsible For The Thumbnail Size. if you want to Change the Size You can Play with the Code Have Fun. 

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

That's It Thanks For Following our Tutorial 'Fix/Improve Thumbnail Resolution in all Blogger Widgets '' 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.