Fixed Bottom Banner Ad Integration

Display ads are an easy way to generate passive income from your website. For example, you can use a sticky bottom banner ad that stays put even while users scroll through your content. Nonetheless, having the users control the ad and giving them the option to hide it or close it makes the user feel less annoyed. This tutorial shows you how to create dismissible Fixed Bottom Banner Ad Integration on Blogger and WordPress. The guide contains HTML, CSS, and JavaScript with complete explanations for every platform.

1 Benefits of Fixed Bottom Banner Ad Integration

Bottom-level banner ads are always visible and do not block significant web content. Advertisers usually favor this placement, and click-through rates are higher. In its dismissible form, it is a fine line between monetization and usability.

2. Features of the Dismissible Banner

• Stuck at the bottom of the screen
• Responsive and non-obstructive
• Includes a close (X) button
• Closes smoothly using jQuery animation
• Blogger and WordPress are supported

3. How to Add in Blogger

Step-by-Step Integration:

1. Log in to your Blogger Dashboard.
2. Go to Theme > Edit HTML.
3. Scroll down before the closing </body> tag and paste the following code:

<!-- Fixed Bottom Banner -->
<script type='text/javascript'>
$(document).ready(function() {
  $('img#closed').click(function() {
    $('#bl_banner').hide(90);
  });
});
</script>

<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
  <div>
    <a id='close-fixedban' onclick='document.getElementById("fixedban").style.display = "none";' style='cursor:pointer;'>
      <img id='closed' alt='close' src='https://1.bp.blogspot.com/-ViBJvudead0/XupPbriErCI/AAAAAAAAATw/lx54gHfDbKk0cEAhTwNKNp3LN-4-D5JrwCK4BGAsYHg/s324/multiply_green.png' height='20' width='20' title='close button' style='vertical-align:middle; float:right;'/>
    </a>
  </div>
  <div style='text-align:center; display:block; max-width:728px; height:auto; overflow:hidden; margin:auto'>
    <!-- Your Ad Code Here -->
    Display Ads Size 340x55
  </div>
</div>

4. Save your theme.
5. Replace the text <!-- Your Ad Code Here --> with your actual ad code (e.g., from AdSense).

4. How to Add in WordPress

You can include a fixed bottom advertisement by adding the widget or editing your theme’s footer file.

Method 1: Through Widget (Best for New Bloggers)

1. Go to Appearance > Widgets.
2. Insert a Custom HTML widget in your Footer or use something like the Insert Headers and Footers plugin.
3. Paste the code you saved from above to this widget area.
4. Save and test on your site.

Method 2: Editing the footer. php (Advanced)

1. Appearance > Theme Editor > footer. Php.
2. On or next to the tag, add the following HTML and JavaScript.
3. Save changes.

5. Improve Using Cookie or LocalStorage (Advanced Only)

If you want to ensure that the ad remains hidden when the user closes it — even when reloading the page — you can store the choice via cookies or local storage.

Example with LocalStorage:

<script>
document.addEventListener("DOMContentLoaded", function() {
  if (localStorage.getItem("adClosed")) {
    document.getElementById("fixedban").style.display = "none";
  }
  document.getElementById("close-fixedban").addEventListener("click", function() {
    localStorage.setItem("adClosed", "true");
  });
});
</script>

This script ensures that once the ad is closed, it won’t reappear unless local storage is cleared.

6. Final Thoughts

Deploying a simple bottom banner ad that users can hide is a genius way of increasing ad impressions without causing visitors any hassle. By following the previous steps, you can set up or open a well-structured and user-friendly ad system on Blogger or WordPress.

Tips- Be sure to check that your ad serves correctly for both your site's mobile and desktop versions.

Just let us know in the comments if you need one with cookies, an auto-show delay, or advanced animation. Happy coding and monetizing!