How To Add Sticky Left And Right Ad Slots In Blogger (Step-by-Step)

If you’re looking to boost your ad revenue or improve ad visibility on your Blogger website, adding sticky left and right ad slots is one of the most effective techniques. These fixed-position ads remain visible as the user scrolls, increasing your chances of getting clicks and impressions.

In this guide, I’ll show you how to add sticky left and right ads in Blogger using a simple HTML/CSS method. No need to modify your entire theme — just follow along!

Benefits of Sticky Side Ads

Increased visibility – Ads are always on-screen
Better CTR – Eye-level placement leads to higher click-through rates
Non-intrusive – Doesn’t block content or interfere with user experience
Works on desktop devices – Ideal for widescreen layouts

📌 Before You Start Make sure:

Your blog theme supports wide layouts.
You’re not violating any Google AdSense policies (don’t overlap content or cover essential navigation).
You test on desktop — this method is not intended for mobile responsiveness.

Sticky Left & Right Banner Ads in Blogger

Step 1: Add This Code Inside Your Blogger Post/Page Using HTML Mode

<!-- Sticky Left Ad -->
<div class="fixed-left-ad">
  <span class="close-ad" onclick="this.parentElement.style.display='none';">×</span>
  <a href="https://www.hostinger.com/in" target="_blank" rel="noopener">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoU2etUPoSTkl_SPpTfmN5h7OoGLFd6sMC3dyBdoA_ZdXUfKTrzWbmPblbreFm7VWI6kQbbLBVrr-L5jn_swdoQO-z3S-Id_OBBGnu6-3ysQ3iUijxrGsaBMDcHi3WicxptlYufxKGrWRoQXC0uQSqfXU4JQUEObECJMiBEsQ5XPZCAM-dTsVRLaJa6VP7/w320-h640/300x600.png" alt="Left Ad">
  </a>
</div>

<!-- Sticky Right Ad -->
<div class="fixed-right-ad">
  <span class="close-ad" onclick="this.parentElement.style.display='none';">×</span>
  <a href="https://www.hostinger.com/in" target="_blank" rel="noopener">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvulg2BPz0nCiCP-PrIEg0EH8JbvkkndR0LFlQFqCPrDmSrBIrvt5Zsjlt35ITcIXTDVrTRo6LZzsw9pyoMFzOvbXPijpcQHcuNYsAhPbwyXe_1IHcnd2Bbgx3xKxFTFlDFKYdfGmWezDJKCC2xRVPkCnxPQOOKTlk7rohsrwXqtX0bmnMryAXJFUIJ3q9/w320-h640/1952x1000.png" alt="Right Ad">
  </a>
</div>

Step 2: Add This CSS Code to Your Blogger Website

<style>
  /* Sticky side ads */
  .fixed-left-ad, .fixed-right-ad {
    position: fixed;
    top: 80px;
    width: 320px;
    z-index: 9999;
    opacity: 0;
    animation: slideIn 0.8s ease-out forwards;
  }

  .fixed-left-ad {
    left: 0;
    animation-name: slideInLeft;
    animation-delay: 1s;
  }

  .fixed-right-ad {
    right: 0;
    animation-name: slideInRight;
    animation-delay: 1s;
  }

  .fixed-left-ad img, .fixed-right-ad img {
    width: 100%;
    height: auto;
    display: block;
    padding: 20px;
  }

  .close-ad {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background-color: #eee;
  color: #333;
  border-radius: 50%;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: background 0.3s, color 0.3s;
  z-index: 10001;
}
.close-ad:hover { background-color: #333; color: #fff;}

  @keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0;}
    to { transform: translateX(0); opacity: 1; }
    }

  @keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1;  }
  }

  @media (max-width: 1300px) { .fixed-left-ad, .fixed-right-ad {display: none;} }
</style>

Load Ads Only on Post Pages (Using Blogger Conditional Tags)

To make sure the ads show only on blog posts, wrap the HTML code like this:

<b:if cond='data:blog.pageType == "item"'>
  <!-- Place ad code here -->
</b:if>

For Adsense Ads

<!-- Sticky Left Ad -->
<div class="fixed-left-ad">
  <span class="close-ad" onclick="closeAd(this)">×</span>
  <ins class="adsbygoogle"
       style="display:inline-block;width:300px;height:600px"
       data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
       data-ad-slot="1111111111"></ins>
</div>

<!-- Sticky Right Ad -->
<div class="fixed-right-ad">
  <span class="close-ad" onclick="closeAd(this)">×</span>
  <ins class="adsbygoogle"
       style="display:inline-block;width:300px;height:600px"
       data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
       data-ad-slot="2222222222"></ins>
</div>

<!-- Load AdSense Script -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

CSS Code

<style>
/* Sticky Ad Boxes */
.fixed-left-ad, .fixed-right-ad {
  position: fixed;
  top: 80px;
  width: 300px;
  height: 600px;
  z-index: 9999;
  opacity: 0;
  animation: fadeInSlide 0.8s ease-out forwards;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  border-radius: 8px;
  transition: opacity 0.5s ease;
  overflow: hidden;
}

.fixed-left-ad {
  left: 0;
  animation-name: slideInLeft;
}

.fixed-right-ad {
  right: 0;
  animation-name: slideInRight;
}

/* Close Button */
.close-ad {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background-color: #eee;
  color: #333;
  border-radius: 50%;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: background 0.3s, color 0.3s;
  z-index: 10001;
}
.close-ad:hover {
  background-color: #333;
  color: #fff;
}

/* Hide on smaller screens */
@media (max-width: 1300px) {
  .fixed-left-ad, .fixed-right-ad {
    display: none;
  }
}

/* Slide & Fade Animations */
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
</style>

Let me know How the code working in your website. If you face any issue, do let us know in comments. Also, Comment if you want any improvement on the code.

▶️ Watch Also: How to Add a Bottom Sticky Ad in Blogger
▶️ More: How to use Blogger Conditional Tag to Load Widgets on Specific Page

Final Words

Sticky left and right ads are a smart way to enhance your monetization strategy on Blogger — especially if you have good desktop traffic. With a clean layout and proper sizing, these ad slots can bring great results without disturbing your readers.

If you found this helpful, share it with other Blogger users or drop a comment below if you face any issues!