SkyUrdu | The Largest Hub Of Tutorials
Select Menu
  • Home
  • Google Adsence
    • Google Adsence Tricks
    • Supports Languages
    • 11 Tips For Adsence
    • 12 Tips For Adsence
    • 100% Approval Tip
    • Achievement Card
    • Adsense Revenue
    • Verify Account
  • Make Money
    • Earn With Bidvertiser
    • Earn With Freelance
    • Earn With Blogging
    • Earn With You Tube
    • Earn With Ads Cash
    • Earn With Adsence
    • Earn With Infolinks
    • Earn With Typing
  • Blogging
    • 404 ERROR Page
    • Google+ Fallow
    • BackUP/Restore
    • Mobile Templet
    • Custom Domain
    • Blogger Tricks
    • Custom Fonts
    • Templetes
  • SEO
    • Google Algorithm
    • Google Analytics
    • Select Keywords
    • Blogger Vistors
    • Alexa Ranks
    • Robots.txt
    • SEO Tricks
    • SEO Tools
  • Social Media
    • Whatsapp
    • Facebook
    • Pinterest
    • Google+
    • Twitter
    • Skype
    • Imo
    • VK
  • Networks
    • Easypaisa
    • Mobicash
    • Mobilink
    • Telenor
    • Warid
    • Ufone
    • Zong
  • Much More
    • How To
    • Much More
Home » How To » How To Make Responsive Images For Blogger

How To Make Responsive Images For Blogger

Unknown
Add Comment
How To
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.
Share This!--- Facebook Twitter Google+

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)

Search Hare

Populer Posts

Template by Malik HassanHome - Sitemap - Privacy Policy - Terms And Conditions - Disclaimer - Author