-->
Seguimi in Twitter Seguimi in Facebook Seguimi in Pinterest Seguimi in LinkedIn Seguimi in Google+ Seguimi  in Stumbleupon seguimi  in instagram Sottoscrivi il feed
Blender, graphic, software, open source, Linux LibreOffice, open source, openoffice Gimp, graphic, software, open source, Linux kernel, Linux, software, open source Linux, distributions, Ubuntu, Linux Mint, Fedora, Mandriva Jamin, gpl, library, open source matroska, multimedia, container, linux pcman, file manager, linux LuninuX, distribition, Linux, open source Linux, infographic, history
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="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>

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

My Blog List

Recent Posts

Recent Posts Widget

Popular Posts

Labels

Archive

Followers

Images Photo Gallery

page counter Mi Ping en TotalPing.com
 
Copyright © 2014 Linuxlandit & The Conqueror Penguin