How to resize image thumbnails in blogger homepage

Most  default sizes of image thumbnails in blogger homepage are varies with template designs. Some template have small, medium or large images. Some bloggers prefer smaller images to make their blogs, neat, clean, orderly and most importantly fast-loading. In my tutorial today am gonna share with you simple trick on how you can go about with it. Don't worry since it doesn't need much effort with the code. Below is HTML code of which you have to copy and paste in your template.

<script type=’text/javascript’>
summary_noimg = 150;
summary_img = 250;img_thumb_height = 75;
img_thumb_width = 75; 
<script type=’text/javascript’>
function removeHtmlTag(strx,chop){ 
var s = strx.split("<"); 
for(var i=0;i<s.length;i++){ 
s[i] = s[[i]subs[i]ng(s[i].inde[i](“>”)+1,s[i].leng[i]; 
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+[0] 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;

In your HTML section search for </head> and paste the code above before the code  the simply change the value of (img_thumb) to your desire size 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>

Safe and refresh your blog to see the changes. Any a trouble persists? let me help in the comment box below.

Click to comment