[Hack] How to Post Larger (HQ) Images in Blogger Posts

This is one of the most wanted blogger hacks, which 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 . But, the image quality of the resized image is very poor. So, to make the image look more clean and sharper, this trick will come handy.

Normally Uploaded Image: (with large thumbnail selected)


Image after applying the hack:



So, lets learn how to do this..

1.First, calculate how much image size(large) you want to display ( normally, its just a bit less than your main body width). Suppose, take this blog as an example, the main body width is about 570px. So, the maximum width to post a large image is 570px. But, to make the image looks nice, we have to give some padding to it.so,choose the width which is a bit less than the post body width.. like 560px.

Now, Go to Layout » Edit html

Find this

]]></b:skin>

Add this before that line:




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

Change the value in red depending on the previous step.

Note: Do 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);





Save the changes.

2. 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIRmE-h-lCamqjaz5Bcw0jgas3KRpILqzkRczDjaKVfFEUrHCzy83XJG6MmrU8XFGUZM8WBMlcYxEwB6xQpcXVdXtTfkRz7RuRPYgWWdpX0AmKYflUhIB7ztXbwaxwFKD_olb8ffoGD-gh/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/AVvXsEgIRmE-h-lCamqjaz5Bcw0jgas3KRpILqzkRczDjaKVfFEUrHCzy83XJG6MmrU8XFGUZM8WBMlcYxEwB6xQpcXVdXtTfkRz7RuRPYgWWdpX0AmKYflUhIB7ztXbwaxwFKD_olb8ffoGD-gh/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIRmE-h-lCamqjaz5Bcw0jgas3KRpILqzkRczDjaKVfFEUrHCzy83XJG6MmrU8XFGUZM8WBMlcYxEwB6xQpcXVdXtTfkRz7RuRPYgWWdpX0AmKYflUhIB7ztXbwaxwFKD_olb8ffoGD-gh/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/AVvXsEgIRmE-h-lCamqjaz5Bcw0jgas3KRpILqzkRczDjaKVfFEUrHCzy83XJG6MmrU8XFGUZM8WBMlcYxEwB6xQpcXVdXtTfkRz7RuRPYgWWdpX0AmKYflUhIB7ztXbwaxwFKD_olb8ffoGD-gh/s800/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

Done! Now, your uploaded image will look big in the post.