How to Add Left & Right Floating Ads in Blogger (Desktop-Only, Responsive, and User-Friendly) - KodeRian

Display advertising is still one of the simplest ways to monetize a Blogger site. The challenge? Most layouts waste valuable space on ultra-wide screens. Those blank left and right margins are prime real estate—especially on desktops—yet they often sit empty. In this tutorial, you’ll learn how to add floating ads on the left and right sides of your Blogger layout that stay visible while readers scroll, without covering content or breaking mobile UX.

We’ll implement a lightweight, CSS-first approach with a couple of optional enhancements: a dismiss (close) button per ad, a desktop-only rule to keep mobile clean, simple accessibility attributes, and suggestions for ad sizes. If you’ve ever polished small UI details (like when you customize scrollbar Blogger themes or tweak a Blogger CSS scrollbar), this will feel familiar: clean, minimal code with attention to user experience.

---

What Are Floating Ads—and When to Use Them

Floating ads are ad units that are positioned along the left and right edges of the viewport and remain visible while the page scrolls. Done right, they:

• Occupy unused side space on desktop screens (e.g., 1280px+), keeping your main content unobstructed.
• Do not overlap article text or core navigation.
• Provide a consistent placement that advertisers and ad networks like.

Done wrong, they can annoy users or violate ad policies. This guide focuses on a desktop-only, non-intrusive pattern that your readers (and most ad networks) are far more likely to accept. Always verify with your specific ad network’s policies before deploying any custom placements.

---

How the Solution Works

You’ll add two fixed containers—one anchored to the left, one to the right—that each holds a vertical ad unit (commonly 160x600 or a responsive vertical unit). We’ll include a Close button so visitors can dismiss a side ad, and we’ll hide both units on small screens using a media query. Optionally, you can persist the dismiss state with localStorage so closed ads stay closed for that visitor’s session.

Here’s the copy-paste setup that matches the input article idea, then we’ll expand with best practices and enhancements.

---

Step-by-Step: Add Floating Ads to Blogger

Step 1 — Open the Layout

1. Go to your Blogger Dashboard.
2. Open Layout → click Add a Gadget in any area that renders site-wide (e.g., Sidebar).
3. Choose the HTML/JavaScript gadget.

Step 2 — Paste the HTML + CSS (base version)

Insert the following code into the gadget. Replace the red comment blocks with your ad code (AdSense/partner tag). This version follows the structure you shared, with a few small accessibility improvements.

<style scoped type="text/css">
/* === Floating Ads (Desktop-Only) === */
.fixed-leftSd,
.fixed-rightSd{
  position:fixed;
  top:60px;               /* adjust if you have a sticky header */
  width:160px;            /* common left/right skyscraper width */
  height:600px;           /* suggested max height; ad can be responsive */
  z-index:9999;
  transform:translateZ(0);/* hint: promote to its own layer */
}

.fixed-leftSd{ left:0; }
.fixed-rightSd{ right:0; }

/* Close button */
.close-fixedSd{
  position:absolute;
  width:160px;
  height:15px;
  line-height:15px;
  font-size:11px;
  font-weight:400;
  top:-15px;
  left:0;
  text-align:center;
  background:#e0e0e0;
  color:#666;
  padding:5px 0;
  cursor:pointer;
  user-select:none;
}

/* Hide on small screens to avoid blocking content */
@media screen and (max-width: 800px){
  .fixed-leftSd, .fixed-rightSd{
    display:none !important;
    visibility:hidden !important;
  }
}
</style>

<!-- LEFT floating ad -->
<div class="fixed-leftSd" role="complementary" aria-label="Left floating ad">
  <div class="close-fixedSd" role="button" tabindex="0"
       aria-label="Close left ad"
       onclick="this.parentElement.style.display='none'">CLOSE ADS</div>

  <!-- <!-- Simpan kode iklan di sini --> -->
  <!-- Example AdSense (replace with your code):
  <ins class="adsbygoogle"
       style="display:inline-block;width:160px;height:600px"
       data-ad-client="ca-pub-XXXX"
       data-ad-slot="YYYY"></ins>
  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  -->
