LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Tricks » How To ReSize Single And All Image On Blogger Blog?

How To ReSize Single And All Image On Blogger Blog?

How To ReSize All Image On Blogger Blog?

The main question is that “How To ReSize All Image On Blogger Blog With Pure CSS Code And Also Full Customizable Tags To Make Your Blog Image All In One Size?” Before explaining the original hack , I would like to tell what most of the blogger might be doing to re-size their images while writing posts. Mostly they will use style tags to mention the width and height of the image.

Whenever I upload lots of photo in Blogger, I always end up re-sizing the photos from small size to its original size. There are times that I want my photos to appear bigger and not the automatic default –small size after an upload.

Re-sizing it manually with a few clicks is okay,but what if I uploaded 20 or 30 photos in one blog post and I want those photos to appear in its original size? My time will be eaten the photo loading after re-sizing and clicking and selecting photos one by one is not convenient.

So through this hack, you just have to edit you html template not to edit all post one by one that will take huge time, so just add the below css and re-size all images at one.

Table of Contents

Resize Single Image:

<img src="https://www.yourblogname.com/thumbnail.png" width="560″ height="260″/>

Resize All Images:

But when you are having a number of images in your posts , then it becomes difficult to mention the image size and width in each and every image. And also if you change the template which contains different width , then you need to edit the size and width in all images.

In order to get rid off those head-aches , just follow these simple steps to resize images in your blog. Even if you have declared different image size and width in that image code , this code will overwrite those tags and will change the width and size you mentioned in the style sheet.

Features:

1.) All Images Will Be Automatically Resized With Just One Code.
2.) You Don’t Have To Edit All Of Your Blog Pics.
3.) Easy And Best Method To Use.
4.) Full CSS Code.
5.) Can Also Add More CSS Propertied.
6.) Full Customizable.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template”.
4.) Click “Edit HTML” .
5.) Now Find ]]></b:skin>
6.) Now Copy The Below Code And Paste It Before There.
7.) Click Save, Now You Are Done.

.post img {
float:center;
min-width:560px;
max-width:560px;
max-height:260px;
min-height:260px;
padding : 10px;
line-height : 2em;
margin: 0 auto 10px auto;
clear: both;
}

Customization:

1.) Change Max-Height Value To Your Desire One.
2.) Change Max-Width Value To Your Desire One.
3.) Change Min-Height Value To Your Desire One.
4.) Change Min-Width Value To Your Desire One.
5.) Change Float Tag To Your Desire One.
6.) Change Margin Value To Your Desire One.
7.) Change Padding Value To Your Desire One.
8.) Change Line-Height Value To Your Desire One.
9.) Save And Done.

Recommended For You:
Stylish HTML-CSS Drop Down Menu For Blog & Website

You Like It, Please Share This Recipe With Your Friends Using...

34 Responses to “How To ReSize Single And All Image On Blogger Blog?”

  1. Diptesh Thakore™ says:

    What is there is a square and rectangle image??

  2. Jake F says:

    You’re better off resizing images before you upload, so that visitors don’t have to wait for a massive file to download when it’s only displayed small anyway. Try http://imageresize.qweb.co.uk

    • EXEIdeas says:

      Yes, You Are Right, But When The Visitor Want To View That Image In HD For Better Viewing, How Can He? Because You Have Uploaded The Small Image Earlier. That’s Why I Prefare To Use This Code.

  3. Shyam Pareek says:

    This code resizes all the images in a post. .can you give a code that only resizes the first image on every post?

  4. Goddesslily Seymour says:

    I want all my photos to be 8×5″ or 640px by 375px, I got that part but what should my numbers be for padding & line height, should I leave what you have?

  5. Jay Ryan Macabato says:

    Wow.. simple tricks but it really helpful. Thank you for sharing this to us… Happy New Year……………

    Blog: More Blog Tools

  6. Siraj.Ali says:

    Please Make a Demo Post of your blogger post so that we can see its result… Thankx

  7. Unknown says:

    How to make threaded system in bloggers comment section??

    • Unknown says:

      I did but still reply button is not working? can u help to solve this problem?

    • EXEIdeas says:

      Upgrade Your Template To New One That Contain Threaded Comment Function Default.

    • EXEIdeas says:

      You Just Corrupt Your Template While Editing, Click On “Revert Widget Template To Default” On Edit HTML Tab Will Solve This Issue But Your All Up-gradation Will Be Damages. It’s Up To You, Make A Backup, Then Try It.

  8. Sri Vikram says:

    This is good tip.
    but try this out.

    .post img {
    height: auto;
    max-width: 550px;
    }

    • EXEIdeas says:

      Thanks For Visiting Us And Leaving Your Views And Code But You Didn’t Have Full Features As We Share. Anyway Thanks To Be With Us…

  9. Katherine Tampoco-de la Cruz says:

    Hi there, Im really stupid on this one. When I tried to put the code in, all the images resized to the specified sizes. Should it be separate codes for each orientation since the images are in landscapes and portraits?
    Thank you.

  10. Jerry King says:

    Easy to install,,!! but by this small images gets stretched…
    any solution..????

  11. Falko says:

    Hi Muhammad,

    I added a logo to my blog on a gadget and centered and re-sized it. It worked fine but now I see a very big tool symbol instead of the usual small ones.
    Obviously the CSS code
    .Image img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
    margin-bottom: -22px;
    width:125px;
    height:125px;
    }
    is the reason, but I don’t know what is wrong with it.
    My blog: falko-duwe.blogspot.com

    Thank you for the right advice.
    Falko

  12. Falko says:

    Thanks for your reply!
    Yes, the logo is working fine but when you are logged in to publish a post you can see these small tool symbols which you can click on to go directly to the gadgets. The tool symbol of the image gadget is now grossly increased in size when I add width and heights to margin left/right/top/bottom. Without adding width and height the symbol remains as it should be but of course I have to resize the logo to fit in properly.

  13. Falko says:

    For a better understanding I could send you a screen shot if you agree. You can find my email address in “Kontakt”.

  14. Falko says:

    already sent

  15. dear i want to resize all image only on in blogger posts , i do not want to resize the mages of home page or you can say thumbnail. can you help me out ?

    • EXEIdeas says:

      Use Condition Tags For This Purpose. If Don’t Know Then Send Us An Email So We Will Send The Codes There. Use Our Contact Form For This Purpose.

  16. Will it also resize images in homepage as well ?

Leave a Reply

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