Tuesday, December 29, 2009

How to post larger images in blogger

Sometimes you want to post bigger images inside your blog post. But you upload a good resolution image in your blogger post and while posting you specified size as extra large but it even become resized and thus you got poor quality of images.
In order to make a large sized image you simply have to follow following steps.

Step 01: Choose a good resolution image that you want to upload for your blog post. By good resolution I mean any image over resolution 1024 x 768.

Step 02: Check your blog main body width. For my blog it is around 920 px. So the maximum sized of the image can be 920px. But to make the image looks nice, we have to keep some padding to the left and right side of it. As our main body size is 920 px, so make the image width to 900px.

Step 03: Using the compose option you simply click "Insert Image" icon and upload image. If you make it X-large while inserting image you will see by default it is taking 640px width and there is no width and height tag associated with the image. You can manually add an IMG tag too and can insert an image.

Step 04: Now you simply need to add width attribute of the image to your desired size. Here I also removed the anchor tag. My code is like below.

<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://2.bp.blogspot.com/_8O68IaFjsdA/SzsDQEmkgbI/AAAAAAAAAXk/YYYwK0RbxBA/s640/Saint_Martin_s_Island_southernmost_point_Bay_of_Bengal.JPG" width="900/" />
</div>

which results,
saint martin bangladesh

You are done now.

However, if the above trick does not work then inside your blogger template after the line
]]></b:skin>
you need to add following codes:

img {
max-width: 900px;
width: expression(this.width > 900 ? 900: true);
}

Related Documents
http://arjudba.blogspot.com/2009/08/how-to-increase-your-technorati.html

http://arjudba.blogspot.com/2009/07/how-to-setup-google-webmaster-tool-for.html
http://arjudba.blogspot.com/2009/06/how-to-get-targeted-backlinks-to-your.html
http://arjudba.blogspot.com/2009/07/draw-google-adsense-money-using-western.html
http://arjudba.blogspot.com/2009/06/different-types-of-web-hosting-services.html
http://arjudba.blogspot.com/2009/07/how-to-add-site-to-yahoo-directory.html
http://arjudba.blogspot.com/2009/07/how-to-add-site-to-google-directory.html
http://arjudba.blogspot.com/2009/12/how-to-know-when-googlebot-last-crawled.html
http://arjudba.blogspot.com/2009/12/how-to-add-different-meta-tags-to.html
http://arjudba.blogspot.com/2009/12/how-to-disable-or-remove-blogger.html

http://arjudba.blogspot.com/2009/12/scrolling-text-effect-html-code-with.html

No comments:

Post a Comment