</div>

<!-- RIGHT floating ad -->
<div class="fixed-rightSd" role="complementary" aria-label="Right floating ad">
  <div class="close-fixedSd" role="button" tabindex="0"
       aria-label="Close right ad"
       onclick="this.parentElement.style.display='none'">CLOSE ADS</div>

  <!-- <!-- Simpan kode iklan di sini --> -->
  <!-- Example AdSense (replace with your code):
  <ins class="adsbygoogle"
       style="display:inline-block;width:160px;height:600px"
       data-ad-client="ca-pub-XXXX"
       data-ad-slot="ZZZZ"></ins>
  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  -->
</div>

Note: The scoped attribute for <style> is fine for this gadget context in many themes, but if your template strips it, simply remove it and keep the CSS rules as-is.

Step 3 — Save and test

Click Save. Visit your site on a desktop browser to see the left and right ads pinned to the margins. On mobile, they’ll be hidden.

---

Recommended Sizes and Responsive Options

• Classic “skyscraper”: 160×600 (works with our default 160px width).
• Half page: 300×600 (increase container width to 300px).
• Responsive vertical units: Supported by many ad networks—ensure the container is wide enough and the ad tag is set to responsive mode.

If you prefer a wider right rail (e.g., 300×600), update the CSS widths and the .close-fixedSd to match:

.fixed-rightSd{ right:0; width:300px; }
.close-fixedSd{ width:300px; }

Be mindful of your theme’s max content width. If your article container is very wide, 300px side rails may feel tight on common 1366px screens. Always test readability.

---

Enhancement 1: Hide When the Viewport Is Too Narrow

Not every “desktop” is truly wide. On small laptops, side ads can make the page feel cramped. Add a second media query to hide the rails unless the viewport is at least, say, 1200px wide:

@media screen and (max-width: 1199px){
  .fixed-leftSd, .fixed-rightSd{
    display:none !important;
    visibility:hidden !important;
  }
}

Pairing this with the 800px rule gives you two thresholds: mobile, and “narrow desktop”.

---

Enhancement 2: Respect a Sticky Header

If your theme uses a sticky header of 72px instead of 60px, adjust the top value:

.fixed-leftSd, .fixed-rightSd{ top:72px; }

You can also use CSS calc() if the header height changes across breakpoints:

.fixed-leftSd, .fixed-rightSd{ top: calc(var(--header-height, 60px) + 0px); }

---

Enhancement 3: Add Keyboard Support to the Close Buttons

We’ve already added role="button" and tabindex="0". For full a11y, capture the Enter and Space keys so keyboard users can dismiss ads:

<script>
(function(){
  function wireClose(el){
    el.addEventListener('keydown', function(e){
      if(e.key === 'Enter' || e.key === ' '){
        e.preventDefault();
        el.click();
      }
    });
  }

  document.querySelectorAll('.close-fixedSd').forEach(wireClose);
})();
</script>

---

Enhancement 4: Remember Dismissed State (Session)

If a visitor closes a rail, you can keep it hidden for that session using sessionStorage:

<script>
(function(){
  var left = document.querySelector('.fixed-leftSd');
  var right = document.querySelector('.fixed-rightSd');

  if(sessionStorage.getItem('hideLeftAd') === '1' && left){
    left.style.display = 'none';
  }
  if(sessionStorage.getItem('hideRightAd') === '1' && right){
    right.style.display = 'none';
  }

  document.querySelectorAll('.fixed-leftSd .close-fixedSd').forEach(function(btn){
    btn.addEventListener('click', function(){ sessionStorage.setItem('hideLeftAd', '1'); });
  });
  document.querySelectorAll('.fixed-rightSd .close-fixedSd').forEach(function(btn){
    btn.addEventListener('click', function(){ sessionStorage.setItem('hideRightAd', '1'); });
  });
})();
</script>

Swap sessionStorage with localStorage if you want the preference to persist across browser restarts.

---

Placement & Policy Tips

