-->
Home » , , » How to Post Larger (HQ) Images in Blogger Posts

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)

Normal Picture without the hack

Image after applying the hack:

Normal Picture without 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/AVvXsEhAO_iAO1blUegf9isUJyVdY9w-HcsImYtz8juO6KXH2puNbQbEQdba4Dkkao1bGFUm1F_KXNoVxKt4hJBKjvKqKm21zxMcN1iDwkW63cOyRcPqqL8dpCk2hvd0L2tJ8QQuWYDQ5xxiU4jo/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/AVvXsEhAO_iAO1blUegf9isUJyVdY9w-HcsImYtz8juO6KXH2puNbQbEQdba4Dkkao1bGFUm1F_KXNoVxKt4hJBKjvKqKm21zxMcN1iDwkW63cOyRcPqqL8dpCk2hvd0L2tJ8QQuWYDQ5xxiU4jo/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/AVvXsEhAO_iAO1blUegf9isUJyVdY9w-HcsImYtz8juO6KXH2puNbQbEQdba4Dkkao1bGFUm1F_KXNoVxKt4hJBKjvKqKm21zxMcN1iDwkW63cOyRcPqqL8dpCk2hvd0L2tJ8QQuWYDQ5xxiU4jo/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/AVvXsEhAO_iAO1blUegf9isUJyVdY9w-HcsImYtz8juO6KXH2puNbQbEQdba4Dkkao1bGFUm1F_KXNoVxKt4hJBKjvKqKm21zxMcN1iDwkW63cOyRcPqqL8dpCk2hvd0L2tJ8QQuWYDQ5xxiU4jo/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.

Ads by AdGenta.com

If you liked this article, subscribe to the feed by clicking the image below to keep informed about new contents of the blog:

Related Post


Yahoo!    Personals


123inkjets.com    - Printer Ink, Toner, & More

  • Get Paid     to Blog About the Things You Love


iPowerWeb    Web Hosting


Linux Links



0 commenti:

Post a Comment

Random Posts

Recent Posts

Recent Posts Widget

Popular Posts

Labels

Archive

page counter follow us in feedly
 
Copyright © 2014 Linuxlandit & The Conqueror Penguin
-->