How to Post Larger (Especially HQ) Images in Blogger Posts

In this post I am going to show you how to post extra large images in blogger posts. :-)
This is one of the most searched for Blogger hacks. It makes it possible to post big size pictures in Blogger posts.
Normally, If you upload a large image to Blogger(with large thumb size selected), it will automatically resize it and then post it as thumbnail . Moreover, the quality of the resized image is very poor. So, if you want make your images look cleaner and sharper, this trick will come handy.
Normally Uploaded Image (with large thumbnail selected):

Image after applying the hack:

Here is how to do this:
1. Calculate how large you want the displayed image to be (normally, the size will be just a bit less than your main body width). Suppose the main body width is about 560px. So, the maximum width for a large image is 560px. But to make the image looks nice, we have to give some padding to it. Therefore you might want to choose a width which is a bit less than the post body width, for instance 550px.
2. Sign in to Blooger, then go to Dashboard --> Design --> Edit HTML.
Find (Ctrl + F) the line:

]]></b:skin>

 

Add the following code before that line:

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

Change the value in blue depending on the calculations made in the previous step.
Important: Please check if you have the img{ tag already in your template. If its there, just add the additional couple of lines to it.

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

 

3. Save the changes.
4. Now, while doing your posts, upload the images like you did before. Once the image is uploaded, go to the Edit HTML tab. There you will find that the image code looks something like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMZfwawuBYbkI5F7WkpO6oc9h5IjRbBhVz-SoURJiw4NL3LGrDTsoi0ces18qbIx_Ms_rouGLPAKi9PpFeOAg9-b6GhydHAKxvoL-qBRDU-WXL2BMA22TzGzZBhtHaRrrEhd5K1IVyuTGm/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 280px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMZfwawuBYbkI5F7WkpO6oc9h5IjRbBhVz-SoURJiw4NL3LGrDTsoi0ces18qbIx_Ms_rouGLPAKi9PpFeOAg9-b6GhydHAKxvoL-qBRDU-WXL2BMA22TzGzZBhtHaRrrEhd5K1IVyuTGm/s400/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

 

All you have to do is remove the text in green (width and height attributes) and change s400 to s800.
The final code should look like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMZfwawuBYbkI5F7WkpO6oc9h5IjRbBhVz-SoURJiw4NL3LGrDTsoi0ces18qbIx_Ms_rouGLPAKi9PpFeOAg9-b6GhydHAKxvoL-qBRDU-WXL2BMA22TzGzZBhtHaRrrEhd5K1IVyuTGm/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMZfwawuBYbkI5F7WkpO6oc9h5IjRbBhVz-SoURJiw4NL3LGrDTsoi0ces18qbIx_Ms_rouGLPAKi9PpFeOAg9-b6GhydHAKxvoL-qBRDU-WXL2BMA22TzGzZBhtHaRrrEhd5K1IVyuTGm/s800/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

 

That´s all! Now your uploaded image will look big in the post.