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

  • Fake ID Card Generator For Facebook Verification
    In this blog we had briefed different reasons why your Facebook ID is getting temporarily locked. Facebook Security automatically lock d...
  • AdSense achievement card
    The most popular and leading legit advertising platform is Google AdSense where billions of people earning money by monetizing their...
  • How to change facebook group name after 5k members
    HOW TO SETUP FACEBOOK GROUP then read this article. You can only change the name of Facebook group if you are the admin of that GROUP and...
  • How To Create a Google+ Community for Blogger
    Do you want to create a Google+ community for your business or blog? Here is a simple guide. The very first thing before creating a G...
  • How To Add a Digg Button in Blogger Post
    Digg : -  Digg is a place for people to discover and share content from anywhere on the web. From the biggest online destinations to the...
  • How to verify your Google Adsense Account
    Want to earn money online ? Google Adsense is the best advertising network to generate revenue for webmaster and bloggers. It is no...
  • 6 SEO Strategies
    Developing SEO strategies that can drive an immense amount of traffic to your site within a month is not an easy task, especially if y...
  • Edit Blogger Mobile Templates
    There is some Good news from the Blogger Team on the Blogger Code Blog . If you have enabled the Mobile Templates, you will be able...
  • Verify Facebook ID in Minutes with other names
    verify Facebook ID in few minutes with other names – Afraid to get blocked by facebook? Check my trick to verify your Facebook accoun...
Template by Malik HassanHome - Sitemap - Privacy Policy - Terms And Conditions - Disclaimer - Author