• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Techchore

Techchore

PC Security Tips, Software Guide and Reviews

  • HOME
  • TUTORIALS
  • REVIEWS
  • PLDT
  • GLOBE
  • WRITE for US
Home » Tutorials » How to » How to resize image thumbnails in blogger homepage?

How to resize image thumbnails in blogger homepage?

November 16, 2013 Updated by: I.C Tiempo 5 Comments

how to resize image thumbnails in blogger homepage

How to resize image 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…

Advertisements

Advertisements


<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;
}
how to resize image thumbnails in blogger homepage var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;
div.innerHTML = summary;
}
 
//]]>
</script>

how to resize image thumbnails in blogger homepage

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.

Advertisements

Advertisements


Advertisements

Advertisements

Filed Under: How to

About I.C Tiempo

Hi! ? Welcome to my tutorial & review site. This blog is an expression of my passion to technology, especially to software, computer & networking troubleshooting and other tech-related concern. You can find me @:

| Facebook | Twitter, )

Reader Interactions

Advertisements

Advertisements

Comments

  1. Gonath says

    January 14, 2017 at 9:21 am

    Great. Thanks for this. It helped me a lot for my site.

    Reply
  2. Younes Bouadi says

    March 23, 2016 at 9:50 pm

    Hi bro

    I got a responsive blogger template but, thumbnails still 75px

    what should I do.?

    Reply
    • I.C Tiempo says

      March 26, 2016 at 1:22 am

      Hello Younes, please change the 75px to whatever size you want.

      Reply
  3. Javier says

    September 11, 2015 at 4:27 am

    Hello, Can I resize the thumbnails in th mobile version?

    Any idea please,

    thanks

    Reply
    • I.C Tiempo says

      September 14, 2015 at 10:24 am

      Hello Javier, you should get a responsive design template to make your thumbnails looks better in Mobile.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Recommended Posts

  • How to access PLDT RP2649/RP2740/RP2804 FULL ADMIN?
  • How to enable ALL PLDT Huawei LAN ports | Home Fibr
  • How to access Huawei PLDT Home Fibr adminpldt account?
  • Why An Antivirus Is No Longer Enough In Today’s Cyber Risks
  • 5 Simple ways to secure your home network

Advertisements

Keep me Updated

Get the latest Security Tutorials, Software Reviews & Downloads straight to your inbox

Copyright © 2023 · Techchore.com · All Rights Reserved ·

  • Terms of Service
  • About Us
  • Cookies & Privacy Policy
  • Disclosure Policy
  • Contact Us
  • Sitemap