Sticky Footer Ad Code: Boost Your Website's Ad Exposure with this Simple Code

February 13, 2023

If you're looking to add an advertisement to your website, you may want to consider using a sticky footer ad. This type of ad stays visible even as the user scrolls down the page, providing more exposure for your ad. In this article, we'll provide a simple piece of code that you can use to create a sticky footer ad on your website.




Why use a sticky footer ad?

Sticky footer ads provide a number of benefits to website owners. By staying visible even as the user scrolls down the page, these ads offer increased exposure for your ad. This can help you reach more potential customers and increase your website's revenue. Additionally, sticky footer ads can help to improve the user experience on your site, as they don't obstruct the main content of the page. 


Sticky Footer Ad Script

Here is your script code for sticky footer ad: 
<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 alt='close' src='https://icon-library.com/images/close-icon-png/close-icon-png-19.jpg' height='20' width='20' title='close button' style='vertical-align:middle; float:right;'/></a></div>
<div style='text-align:middle;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>

----Enter Ads Code--- 

</div>
</div>{codeBox}


How to install a sticky footer ad code

Here's a step-by-step procedure for adding the sticky footer ad code to a Blogger website:

  1. Log in to your Blogger account and go to the dashboard for the blog you want to add the ad to.
  2. Click on the "Theme" tab and then click on the "Edit HTML" button.
  3. Search for the closing </body> tag in the HTML editor and place the code provided above just before it.
  4. Replace the "----Enter Ads Code---" placeholder with your own ad code.
  5. Click the "Save Theme" button to save your changes.
  6. Preview your blog to make sure the ad is displaying correctly. If everything looks good, you're done!
Note: The code provided assumes that you have already added the jQuery library to your website. If you haven't already added jQuery, you'll need to add the following code to the <head> section of your HTML: {alertInfo}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" />{codeBox}


This code uses jQuery, a popular JavaScript library, to make the ad "sticky" at the bottom of the page. When the user scrolls down the page, the ad will remain in view at the bottom of the screen. The code also includes a close button, which the user can click to hide the ad if they wish.

This code is designed to be flexible and can be easily customized to meet your specific needs. You can change the size and appearance of the ad, add additional features, and more.

Features

  • 100% responsive
  • Easy to customize
  • Ad with close button


Conclusion

If you're looking to add an advertisement to your website, using a sticky footer ad can be a great way to get more exposure for your ad. By using the code provided, you can easily create a sticky footer ad on your website that will remain visible as the user scrolls down the page. This can help you reach more potential customers, increase your website's revenue, and improve the user experience on your site.

Tags

Post a Comment

0 Comments