Automatcally resize images to blogger post area

Today my post about how to automatically resize your post images on Blogger. This tutorial will show you how to make your post images the same width and make them fit your blog post area perfectly to help improve the look of your blog. The code below automatically sets the height so that it keeps the original proportions and your images won’t look distorted.

DOWNLOAD A BACKUP OF YOUR TEMPLATE BEFORE TO DO THESE STEPS

Always download a backup of your template before editing any HTML/CSS. Find out how to do so here.

STOP OTHER IMAGES FROM CHANGING

If you have a signature in your blog post which has also been made larger, check out these alternative ways of adding a signature to blogger that won’t be affected by the above code or use your div id to resize the image like

.signature { width: 120px !important; }.

If you have other images within your post you may need to add some code to tell Blogger not to change the size, for example for hover over pin it buttons you can add .pinimg { width:95px !important; } to your CSS before ]]></b:skin> to make the pin it button the correct size again or if using InLinkz you can add ._inlinkzI {width: 100px !important;} before ]]></b:skin> to make the link up entries the correct size again.

IMAGE ALIGNMENT

You may then have to add the following code to Template > Edit HTML > above ]]> </b:skin> and alter the value in pink to move your images left or right into the post area if they are overflowing the post area.

.post-body img { margin-left: -30px;}

or to move it right

.post-body img { margin-left: 30px;}

METHOD 2 – AUTOMATICALLY RESIZE BLOGGER IMAGES

An alternative way is by using this script by Blogxpertise. Althogh its don't work perfectly with all templates but its good option so you can try it.

Add the following script to Template > Edit HTML > above </head> .

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[/**this script was written by Confluent Forms LLC http://www.confluentforms.comfor the BlogXpertise website http://www.blogxpertise.comany updates to this script will be posted to BlogXpertiseplease leave this message and give credit where credit is due!**/$(document).ready(function(){ // the dimension of your content within the columns var areawidth = $('#Blog1').width(); $('.post-body').find('img').each(function(n, image){ var image = $(image); var height = image.attr('height'); var width = image.attr('width'); var newHeight = (height/width * areawidth).toFixed(0); image.attr('width',areawidth).attr('height',newHeight); var greater = Math.max(areawidth,newHeight); image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + greater)}); });});//]]></script>

You may then have to add the following code to Template > Edit HTML > above ]]></b:skin>and alter the value in pink to move your images back into the post area if they are overflowing the post area.

.post-body img { margin-left: -30px;}

or to move it right

.post-body img { margin-left: 30px;

May 30, 2014

Automatcally resize images to blogger post area

DOWNLOAD A BACKUP OF YOUR TEMPLATE BEFORE TO DO THESE STEPS

You May also Like to Read:-

STOP OTHER IMAGES FROM CHANGING

IMAGE ALIGNMENT

METHOD 2 – AUTOMATICALLY RESIZE BLOGGER IMAGES

You May also Like to Read:-

0 comments:

-: SUBSCRIBE US :-

Popular Posts

Labels

Twitter Feed