How To Put Bigger Images in Blogger Posts

Blogger LogoBy default, Blogger provide a menu / tool to add images in our post. However, the resulting image is sometimes blurry and not big enough (unlike the original image). It will cause the messages of the image not to be delivered successfully / completely. Here is a trick to put bigger and clearer image in our Blogger posts by using non-default tools.

Principally, we put our image in an external image hosting service (not Blogger’s), then we call for the image in our posts (using certain codes). For details, here is the systematic guide:

First, prepare the image you are going to use, .jpg type is recommended for its broad support. Then upload it in an image hosting service provider, like the free PhotoBucket. Then copy the direct link of the hosted image for further usage.

Second, add these bold codes in your posts (not in “compose” but “edit HTML”).

Your post texts

<div style="text-align: center;">
<img style="width: 500px; height: 200px;" src="the direct URL of your image" alt="alternative text" border="0">

</div>


Your post texts

Third, publish your post, and the image shall be there. Visit your post to check the changes.

Options:

The <div> tag is only used to set the image align. You can change the “center” with left or right depending on your need.

You can edit the width and height codes to adapt with your circumstances (in pixels). You can make it larger or smaller, but be careful with the aspect ratio (width : height), otherwise your image might look funny.

Use the code alt=”” to define the texts that are seen by your visitors only when they opt not to view images in their browsers. For example: alt=”This is an example image”

border=”0” means the image will not have any border. Use border=”1” to enable the border. However, the tag <div> is sometimes automatically bordered in some templates.

Do you find any problem in applying this method? Let me know if you need any help.

8 comments:

Anonymous said...

Interesting, Issac, but this doesn't allow the viewer to click a smaller, inline image and see the full size image - something I enjoy.

Tan agnes said...

hi Isaac,
I am tanagnes from http://thetrekkers.blogspot.com

Of late i experience uploading photos in my new post, instead of showing image/photos in my composition when i create a new post, it shows HTML formate.

So i am uploading photos one by one instead of few at one go to prevent the photos/image being jumble up, would like your help on how do i upload photos and it appears as photos instead of html formate.

thanks

Isaac Yassar said...

@Tan: The issue is caused by a temporary internal Blogger server error. Alternatively, use the methods in the post above.

Tan agnes said...

thanks Isaac u think they are aware of it or need us to inform them ?

Ice Sculpture News said...

Thanks so much for this peice of code, it has changed my Blog big time bro!

DanielL said...

Try Use.com They have thousands of templates. It's free, and you can post up to 100 full size images with no size or bandwidth restriction.

Works pretty good if you want to do things on the fly without knowing any HTML. Best thing is that you can save and reuse templates later on and their templates are both eBay and Craigslist compatible.

Worked for me and my images are not limited to what eBay or Craigslist offers plus I don't have to pay extra. Let me know what you think.

杰jayki3奇™ said...

hem..juz wanna ask..what can i do so that when i click on the photo..the full size photo will appear

Isaac Yassar said...

@Jayki3: Just use blogger's default image tool. It works exactly like that.