How to Create Sticky, Closable Footer for Anchor Ads?

How to Create Sticky, Closable Footer for Anchor Ads?

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • HTML
  • 2 mins read

So you want to display ads at the footer of your website. It is a good idea because footer anchor ads are best for monetization. A sticky footer stays in place and does not scroll with the page content. This tutorial will show you how to create a sticky, closable footer for anchor ads.

The HTML, CSS, and JavaScript code I am providing in this tutorial can be used on any website. Because the website's structure is the same, whether it is a WordPress site, Blogger, Wix, or a static website.

Creating Sticky, Closable Footer for Anchor Ads

Sticky, closable footer for anchor ads.

HTML Content

Get the below HTML code and put it in your website's HTML before the close body tag (</body>).

<div id="foxads">
  <div class='sticky-ads' id='sticky-ads'>
    <div class='sticky-ads-close'><button id="foxCloseBtn" onclick="closestickyAds();">X</button></div>
    <div class='sticky-ads-content'>

      Paste your advertisement code here.

    </div>

  </div>

</div>

CSS Code

Get the below CSS code and put it in the head section of your website:

#foxads {
  position: fixed;
  width: 100% !important;
  z-index: 9995;
  text-align: center;
  bottom: 0px;
}

.sticky-ads {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  -webkit-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(247, 247, 247, 0.9);
  z-index: 9995;
}

.sticky-ads-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px 0 0;
  position: absolute;
  right: 0;
  top: -25px;
  background-color: rgba(247, 247, 247, 0.9);

  cursor: pointer;
}

.sticky-ads .sticky-ads-content {
  overflow: hidden;
  display: block;
  position: relative;
  height: 90px;
  width: 100%;
  padding: 0px;
}
#foxCloseBtn {
  width: 30px;
  height: 30px;
  border: none;
  background-color: rgba(247, 247, 247, 0.9);
  border-radius: 4px;
}

The above CSS code will make the footer fixed and closable. You can easily edit the above CSS code to adjust the height. Currently, it is set for 90px. Because mostly anchor ads size is 728px by 90px only.

JavaScript Code

Get the below JavaScript code and put it in the head section of your website between the script tags (<script>):

function closestickyAds()
{
  var v = document.getElementById("foxads");
  v.style.display = "none";
}

It's all set. Save the changes and run your page to test. You will find the sticky, closable footer with anchor ads at the bottom.