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

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

Hi, today I talk about “How To Add Responsive Floating Footer Sticky Bottom Ads in WordPress Without any Plugin 2022” this method help you to increase your adsense earning. lets go

1.Open wordpress footer.php file

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

2.Paste code just above </body> closing 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....
    </center>
    </div>
</div>

<!--  Footer sticky Ad :: ends --> 

 

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

Note: create your sticky footer ads size 30% in your site size

Go to Display ads select fixed and write 728/90 ads size save and copy 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 */ 

 

Leave a Comment