How to Post HQ Images in Blogger.
0
komentar
This is one of the most wanted blogger Tricks,which makes it possible to post big size and also High Quality pictures in blogger posts.
Normally,If you upload a large/High Quality 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 helpful.
Lets See how to do this:
Normally,If you upload a large/High Quality 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 helpful.
Lets See how to do this:
- First, calculate how much large image size you want to display.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 Blogger>Login>Design>Edit HTML>Tick the expand widget templates.
- Find the Below Line:
]]></b:skin>
Add this code before the line:img {
max-width: 560px;
width: expression(this.width > 560 ? 560: true);
}Now Change the value in Black .Note ThatDo 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);Now Save the applied 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.
Nowhe 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>Its Done,Now you can see your uploaded Picture will look Bigger.
Categories:
TiPs N TriCks
