#16 Blogger Tutori | Basic Settings in Blogger

Basic Settings in Blogger This is very important to configure your  Blog  using  Basic Settings  in your  Blogger Dashboard . In this tutorial, you are going to learn how to — Manage Title and Description. Manage Privacy — list your Blog on Blogger and allow Search Engine to crawl your site. Add Custom Domain to your blog. Manage HTTPS Redirect. Manage Permissions — add Authors to your blog and who can see it. Go to Blogger Basic Settings Sign in to Blogger  with your  Google Email  and  Password . In the left top, click this  Drop Down Icon  and choose the blog. In the left menu, click  Settings → Basic . Title, Description & Privacy Settings Title  — You can edit or change your blog title from here. Description  — A short description about your Blog. Maximum Characters are 500. Privacy  — Set your blog here for Blog listing and Search engine visibility. Blog listing  — Select  “Yes”  to list your blog on Blogger. By default, a  Navbar  is appeared at the top of the blogs a

#15 Blogger Tutorial | Make Images Auto Resize

Make Images Auto Resize

Images might not fit with your Blog posts area, specially when you use a default Blogger Template. In this article, I will show you how to make images auto resize to fit Blog post area using CSS. Even you can learn from this tutorial, how to make your blog post images responsive for small devices like Mobile, iPad and others.

Blogger Tutorial

If the images you’ve uploaded in your blog are larger than your post area, then obviously they are going to poke out of bounds. It means the images will overlap its parent area.

See the image below. The Before image is overlapping the post area and the After image has been fixed using CSS is perfect —

A-sample-image-before-and-after-fitting-Blog-post-area

How to Make Images Auto Resize

I will show you two methods to make your Blog post images auto resize to fit the post area — one is using CSS and the other is resizing the blog post images.

Method #1: Make Images Auto Resize using CSS

  • In the left top, click this Down-Arrow-IconDrop Down Icon and choose the blog.
  • In the left menu, click Template
  • Click Customize under Live on Blog.
  • In the left menu, click Advanced → Add CSS.

When you will click Add CSS, the following custom CSS area will appear —

Custom-CSS-Area-on-Blogger-Template-Designer

Add the following CSS code into this area and click Apply to Blog in the top right corner. Reload your blog page to see the changes.

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

Now you should see the images have been resized and fitted their post areas automatically.

What to Do if the CSS Code above not Work

If the code above doesn’t work, that means the same styles already exist in your template. So to make it work, we have to override the existing styles using !important rule at the end of the values. Use the following CSS instead of the above —

.post-body img {
  max-width: 100% !important;
  height: auto !important;
}

What to Do if the images Contain Border and Padding

You probably think you are done, but not actually, there is still one problem. What if the images contain border and padding like this —

Image-with-Padding-and-Border

If the images contain border + padding will expand to the right and occupy an unexpected space of the post area. But how much will expand that depends on the values (size in px) of those properties. Look at the image below —

The-image-occupied-extra-space-for-containing-Padding-and-Border

You see the image above, the highlighted area, actually occupied an unexpected space and expanded to the right for containing padding and border.

Although you can control images using max-width property to fit your Blog post area, but border and padding cannot be controlled in this way. To control them instantly when the images will be Auto Resize, use the following CSS instead of all the codes above.

The complete code (recommended to use):

.post-body img {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

  • max-width: The max-width property is used to set the maximum width of an element. If you use max-width:100%; for img elements, the images will expand up to their parent element and never overlap your Blog post area.
  • height: If you use height:auto; the height of the images will be resized automatically in proportion to their width.
  • box-sizing: When you add border and padding to an element, the width/height of the element will expand. Because, the value of border and padding properties is included on the outside of the element’s box. But when you use box-sizing:border-box; the border and padding values are moved inside the element’s box, cutting into the width/height of the box rather than expanding it. The same way we’ve used for our blog post images. Look at the image below to compare —

  • Content-without-box-sizing-and-with-box-sizing

Never use width: 100% to make images Responsive

Some people may suggest you to use width: 100% to make your Blog post images responsive. But never do this! I am telling you why.

The width property works almost same the max-width does. But there is a big difference between the two properties.

  • The width property: If you use width: 100%, both the larger and smaller images will be resized up to their post area. So a small image also will expand to fill its post area and the result, the image will be blurry.
  • The max-width property: If you use max-width property, only the bigger images will be resized and fitted their post area. But it will never force the images which are smaller than their post area to be expanded.

Please see the following image to compare between width and max-width properties —

The-max-width-Property-does-not-force-to-expand

Note: You can also add the code directly to your Template before ]]></b:skin>. But don’t do this, if you are not familiar with Blogger template codes. Because if you miss anything can cause your template to break down.

Method #2: Resize images to fit your Blog post area

Resizing images is another method to fit your Blog post area. To resize your blog post images —

  • In the left menu, click Posts.
  • All posts of your Blog will appear, click the post title you want to edit or click Edit.
  • Click on the image is showing in the Post editor.
  • bubble panel will appear, now you can resize and align the image.

Bubble-panel-on-the-image-in-Blogger-post-editor

I recommend you not to upload very large size images which will make your site heavy and take longer to be loaded.

Note: This method #2 is not a permanent solution. So you are recommended to use the method #1 to avoid the future problems.

Comments