Sunday, March 22, 2009

Increase Image Size Blogger Blogspot Blog

In this tutorial you will learn how to increase the displayed size of the images you upload to your Blogger Blogspot blog by entering your own dimensions. This is a very easy trick requiring no change to your Blogger template. It is suitable for anyone from beginner to advanced users.

By default Blogger has three image settings: small, medium and large. Your uploaded images are scaled down to fit these standard Blogger sizes. If your image is larger than the maximum 400 pixels in width and 300 in height it is still scaled down to 400x300px. If you want to override these settings you can by manually changing the dimensions of the height and width of the uploaded image.

To Make Uploaded Images in Blogger Bigger

1. Log in to Blogger if not already logged in.

2. Go to Posting > Create Post or if you want to edit an image already posted go to Posting > Edit Post

3. Upload your chosen image or if you are editing your post identify the image you want to change

4. Switch from Compose to Edit HTML which will allow you to see the HTML code of your post

5. Find the code block for the image you wish to change. Look for the code that begins <img> tag beginning <img style>. For example for the following image:

img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 300px;" src="http://3.bp.blogspot.com/_vLeiVavkV_M/SjMKOjXnmYI/XXXXXXXXX/Ra0BizPIDsc/s400/twitter123.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5346628427747662210" />


This code will display the image in a Blogger post at the large size - 400x300.
Increase image size in a Blogger Blogspot blog
6. To change the 400x300 dimensions it is simply a matter of changing the values to whatever you wish. Make sure you keep the proportions of the image otherwise it will not display correctly. For example to increase the image size displayed by 25% you would change the dimensions to 500x375:

img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 500px; height: 375px;" src="http://3.bp.blogspot.com/_vLeiVavkV_M/SjMKOjXnmYI/XXXXXXXXX/Ra0BizPIDsc/s400/twitter123.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5346628427747662210" />


Make image size bigger by 25% in a Blogger Blogspot blog

7. Click the Preview button and you will be able to check your image before publishing

8. Once you are satisfied click on the Publish Post button

9. Click View Blog to see your image displayed with your user defined proportions


Summary
At sometime you may want to display an image on your Blogger Blogspot blog that is bigger than the maximum default size of 400x300 pixels. This tutorial has shown you how to change the height and width values of the image in Blogger so you can override the default dimensions.


Subscribe to Blogspot Blogger Guide Full RSS Feed

Subscribe to Blogspot Blogger Guide by Email

Print this post

Add To Google BookmarksStumble ThisFav This With TechnoratiAdd To Del.icio.usDigg ThisAdd To Reddit

Bookmark and Share

1 comment:

  1. dats ok but when i actually look at the post images they get automatically cropped
    just have a look http://spooky-designer.blogspot.com/2009/07/21-stunning-photoshoped-photographs-of.html
    Here I increased the image size to about 500X300 while writing tha post but the images were automatically scaled to 400X238 px which is the default size

    ReplyDelete