Blog

How To Add Responsive Floating Footer Sticky Bottom Ads in WordPress Without any Plugin 2022

1. Open footer.php file

  1. Go to wordpress dashboard
  2. Click on Appearance -> Theme Editor -> Footer.php

2. Paste below code just above </body> close body tag.

<!--  Footer sticky Ad :: starts -->
<div class='NR-Ads jhfdiuh0' id='NR-Ads'>
    <div class='NR-Ads-close' onclick='document.getElementById("NR-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='NR-Ads-content'>
    <center>
    Your Ads Code Here....
    </center>
    </div>
</div>
<!--  Footer sticky Ad :: ends -->

3. Replace “Add your Ad code here…” line with your Ad code.

4. Add below CSS in Appearance -> Customize -> Custom CSS

/*  Footer sticky Ad :: starts */
.NR-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; }
.NR-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); }
.NR-Ads .NR-Ads-close svg { width: 22px; height: 22px; fill: #000; }
.NR-Ads .NR-Ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }
/*  Footer sticky Ad :: ends */
Tags: , ,