Post Larger Images in Blogspot Posts

This is one of the most important and wanted hack for bloggers. Many bloggers want to post the images in larger size (HQ) but they can not do so because the image is automatically converted into thumbnail after uploading irrespective to image size.

But with this trick you can post the large pictures in the blogger posts. For example look at the picture on your right side. And after applying the hack it will be larger in size as shown below. Lets see how to perform this hack.

HOW TO POST LARGE SIZED IMAGES IN BLOGGER POSTS:

• First of all see how much space you have in the post body of your blogger template. For example in our blog it is (currently) about 570px.
• Leave some space, say 20px,  for padding etc. Now the available size for image is about 550px.
• Now, Go to Layout » Edit html and find this:
  

]]></b:skin>

• Add these below lines before the above line:

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

Change the value of red number according to the layout and available space in your blogger template.

However if you already img{ tag in your template, then only add the below lines

max-width: 550px;
width: expression(this.width > 550 ? 550: true);

• Save the changes.
• Now, while doing your posts, upload the images normally like you did previously. Once the image is uploaded, go to Edit html tab, and the image code will look something like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 280px; height: 400px;" src="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s400/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

• All you have to do is Just remove that bolded text (width and height attributes) and replace s400 to s800. So, the final code looks like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://4.bp.blogspot.com/_Toi-rh0Nm00/Sj_K-nCkxWI/AAAAAAAADbg/8QRq-hHP4xM/s800/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

• Now the image will be in large size.