Add sticky footer ad in WordPress using HTML and CSS only
- To add footer sticky ad, copy this HTML code.
- Open your WordPress account and go to Appearance>Theme Editor.
- Then select footer on right side of theme sidebar.
- Paste the HTML code before </body> tag.
- Now, go to AdSense account and select Ads>By ad unit> Create new> Select horizontal and select Fixed size not Responsive with resolution 720*90 pixels. Copy the ad code and paste on Your Ads Here….. in HTML code in theme editor.
- Copy CSS code and go to Appearance>customize> additional CSS code and paste CSS code there. Save and your Footer sticky ad will apply.
HTML Code:
<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>
CSS Code:
.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; }