Make Responsive Images in Blogger Post/Sidebar using CSS3

Description: A simple solution to make any Image into Responsive Image under Blogger posts or Blogger sidebars / footers. Responsive Image CSS3 Code for any Blog.

Advertisement
Have you a Blogger blog? If yes, are you using responsive images into your Blogger posts? If no, read this post to make any image from your Blogger post, sidebar or footer into responsive image. If you are using a responsive Blogger template, your images inside the Blogger posts would likely to have responsive image. If you are using Blogger default template or non-responsive template then you should also make your images responsive. We have seen many bloggers using default template which is not responsive having few images that are bigger than the post container width, and images overlapped its post container. That's why responsive images are also better for non-responsive templates too. Let you have a fixed width of your post container assuming 600px, and if you upload an image of 700px then this image will show from outside of your post container which is not a better user experience for your readers. Instead of it, you can make your images responsive inside your post container that will scale your 700px image into your 600px fixed post container. Therefore, here is a quick guide to make images into responsive images in your Blogger blog.

You may also read other Blogger responsive tutorials guide:

how to add responsive images in Blogger

Make your Images Responsive inside your Blogger Post

We'll add a CSS rule into our blogger template to make all of our Blogger post images responsively. Just copy the following code.

.post-body img, .bst-image img{
box-sizing: border-box !important;
height: auto !important;
max-width: 100% !important
}
.post-body .tr-caption-container img{
height: auto !important;
width: 100% !important
}


By placing this CSS code, you don't need to add extra code for different devices as it will take care all of its images size in different size display and rotations.

Go to Blogger dashboard -> Select your blog -> Template -> Edit HTML -> Click anywhere on the source code, press CTRL+ F and find ]]></b:skin> code. Just above to this code, paste our CSS code. Finally, hit on 'Save Template'.

You've done! Now each images you're using in your post would be responsive images.

Add Responsive Images into Blogger Sidebar / Footer

If you're using any third party Blogger template, your template may have different ids or classes for the sidebars and footer. Also, different Blogger template has different ids or classes. Therefore, we'll make inline CSS rule that will work on each Blogger templates.

Copy the following code, and paste into HTML/JavaScript under gadget in your Blogger layout.

<img class='bst-image' src='your image URL direct link'/>

You can use this code in your gadget section under sidebars or footers.

I have added a class 'bst-image' into above img tag that I have already declared it into above CSS rule. If you don't want to make your images responsive for your Blogger posts then you can remove all the CSS rules except 'bst-image' class.


Like Us on Social Media
Share this article
Copyright © 2015 BloggerTipsSEOTricks.com • All Rights Reserved.
Powered by Blogger
back to top