Breaking News:

latest

How to Automatically Resize Blogger Images to Fit Blog Post Area

Hello and Welcome to GetWebInfo. Here you can learn how to automatically automate the Blogger Images to Blog Post Area. Blogger offers quick...

Hello and Welcome to GetWebInfo. Here you can learn how to automatically automate the Blogger Images to Blog Post Area. Blogger offers quick and easy Blogger offers most of the tools you need to add and resize. You can upload photos directly on the platform and even change the dimensions based on the type of content that you are trying 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 setting. A pop-up will show up on your screen asking you where you want the image source to upload. You have a choice between adding pictures from


  1. Your Local Computer
  2. Previously uploaded images on the blog
  3. Picasa Web Albums
  4. An Image URL 
  5. From Online Photo Stock Images Sites

Once you selected the image that you want to use, you'll see four images sizes to choose from - Small medium. large and X-Large images size: it also gives you the option to determine the alignment. If you find that the four preset dimensions aren't providing the outcome to your site desire.


Step 01: Retain The Image Quality

If you know that you are going to need to resize the Blogger images once you post them to your blog, make sure you start a photo larger than 640px dimensions of x-large option. It is easy to bring an image down in size, but if you try to make a small image larger, you will get some of the quality lost. Just make sure that you are looking for a file size containing the image: the larger the file the slower it will load on your website.

Photoshop is a powerful image editor that can help you resize your blogger images or post your images before you post, but it is also a costly investment. There are also many other freeware image editors that can perform the simple question of resizing the photo. Determine what size you want to do in the page and manually resize Blogger images to those dimensions other users found that 700px is a pretty flexible size that works well on posts.

Once you have your photo resized and added to your post, click on it and select the Original Size option. If your photos are going to be more than the post editor, it probably means that they are the body of your post larger than that, so let's fix it and make them fit.



Step 02: Modify The Site's CSS

Nex you;ll want to modify the CSS of your Blogger template to accommodate the adjustment, Don't worry you won't need much coding experience to complete this task.

Open up your Blogger Dashboard and Go to "Template" Customize. You'll see the option for Advanced, click on it and find your way to the "Add CSS' Tab paste the following CSS code inside the empty box.

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


Adding the code to the section, automatically adds it between the <b:skin>....<b:skin> tags of your Template (Template> Edit HTML, and The ]]></b:skin> tag). SO no matter whether you add it above ]]></b:skin> or with in the Add CSS box the efect should be the same.

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 ride 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;
}

Step 03: Create A Blog Post

After making the adjustments to both file size and CSS, you may go back to the post editor and repeat the Step 01 to add an image. When you return to the screen that asks for size, click on the "Original size" Option and confirm your choice.

I hope this article is really helpfull for you, if you have any problem so please post a comment on this article i will reply as soon as i can do.

No comments