Are you looking for the best way to shows Adsense ads banner (728 x 90) in footer bar floating sticky with close button, Many WordPress site owners rely on advertisements to monetize their websites? In this article, we will share with you the best way to adding sticky advertisement banners in the footer section without a plugin, which means website load faster no heavy script easy to optimize your advertising. We make it simple and easy for you to take control of advertising space on your site while still offering many opportunities for customization.
What is Footer Sticky Ads Banner
The footer bar placement is fixed at the bottom of your page and not moving away when users scroll down or scroll up. It is not only interesting for advertisement but for navigations, internal promotions, or any kind of content you want to have fixed on the bottom. Included in Sticky Ads on the footer, it also has a close option, that makes your website more professional, if the user does not want to show these ads popup on footer then close it with button easy.
In this article, we will show you How to Create a Sticky with Close button Ads, Banners Footer, on your WordPress site. A coding method that we’re using.
Open Your Theme’s footer.php In Theme Editor
I didn’t make it as a WordPress plugin because it’s so easy to integrate. Also creating it as WordPress plugin will require additional script etc. In order to add it to your WordPress site, go to your Appearance → Theme Editor → Theme Footer (footer.php) and paste the below code just before wp_footer().
CSS Code which makes your Ads align center, button style, and background color:
<style>
@media (max-width: 767px){.fotads_fxmain{ display:none; } }
.fotads_fxmain{ position: fixed; bottom: 0px; width: 100%; height: auto; z-index: 9995; pointer-events: none; }
.fotbackcolor{ width: 100%; height: auto; background-color: #fff; margin: 0px auto; position: relative; }
.fotitems{ float: left; position: absolute; background-color: rgb(74, 74, 74); width: 25px; height: 100%; pointer-events: auto; cursor: pointer; z-index: 9999; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.fotbuttonarea{ transform: rotate(270deg);color: #bfbfbf;letter-spacing: 2px; }
.fotbtclos{ color: white; margin-left: 5px; }
.fotads_showalign{ position: relative; height: auto; background-color: transparent; display: flex; justify-content: center; pointer-events: auto; }
</style>HTML code just paste it bellow the CSS:
<div class="fotads_fxmain">
<div class="fotbackcolor">
<div class="fotitems">
<div class="fotbuttonarea">CLOSE<span class="fotbtclos">X</span></div>
</div>
<div class="fotads_showalign" id="ads_showhide">
<!-- Paste Ads script code hear -->
<img src="https://lh3.googleusercontent.com/Sh7SH08FZ6pVcq7dxVgc3FmuW0wLFM-0cvYPRYxDFeB4vZ0GLS5qibRWO-4KXxl_tKo=w728-h90-rwa">
<!-- Paste Ads script code hear -->
</div>
</div>
</div>jQuery script paste it bellow HTML:
<script>
(function($) {
jQuery(window).load(function(){
$(".fotitems").click(function(){
$("#ads_showhide").hide();
})
});
}(jQuery));
</script>The above code is mention is work, for example, purpose I use an image, you can replace with ads script. Remember one thing is you generally this code display ads on footer bar sticky if ads do not load this section do not appear. for the mobile users can ‘t show, for users use windows, iPad pro iPad ads show.
However there is not so difficult to add that you need to add this code at the same footer.php file, There is an image section, now you can replace with you Ads unit script can be easily changed. Furthermore, you can’t use this Sticky Ads Banners on footer bar for other things without doing must change id customization’s.