Responsive Sticky Footer Ads | Code for WordPress, Blogspot & HTML

In the world of online advertising, one of the most effective ways to capture the attention of users is through sticky footer ads. These ads are designed to stick to the bottom of a user’s browser window, even as they scroll through a website’s content. This creates a highly visible and persistent advertising space that can be very effective at driving clicks and conversions.

In this article, we’ll explore the benefits of sticky footer ads, as well as some tips for how to create and implement them on your own website.

Benefits of Sticky Footer Ads

There are several key benefits to using sticky footer ads as part of your online advertising strategy. First and foremost, these ads are highly visible to users. Because they remain in view even as the user scrolls through a website’s content, they are more likely to capture the user’s attention and generate clicks. This can be especially effective if you are promoting a specific product or service, as the persistent nature of the ad can help to reinforce your message and drive conversions.

Another advantage of sticky footer ads is that they are very flexible in terms of design. Because they are positioned at the bottom of the browser window, they don’t interfere with the main content of your website. This means that you can create highly customized ad designs that incorporate images, animations, and other visual elements without worrying about them detracting from the user experience. Additionally, because the ad remains in view even as the user scrolls, you can include more information and calls to action than you might be able to with other ad formats.

Tips for Creating Sticky Footer Ads

If you’re interested in creating your own sticky footer ads, there are a few key tips to keep in mind. First and foremost, you’ll need to create a design that is visually appealing and attention-grabbing. This might involve incorporating bold colors, eye-catching graphics, or clever animations that draw the user’s eye to the ad. Additionally, you’ll want to make sure that the ad design is consistent with your brand identity and messaging.

Another important consideration when creating sticky footer ads is placement. While these ads are designed to stick to the bottom of the browser window, you’ll want to make sure that they are positioned in a way that is visible but not intrusive. This might involve testing different positions and sizes to find the optimal placement for your particular website and audience.

Finally, it’s important to think carefully about the content of your sticky footer ad. Because these ads are highly visible and persistent, you’ll want to make sure that the messaging is clear and compelling. This might involve including a strong call to action, highlighting the benefits of your product or service, or using other tactics to persuade the user to click through to your website or landing page.

Implementing Sticky Footer Ads on Your Website

If you’re ready to start using sticky footer ads on your website, there are several ways to get started. One option is to work with an advertising network or programmatic advertising platform that specializes in this type of ad format. These providers can help you create and implement high-quality ads that are designed to capture the attention of your target audience.

Another option is to create and implement the ads yourself using HTML, CSS, and JavaScript. This will require some technical expertise, but it can be a cost-effective way to create highly customized ads that are tailored to your specific needs. There are many online resources and tutorials available that can help you learn the necessary skills.

Before implementing the following code, first, create an AdSense Display Ad with Fixed Size of 728 Pixel x 90 Pixel

Sticky Ads for HTML Pages

Place this code before </head>

<style>
.ft-ads{ position: fixed; bottom: 0; left: 0; width: 100%; min-height: 70px; max-height: 200px; padding: 5px 0; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; background-color: #fefefe; z-index: 20; }
.ft-ads-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 12px 0 0; position: absolute; right: 0; top: -30px; background-color: #fefefe; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); } 
.ft-ads .ft-ads-close svg { width: 22px; height: 22px; fill: #000; } 
.ft-ads .ft-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px;
</style>

Place this code before </body>

<div class='ft-ads' id='ft-ads'>
<div class='ft-ads-close' onclick='document.getElementById("ft-ads").style.display="none"'><svg viewbox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>

<div class='ft-ads-content'>
<ins class="adsbygoogle"
     style="display:inline-block;height:70px;width:100%;line-height:70px;"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxx"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>

Remember to replace the ca-pub-xxxxxxxxxxxxx with your original Adsense ID and xxxxxxxxx with your Ad code slot ID.

Sticky Ads for WordPress

Step-1

1. Click on Appearance
2. Go to Customize
3. Open “Additional CSS” Section
4. Paste the CSS Code there
5. Click on “Publish”

.ft-ads{ position: fixed; bottom: 0; left: 0; width: 100%; min-height: 70px; max-height: 200px; padding: 5px 0; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; background-color: #fefefe; z-index: 20; }
.ft-ads-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 12px 0 0; position: absolute; right: 0; top: -30px; background-color: #fefefe; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); } 
.ft-ads .ft-ads-close svg { width: 22px; height: 22px; fill: #000; } 
.ft-ads .ft-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px;

Step-2

1. Click “Appearance“
2. Choose “Theme Editor“
3. Go to “Footer.php“
4. Search “</body>“
5. Paste the HTML Code before “</body>“
6. Replace “ca-pub-xxxxxxxxxxxxx” with the original AdSense ID and xxxxxxxxx with your Ad code slot ID.
7. Click on “Update File“

<div class='ft-ads' id='ft-ads'>
<div class='ft-ads-close' onclick='document.getElementById("ft-ads").style.display="none"'><svg viewbox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>

<div class='ft-ads-content'>
<ins class="adsbygoogle"
     style="display:inline-block;height:70px;width:100%;line-height:70px;"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxx"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>

Sticky Ads for Blogspot

Step-1

1. Open Blogspot Dashboard
2. Click on “Theme“
3. Go to “EDIT HTML“
4. Search for “</style>“
5. Just copy CCS code and paste before “</style>“
6. Click on “Save“

.ft-ads{ position: fixed; bottom: 0; left: 0; width: 100%; min-height: 70px; max-height: 200px; padding: 5px 0; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; background-color: #fefefe; z-index: 20; }
.ft-ads-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 12px 0 0; position: absolute; right: 0; top: -30px; background-color: #fefefe; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); } 
.ft-ads .ft-ads-close svg { width: 22px; height: 22px; fill: #000; } 
.ft-ads .ft-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px;

Step-2

1. Go to “Layout“
2. Add New Gadget
3. Select a “HTML/Javascript Gadget“
4. Copy HTML Code and Paste it.
5. Replace “ca-pub-xxxxxxxxxxxxx” with the original AdSense ID and xxxxxxxxx with your Ad code slot ID.
6. Save the Gadget.

<div class='ft-ads' id='ft-ads'>
<div class='ft-ads-close' onclick='document.getElementById("ft-ads").style.display="none"'><svg viewbox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>

<div class='ft-ads-content'>
<ins class="adsbygoogle"
     style="display:inline-block;height:70px;width:100%;line-height:70px;"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxx"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>

Remember to replace the ca-pub-xxxxxxxxxxxxx with your original Adsense ID and xxxxxxxxx with your Ad code slot ID.

Conclusion

Sticky footer ads can be a highly effective way to capture the attention of users and drive clicks and conversions. By creating visually appealing ad designs, optimizing placement and content, and implementing the ads using the right tools and technologies, you can create a powerful advertising strategy that generates results. Whether you’re promoting a product, service, or brand, sticky footer ads are a valuable tool that should be part of marketing.