• Don’t cover content or system UI (e.g., cookie banners). Our CSS keeps rails outside the content, but always test.
• Desktop-only is safer; many ad networks discourage intrusive mobile overlays. We already hide at ≤800px width.
• Use supported formats (e.g., 160×600, 300×600). For AdSense, check your account for side rail formats and guidance.
• Keep a close button visible and functional.
• Page speed: the CSS is tiny; the biggest impact is your ad script. Lazy load where supported by your network.

As with any monetization tweak, consult your ad platform’s latest policies before deployment.

---

Troubleshooting

The ads show on top of my content

• Make sure your main content has adequate left/right padding or a max width that leaves margins for rails.
• Use a higher z-index on your header if the rails overlap navigation. Or raise the rails if they hide behind elements.

Nothing appears on mobile

• That’s intended by our media query for usability and compliance.
• If you truly want mobile side rails (not recommended), remove the media query—then test thoroughly for intrusiveness.

My ad code renders blank

• Verify that your ad client and slot IDs are correct.
• Some networks limit impressions per page or per viewport. Test with a different slot or wait for inventory to fill.

The close button doesn’t respond to keyboard

• Add the Enhancement 3 script to capture Enter/Space keys.

300×600 doesn’t fit

• Ensure your layout has enough side margin. If not, stick to 160×600 or reduce your article container width slightly on large screens.

---

Frequently Asked Questions (FAQ)

Will floating side ads hurt user experience?

If you keep them desktop-only, don’t cover content, and add a visible close button, most users won’t mind. The setup here is specifically designed to be non-intrusive.

Can I load different creatives on left and right?

Yes. Use separate ad slots for each rail. Many networks allow frequency capping and independent reporting per placement.

Are these “sticky” ads allowed?

Rules vary by network. Some offer official “side rail ads” on desktop. Always verify current policy. When in doubt, keep them clearly outside content and offer a close control.

Can I make them responsive?

Yes—if your ad provider supports responsive tags. Adjust the container widths and height to “auto” and let the script handle sizing. Test thoroughly on multiple viewport widths.

How do I keep them from overlapping the footer?

Because they’re position:fixed, they won’t collide with footer content. If you use a floating back-to-top button or chat widget, offset your rails a little (right: 8px, etc.) so everything is visible.

---

Bonus: Advanced Layout Logic (Hide rails when content is too wide)

If your theme uses very wide content (e.g., 1200px+), side rails might feel cramped on some screens. You can auto-hide rails when the content container plus two rails won’t fit comfortably. This snippet checks body width and toggles visibility:

<script>
(function(){
  var MIN_SPACE = 1200; // minimum viewport width where rails feel comfortable
  var rails = document.querySelectorAll('.fixed-leftSd, .fixed-rightSd');

  function evaluate(){
    var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    rails.forEach(function(el){
      el.style.display = (vw >= MIN_SPACE) ? '' : 'none';
    });
  }

  window.addEventListener('resize', evaluate);
  evaluate();
})();
</script>

Adjust MIN_SPACE to match your theme and rail widths.

---

Design Polishing Tips

• Spacing: Add a subtle gap from the edges using left: 8px / right: 8px for breathing room.
• Shadow/frame: A faint box-shadow or thin border can make the unit feel intentional.
• Motion: Avoid animated rails. Keep them steady to minimize distraction and pass CLS metrics.
• Consistency: Style the close bar so it matches your theme. Think of this like tidying a custom scrollbar tutorial—small details matter.

---

Conclusion

With a few lines of CSS and a simple HTML block, you’ve turned empty desktop margins into floating ad placements that can lift revenue without hurting usability. The pattern here is deliberately conservative: desktop-only, non-overlapping, and dismissible. Combine it with responsive ad tags, careful threshold rules, and regular testing, and you’ll have a reliable side-rail setup that plays nicely with your readers and your layout.

If this was helpful, bookmark the guide, share it with another Blogger creator, and subscribe for more hands-on Blogger customization tips—from floating elements to performance tweaks and UI polish.