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.
How To Make Responsive Images For Blogger
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.
