Home
Blogger Tutorials

Add Sticky Floating Bottom Ads Sticky Footer Ads in Blogger

Learn how to add responsive sticky floating bottom ads in Blogger safely to boost AdSense CTR, CPM, and overall earnings.
Mr.Shiva
Add Sticky Floating Bottom Ads Sticky Footer Ads in Blogger

What is a Sticky Bottom Ad?

A sticky ad is a fixed banner that stays visible at the same position while visitors scroll through your blog. These ads are often placed in headers, sidebars, or footers. In this guide, we focus on sticky footer ads for Blogger.

Avoid placing too many ads randomly as it may violate AdSense guidelines.

Is It Safe to Use Floating Bottom Ads?

Yes, sticky footer ads are safe if implemented correctly. Unlike popup ads, a properly coded sticky ad box does not violate AdSense policy.

  • Avoid sticky ads on gaming or infinite-scroll sites.
  • Ensure ads do not cover more than 30% of the screen.
  • Test the design on both mobile and desktop devices.

Benefits of Sticky Footer Ads

  • 40–60% higher CTR than regular placements
  • 200% improved visibility compared to standard ads
  • 30–70% higher CPM as advertisers pay more

Things to Keep in Mind

  • Do not use sticky ads on gaming blogs.
  • Avoid infinite post-loading pages.
  • Make sure the ad doesn’t block important content.

How to Add Sticky Footer Ads in Blogger

First, always back up your Blogger theme before editing.

Method 1: Add via Widget

  1. Go to Blogger Dashboard → Layout.
  2. Add a new JavaScript/HTML widget.
  3. Paste the ad code.
  4. Save changes and check your site.

Method 2: Add via Theme Edit

  1. Go to Theme → Edit HTML.
  2. Paste the CSS above ]]></b:skin> or in “Additional CSS”.
  3. Create a responsive AdSense unit and copy data-ad-client & data-ad-slot.
  4. Insert the HTML code before </body> tag.
  5. Replace placeholders with your AdSense code.
  6. Save changes and check.

Sticky Footer Ad Code

<style>
.Arpian-ads {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 70px;
  max-height: 90px;
  padding: 5px 0;
  box-shadow: 0 -6px 18px rgba(9,32,76,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 20;
}
.Arpian-ads-close {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  top: -30px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -6px 18px rgba(9,32,76,.08);
}
.Arpian-ads .Arpian-ads-content {
  text-align:center;
  height: 70px;
  width: 100%;
  margin: 0 10px;
}
</style>

<div class='Arpian-ads' id='Arpian-ads'>
  <div class='Arpian-ads-close' onclick='document.getElementById("Arpian-ads").style.display="none"'>
    ✕
  </div>
  <div class='Arpian-ads-content'>
    <!-- Replace with your AdSense code -->
    Place your Ad Code Here
  </div>
</div>

Sticky Footer Ads in WordPress

If you are on WordPress, the easiest way is to use a plugin like Ad Inserter. Alternatively, add the above code inside a Custom HTML widget under Appearance → Widgets.

Conclusion

Adding sticky floating bottom ads in Blogger is a powerful way to boost visibility and earnings. Make sure to follow AdSense rules and test across devices.

If this guide helped you, share it with others and bookmark this site for more Blogger tips and scripts.

Post a Comment