How To Add A Responsive Image Banner On Blogger?

As you can see we've added a responsive image which can fit the layout of our site and by responsive we mean it will fit the layout of whatever device you're using at the moments so there won't be much need to launch duplicate banners for different devices.

This is the same mechanism Google uses on their AdSense account which we've used at some point and this is how we were able to pull it off. 

Please note these steps are applicable to Blogger users.

1. Head to the Blogger layout section of your website

2. Navigate anywhere or in my situation the body section of my site 

3. Click Add Widget and choose HTML/JavaScript 

Copy/paste this code 

"""

<style>

  .my-responsive-banner-container {

    width: 100%;

    max-width: 100%;

    overflow: hidden;

    text-align: center;

  }

  .my-responsive-banner {

    width: 100%;

    height: auto;

    display: block;

    border: none;

  }

</style>

<div class="my-responsive-banner-container">

  <a href="https://X.com" target="_blank" rel="noopener noreferrer" style="display: block;">

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi...jpg" 

 alt="Games" 

 class="my-responsive-banner" loading="lazy" />

  </a>

</div>

"""

Tips

• By href="https://X.com"  replace the URL link with your link to either a website or social platform

•  By img src="https://blogger.googleuserc..." replace the URL link for this one is for the image displayed above