How To Add Strictly Left & Right Ad Slots in Blogspot (Full 2026 Tutorial)

How To Add Strictly Left & Right Ad Slots in Blogspot (Full 2026 Tutorial)

 


How To Add Strictly Left & Right Ad Slots in Blogspot (Full 2026 Tutorial)

Want to add fixed left and right ad slots (sticky side ads) in your Blogger/Blogspot website?

These are commonly called:

  • ✅ Floating
  • ✅ Sticky Side
  • ✅ Left & Right Skyscraper

They stay visible while users scroll — increasing impressions and revenue.

This step-by-step guide will show you exactly how to add them properly and safely.

✅ Before You Start (Important)

✔ Recommended Ad Size: 300x600 (Skyscraper)
✔ Works best on desktop
✔ Hide on mobile to avoid policy violations
✔ Always follow Google AdSense policies

METHOD 1: Add Fixed Left & Right Using Theme Editor (Best Method)

This method makes ads appear on all blog posts.

Step 1: Backup Your Theme

Before editing:

  1. Go to Blogger Dashboard
  2. Click Theme
  3. Click Backup
  4. Download your theme

Always backup first ✅

Step 2: Add CSS Code

  1. Go to Theme
  2. Click Edit HTML
  3. Search for:
]]></b:skin>
  1. Just ABOVE that line, paste this CSS:
If your find this website so helpful, show us some love by clicking on our website ads 
<style>
.fixed-left-ad, .fixed-right-ad {
  position: fixed;
  top: 100px;
  width: 300px;
  height: 600px;
  z-index: 9999;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.fixed-left-ad {
  left: 10px;
}

.fixed-right-ad {
  right: 10px;
}

/* Close Button */
.close-ad {
  position: absolute;
  top: 5px;
  right: 5px;
  background: red;
  color: white;
  width: 22px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 50%;
}

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

Click Save.


If your find this website so helpful, show us some love by clicking on our website ads 

Step 3: Add HTML Ad Code

Now scroll down and search for:

</body>

Just ABOVE </body>, paste this:


If your find this website so helpful, show us some love by clicking on our website ads 

<b:if cond='data:blog.pageType == "item"'>

<!-- Left Ad -->
<div class="fixed-left-ad">
  <span class="close-ad" onclick="this.parentElement.style.display='none';">×</span>

  <!-- Replace below with your ad code -->
  <img src="YOUR-LEFT-AD-IMAGE-URL" width="300" height="600"/>
  
</div>

<!-- Right Ad -->
<div class="fixed-right-ad">
  <span class="close-ad" onclick="this.parentElement.style.display='none';">×</span>

  <!-- Replace below with your ad code -->
  <img src="YOUR-RIGHT-AD-IMAGE-URL" width="300" height="600"/>
  
</div>

</b:if>

✅ This ensures ads show ONLY on blog posts
✅ Not on homepage
✅ Not on static pages

Click Save Theme

Step 4: Add Google AdSense Code (If Using AdSense)

Replace the <img> section with your AdSense ad unit code:

Example:


If your find this website so helpful, show us some love by clicking on our website ads 

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
     crossorigin="anonymous"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXX"
     data-ad-slot="XXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Replace:

  • ca-pub-XXXX
  • data-ad-slot="XXXX"

With your real AdSense details.

✅ How It Works

  • are fixed using position: fixed
  • They stay visible while scrolling
  • Hidden automatically on screens smaller than 1300px
  • Close button allows user control

Important Layout Adjustment (Very Important)

If ads overlap your content:

Increase your blog content width or reduce ad width.

For narrow themes, change:

width: 300px;

to:

width: 160px;

And use 160x600 ads instead.

Best Practices for Ad Approval

✅ Don’t place too many sticky ads
✅ Always allow user close option
✅ Hide on mobile
✅ Avoid covering content
✅ Follow AdSense policies

Too many aggressive ads can cause:

  • Low user experience
  • High bounce rate
  • AdSense policy violation

Bonus: Smooth Slide Animation (Optional)

Add this inside CSS:


If your find this website so helpful, show us some love by clicking on our website ads 

.fixed-left-ad {
  animation: slideLeft 0.5s ease-in-out;
}

.fixed-right-ad {
  animation: slideRight 0.5s ease-in-out;
}

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

@keyframes slideRight {
  from {transform: translateX(100%);}
  to {transform: translateX(0);}
}

Final Result

✅ Left side sticky ad
✅ Right side sticky ad
✅ Shows only on posts
✅ Hidden on mobile
✅ Professional layout

Common Mistakes to Avoid

❌ Placing code inside wrong section
❌ Forgetting to close <b:if> tag
❌ Using large ads on small themes
❌ Not testing on different screen sizes

Conclusion

Adding strictly left and right ad slots in Blogspot:

✔ Increases ad impressions
✔ Improves revenue potential
✔ Keeps blog looking professional
✔ Works perfectly on desktop

If you want, I can also create:

  • ✅ A YouTube tutorial script
  • ✅ SEO meta description
  • ✅ Optimized blog title ideas
  • ✅ High RPM ad placement guide
  • ✅ Mobile anchor ad tutorial

Just tell me what you need 😊

Tags
Previous Post Next Post