How to resize image thumbnails in blogger homepage

The default sizes of image thumbnails in blogger homepage are usually 300 to 450 px. Many bloggers wanted it to be smaller to make their blogs, neat, clean, orderly and fast-loading. I, myself is without exemption so I look for a solution, because to be honest I’m not very good in coding except that I knew the basics, but to no avail. Therefore, I decided to study the codes in my template and voila, I stumbled with the solution. It is a javascript that controlled the image thumbnails sizes in blogger homepage, here it is...

<script type=’text/javascript’>
summary_noimg = 150;
summary_img = 250;
img_thumb_height = 75;
img_thumb_width = 75;
</script>
<script type=’text/javascript’>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf(“<“)!=-1)
{
var s = strx.split(“<“);
for(var i=0;i<s.length;i++){
if(s[i].indexOf(“>”)!=-1){
s[i] = s[i].substring(s[i].indexOf(“>”)+1,s[i].length);
}
}
strx = s.join(“”);
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=’ ‘ && strx.indexOf(‘ ‘,chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+’…’;
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = “”;
var img = div.getElementsByTagName(“img”);
var summ = summary_noimg;
if(img.length>=1) {
imgtag = ‘<span style=”float:left; padding:0px 10px 5px 0px;”><img src=”‘+img[0].src+'” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px” style=”background:#fff;padding:3px;border:1px solid #eee;”/></span>’;
summ = summary_img;
}
var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;
div.innerHTML = summary;
}
//]]>
</script>

If your template already have these codes (it is usually situated above </head>

), simply change the value of (img_thumb) to 75 or according to your taste.
img_thumb_height = 75;
img_thumb_width = 75;

But if your template doesn’t include these codes, copy and paste it, just above the </head>

and you are ready to go. As you can see in the picture(before and after images), look at the difference. Which is better? Resizing the image in blogger homepage is always better.

Share: