How to Add Bottom Sticky Ad Banner in Blogger | Footer Ads with Scroll Down to Hide and up to Show

 

Hi to all, here I am going to tell you all about how to add bottom sticky ad banner in blogger website easily in just few minutes by using HTML, CSS and JavaScript.

By adding this sticky banner, you can increase ad revenue more i.e. if your visitor scrolls the website till and up then this banner comes our and if you add your ad code in the HTML code, then ads will run and your ad impressions will increase and also clicking rate will increase and then ads revenue increases.

Even if your visitor don't want to see the banner then, they can click on close icon to remove the banner from the webpage easily.

Sticky ads are a banner ad format that hovers or hovers on the screen and sticks or sticks to the edges of the screen on a site that is separate from the content and can be closed easily.

The below provided codes will not effect page speed, so you can use the codes in any blogger templates and also this banner is responsive.

Read the below provided steps carefully and completely to get clear understanding about how to add bottom sticky ad banner, if you miss any one step then you may get error while saving the code in theme editor.

Steps to Add Bottom Sticky Ads in Blogger

---

Step-1: First of all you all need to login to your blogger website dashboard by using your website login credentials.

Step-2: Go to blogger website dashboard -> Click on theme section -> Click on arrow icon -> Select backup -> Click on download theme.

Step-3: Go to blogger website dashboard -> Click on theme section -> Click on arrow icon -> Select Edit HTML -> Blogger theme editor.

Step-4: Copy below provided HTML code and paste the copied HTML code above closing body tag or </body> tag.

<div class='AT-ads jhfdiuh0' id='AT-ads'> <div class='AT-ads-close' onclick='document.getElementById("AT-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='AT-ads-content'> <ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxx' data-ad-slot='' style='display:inline-block;height:70px;width:100%;line-height:70px;'/><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>
Copy

Step-5: Now Copy below given JavaScript Code and paste the copied JavaScript code above closing body tag or </body> tag.

<script> var prevScrollpos=window.pageYOffset;function hidenotice(){var currentScrollPos=window.pageYOffset;if(prevScrollpos>currentScrollPos){document.getElementById("AT-ads").style.bottom="0"}else{document.getElementById("AT-ads").style.bottom="-50px"} prevScrollpos=currentScrollPos}window.onscroll = function() { hidenotice() }; </script>
Copy

Step-6: Now again copy the below provided CSS code and paste the copied CSS code above closing head tag or </head> tag.

<style> .AT-ads { position: fixed; bottom: 0; left: 0; width: 100%; min-height: 70px; max-height: 200px; padding: 5px 0; 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; } .AT-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); } .AT-ads .AT-ads-close svg { width: 22px; height: 22px; fill: #000; } .AT-ads .AT-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; } </style>
Copy

Step-7: After adding the three codes, click on save button.

Step-8: Now you have successfully added bottom sticky banner in your blogger website easily in just few minutes without any error.

Note

---

If you get any error while saving the code then you need to restore the backup code again and need to repeat the same process as mentioned in the above steps carefully.

If you want to change the style of the banner then you need to modify CSS code and to change the colors you need to replace color codes and for color codes you can use google color picker or any other third part website.

Conclusion

---

I hope that you have understood about how to add bottom sticky ads banner in blogger website easily in just few minutes by using HTML, CSS and JavaScript.