Friday, November 24, 2017

Automatically Resize Blogger Images to Fit Blog Post Area

Why We Need To Resize All Images In Blogger ?
There are following reasons why we need to customize these photos by giving proper dimension. 

  • Sometime we have used large magnitude or large dimension images which oftenly crossing the content borders. This will make our posts view ugly and readers will not satisfied with complete illustrative views.


  • By adding proper and exact match images according to your posts width and size robot will take it easier in understanding & will get fast indexing.



  • By using always same width & height images in post, guys trusted me it will surely increase your page loading speed faster several times. So we could easily decrease page loading time by applying this technique.


How To Resize All Photo Automatically In Blogger Post.

Blogger offers most of the tools you would need to add and resize Blogger images quick and easy. You can upload photos directly on the platform and even change the dimensions based on the type of content that you are attempting to produce. 
In order to do this, create a post and click on the small photo icon on the top toolbar next to the font style settings. A pop-up will show up on your screen asking you where you'd like to upload the image source. You have a choice between adding pictures from:
  • Your local computer
  • Previously uploaded images on the blog
  • Picasa Web Albums
  • An image URL


This is a very simple trick. You could easily customize this by following simple steps.

  • Go to blogger Dashboard: 
  • Go to Template/ Edit Html:
  • Now Search for  ]]></b:skin> tag 
  • Now past the below given code just above the ]]></b:skin> tag

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto; 
}

To spruce up the post even more, add the last three lines shown in green below:
.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px; 
}



This code will get rid of any borders and padding around the image and give it a much more natural look within the post. Hit the "Apply to Blog" button once you've finished adding it.

Note: This will only change the images set to Original size. To resize images with different sizes and apply this change on ALL the pictures added to your posts, add this CSS instead:

.post-body img {
width:100%;
height:100%;
display: block;
}

Please consider that, if you have posts with photos floating either on the right or left side of the content, they will automatically go full width.

After making the adjustments to both file size and CSS, you may go back to the post editor and repeat the Step 1 to add an image. When you return to the screen that asks for size, click on the "Original size" option and confirm your choice. Your newly added image will then be displayed with the adjustments that you created, so that it fits nicely the width of the post area.

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner