Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Saturday, December 29, 2012

How To ReSize Single And All Image On Blogger Blog?

This Article Was Live On: Saturday, December 29, 2012 And Till Now Have32 comments.
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.

Resize Single Image:

<img src=”http://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.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



32 comments :

  1. What is there is a square and rectangle image??

    ReplyDelete
    Replies
    1. It Will Resize Your All Post Images According To Your Previous Dimension Ratio...

      Delete
  2. 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

    ReplyDelete
    Replies
    1. 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.

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

    ReplyDelete
    Replies
    1. Do You Want To Resize All Image On The Home Page And Label Page Of Your Blog?

      Delete
  4. I want all my photos to be 8x5" or 640px by 375px, I got that part but what should my numbers be for padding & line height, should I leave what you have?

    ReplyDelete
    Replies
    1. You Are Free To Change Any Code As You Want, But Don't Touch ".post img" Word...

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

    Blog: More Blog Tools

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

    ReplyDelete
    Replies
    1. Some Post Did Not Want DEMO, If You Need It, Check It On Your Blog...

      Delete
  7. How to make threaded system in bloggers comment section??

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

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

      Delete
    3. 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.

      Delete
  8. This is good tip.
    but try this out.

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

    ReplyDelete
    Replies
    1. 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...

      Delete
  9. 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.

    ReplyDelete
    Replies
    1. Can I See Your Blog And What You Want To Resize...???

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

    ReplyDelete
    Replies
    1. It's Only For Photo Gallery Image Blogs That They Have All In One Size...

      Delete
  11. 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

    ReplyDelete
    Replies
    1. I Visited Your Blog And Your Logo Is Working Fine. What's The Real Problem...???

      Delete
  12. 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.

    ReplyDelete
    Replies
    1. Are You Talking About Wrench Tool? IOs That Showing In Large Thumbnail After Adding My Code? Please Explain...

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

    ReplyDelete
    Replies
    1. Yeh, Sure. Send Us An ScreenShoot For Better Understanding Of Your Problem At admin@exeideas.tk

      Delete
  14. 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 ?

    ReplyDelete
    Replies
    1. 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.

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.