How to add Responsive Sticky Footer Ads on Blogger and WordPress Blog

• Don't implement sticky footer ads in Gaming Websites.
• Don't implement sticky footer ads in the infinite post-loading websites.
• Ads must not cover more than 30% of the screen area at any screen and time.
• Ads should not move with the Cursor Movement in both Mobile and Desktop screens.
• No more than 1 Vertical sticky ad is allowed per viewport.
• No more than 1 Horizontal sticky ad is allowed per page.

• Your site must not be a gaming and infinite loading site.
• In footer sticky ads, ads shouldn't cover more than 30% space.
• Bottom sticky ads should not move with the movement of the mouse in both mobile and desktop screens.
• You cannot change the responsive ads code for the bottom space.
• You cannot trick or force users to click on the ads.
• You have to add a close button in the bottom sticky ads to maintain the user experience.
• If you use both Anchor ads from auto ads and Sticky footer ads code then you have to turn off or remove one code so, that it does not overlap the other advertiser ads.
• See "things to be considered before the implementation of sticky footer ads" for more.

How to add Responsive Sticky Footer Ads on Blogger and WordPress Blog using HTML Only?

1. Open Blog and click on the "Layout" tab.
   
   
   
   
2. Now copy the below code.

     <script type='text/javascript'>
      $(document).ready(function() {
      $( & #39;img# closed & #39;).click(function(){$(&# 39;# bl_banner & #39;).hide(90);});});
   </script>
   <div id='fixedbanner' style='position: fixed;left: 0;bottom: 0;width:100%;text-align: center;transition: all .1s ease-in;z-index:999;-webkit-transform:translateZ(0);'>
      <div>
         <a class='close-stky-ads' onclick='document.getElementById(&apos;fixedbanner&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;display: flex;float: right;'><img alt='close button' src='https://i.imgur.com/iGz9KiU.gif' title='close button'/></a>
      </div>
      <div class='stky-ads' style='width: 100%;padding: 5px 0;box-shadow: 0 -6px 18px 0 rgba(9, 32, 76, .1);display: flex;align-items: center;justify-content: center;background-color: #fefefe;max-height: 100px;'>
         
   
      <!-- Your Adsense Code Starts Here-->
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
         <ins class="adsbygoogle"
            style="display:inline-block;width:728px;height:90px"
            data-full-width-responsive="true"
            data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
            data-ad-slot="XXXXXXXXXX"></ins>
         <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
         </script>
       <!-- Your Adsense Code Ends Here-->
      
      </div>
   </div>

3. Please replace the ca-pub-XXXXXXXXXXXXXXXX and data-ad-slot="XXXXXXXXXX" code with your own code and if you want to add a fixed-sized ad then you can replace the above responsive AdSense Code with a fixed-sized AdSense Code. 
4. Paste the above code anywhere in the layout tab by clicking on "Add Gadgets".
   
   
   
   
5. After clicking on Add Gadget click on "HTML/JavaScript".
   
   
6. Now, paste the above-copied code inside the "Configure HTML/JavaScript" of HTML/JavaScript,
   
   
   
   
7. Click on the "Save" button.

1. Open your blog, click on the "Theme" tab, and in the theme tab click on the "Customized" button.
   
   
   
   
2. There you have to click on the "Advanced" tab and click on "Add CSS" by clicking on "Theme Option".
   
   
3. Now, copy and paste the below CSS to your that "Add CSS" section.

.sticky-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; } 

.sticky-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); } 

.sticky-ads .sticky-ads-close svg { width: 22px; height: 22px; fill: #000; } .sticky-ads .sticky-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }         

4. Now, copy the below HTML code and paste it just above the </body> body close tag.

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

   
   
   
   
   
5. Replace the yellow color highlighted with your Adsense Code.
6. Save theme and you will successfully add-footer sticky ads to your website.