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.
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.
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.
What is there is a square and rectangle image??
It Will Resize Your All Post Images According To Your Previous Dimension Ratio…
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
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.
This code resizes all the images in a post. .can you give a code that only resizes the first image on every post?
Do You Want To Resize All Image On The Home Page And Label Page Of Your Blog?
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?
You Are Free To Change Any Code As You Want, But Don’t Touch “.post img” Word…
Wow.. simple tricks but it really helpful. Thank you for sharing this to us… Happy New Year……………
Blog: More Blog Tools
You Too, And You Are Welcome Here…
Please Make a Demo Post of your blogger post so that we can see its result… Thankx
Some Post Did Not Want DEMO, If You Need It, Check It On Your Blog…
How to make threaded system in bloggers comment section??
I did but still reply button is not working? can u help to solve this problem?
Upgrade Your Template To New One That Contain Threaded Comment Function Default.
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.
This is good tip.
but try this out.
.post img {
height: auto;
max-width: 550px;
}
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…
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.
Can I See Your Blog And What You Want To Resize…???
Easy to install,,!! but by this small images gets stretched…
any solution..????
It’s Only For Photo Gallery Image Blogs That They Have All In One Size…
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
I Visited Your Blog And Your Logo Is Working Fine. What’s The Real Problem…???
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.
Are You Talking About Wrench Tool? IOs That Showing In Large Thumbnail After Adding My Code? Please Explain…
For a better understanding I could send you a screen shot if you agree. You can find my email address in “Kontakt”.
Yeh, Sure. Send Us An ScreenShoot For Better Understanding Of Your Problem At admin@exeideas.tk
already sent
Replied. Check Your EMail…
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 ?
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.
Will it also resize images in homepage as well ?
Yes but you can control it more if you will use conditional tags.