How to Add Responsive Sticky Footer Ads in WordPress without any plugins

In this blog post, I have shared some HTML and CSS codes that will help you in adding responsive sticky footer ads in the footer of your WordPress blog or website easily.

The best part of this way is you don’t need to add or install any plugin you can add Adsense sticky footer ads without any plugin in WordPress.

Below are the codes and instructions:

Copy all Below Code& Paste in Footer.php Section Above </body> Tag and Replace Highlighted (<!– ADD 720×90 Fixed Adsense Code –>) with Your Adsense Ad Code:

<!--  Footer sticky Ad Starts -->

<div class='BR-Footer-Ads jhfdiuh0' id='BR-Footer-Ads'>
    <div class='BR-Footer-Ads-close' onclick='document.getElementById("BR-Footer-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='BR-Footer-Ads-content'>
    <center>
	<!-- ADD 720x90 Fixed Adsense Code -->
    </center>
    </div>
</div>

<!--  Footer sticky Ad Ends -->
Sticky-Footer-Ads-without-any-plugin

Paste Below Code in Advance CSS Options (Customize Section):

/*  Footer sticky Ad Starts */

.BR-Footer-Ads { position: fixed; bottom: 0px; left: 0; width: 100%; min-height: 70px; max-height: 90px; padding: 5px 5px; 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; } 

.BR-Footer-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); } 
 
.BR-Footer-Ads .BR-Footer-Ads-close svg { width: 22px; height: 22px; fill: #000; } 
 
 
.BR-Footer-Ads .BR-Footer-Ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }

/*  Footer sticky Ad Ends */ 
Spread the love

Leave a Comment