How To Add Responsive Floating Footer Sticky Bottom Ads in WordPress Without any Plugin 2022 Post author:Ramzan Post published:January 5, 2022 Post category:wordpress Post comments:0 Comments 1. Open footer.php file Go to wordpress dashboardClick 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: responsive floating footer sticky ads, sticky bottom ads, wordpress Please Share This Share this content Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Opens in a new window Read more articles Previous PostHow to Add Wide Skyscraper AdSense Ad banner on Left and Right Side? WordPress Website You Might Also Like How to Add Wide Skyscraper AdSense Ad banner on Left and Right Side? WordPress Website January 1, 2022 Elementor Loading Problem | Elementor Not Working | Elementor Enable Safe Mode Issue | 100% Fix April 3, 2022 Leave a Reply Cancel replyCommentEnter your name or username to comment Enter your email address to comment Enter your website URL (optional) Save my name, email, and website in this browser for the next time I comment.
How to Add Wide Skyscraper AdSense Ad banner on Left and Right Side? WordPress Website January 1, 2022
Elementor Loading Problem | Elementor Not Working | Elementor Enable Safe Mode Issue | 100% Fix April 3, 2022