How To Add Responsive Footer Sticky Ads In Blogger & WordPress Without Plugin?

/ / How To Add Responsive Footer Sticky Ads In Blogger & WordPress Without Plugin?

In this article, I will let you know How To Add Responsive Footer Sticky Ads In Blogger & WordPress Without Plugin? The benefit of the bottom sticky ad, whatever page you visit will be available at the bottom. There is a chance that your AdSense earning & CTR will increase for sure.

There is a higher chance that you will get more clicks on footer sticky ads because whenever a visitor visits your website this ad will appear at the bottom for permanent until the user is closing it manually.

According to AdSense guidelines if you are displaying sticky ads then it must not be covering more than 30% of the screen, but if by chance its size is increasing then there are possibilities that your account may be limited or banned.

But you don’t need to worry about it because the trick shared in this article fulfills all these requirements, and may not cause any issue for AdSense.

Benefits Of Footer Sticky Ad In Blogger & WordPress

  • Close Button
  • Improve Viewability
  • No Plugin Required
  • Sticky Ad at the bottom
  • Appears on every page
  • Boost AdSense CTR & CPM
  • More useful on a website with infinite scroll

Rules To Follow Before Applying Floating Ad

  • Responsive
  • 1 vertical sticky per viewport
  • 1 horizontal sticky per page
  • Must not cover more than 30% of the screen
  • Some white space between the ad and content
  • Remove or shift clickable buttons (Top to bottom) with CSS so that they didn’t cover ad unit

How To Shift Top To Bottom Button With CSS?

Step 1: Visit your website > Right-click on Back To Top button > Click Inspect element
Step 2: Copy the id of the Back To Top button
Step 3: Paste the below code after replacing it with the Back To Top id, in the CSS of your website

#back-to-top {
	bottom: 100px;
}

It can be moved in any direction left, right, top, bottom, according to your need.

Note: I don’t use Bottom Sticky Ads and neither I recommend. There are fewer chances of getting any problem because AdSense itself showing this type of Ad on mobile devices from the top as well as the bottom. But if you wish to use & increase earning then use at your own risk, and don’t blame me if anything happens wrong.

How To Add Responsive Footer Sticky Ad In WordPress Without Plugin?

Step 1: Log in to your WordPress Dashboard > Take a Backup
Step 2: Navigate to Appearance > Customize > Additional CSS > Paste Below code > Publish

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

.stky-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);
    cursor: pointer;
}

.stky-ads .stky-ads-close svg {
    width: 22px;
    height: 22px;
    fill: #000;
}

.stky-ads .stky-ads-content {
    overflow: hidden;
    display: block;
    position: relative;
    height: 70px;
    width: 100%;
    margin-right: 10px;
    margin-left: 10px;
}

Step 3: Log in to AdSense > Ads > Create a Fixed Display Ad Unit (width: 728; height: 90) > Copy Ad Code
Step 4: Navigate to Appearance > Theme Editor > Footer.php > Paste below code by replacing with Ad Code before </body> or </html>Tag> Update File

<div class="stky-ads jhfdiuh0" id="stky-ads">
  <div
    class="stky-ads-close"
    onclick='document.getElementById("stky-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="stky-ads-content">
    <center>
        Paste Ad Code Here
    </center>
  </div>
</div>

Step 5: Visit your site in a private window by clearing cache
That’s all

If you don’t want to play with code then you can use the AdFoxly, Ad Inserter Premium Plugin, or AdAce Plugin by Bring The Pixel. You will get this plugin for free with their theme called Bimber. In these plugins you don’t need to do this much coding.

How To Add Responsive Footer Sticky Ad In Blogger?

Step 1: Log in to your Blogger Dashboard > Take a Backup
Step 2: Navigate to Theme > Customize > Advanced > Add CSS > Paste Below code > Save

or Paste it just before ]]></b:skin> in by going to Edit HTML

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

.stky-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);
    cursor: pointer;
}

.stky-ads .stky-ads-close svg {
    width: 22px;
    height: 22px;
    fill: #000;
}

.stky-ads .stky-ads-content {
    overflow: hidden;
    display: block;
    position: relative;
    height: 70px;
    width: 100%;
    margin-right: 10px;
    margin-left: 10px;
}

Step 3: Log in to AdSense > Ads > Create a Fixed Display Ad Unit (width: 728; height: 90) > Copy Ad Code
Step 4: Navigate to Theme > Edit HTML> Paste below code by replacing with Ad Code before </body> Tag> Save

<div class="stky-ads jhfdiuh0" id="stky-ads">
  <div
    class="stky-ads-close"
    onclick='document.getElementById("stky-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="stky-ads-content">
    <center>
        Paste Ad Code Here
    </center>
  </div>
</div>

Step 5: Visit your site in a private window
That’s all

You can increase or decrease the size by changing the height or .stky-ads and .stky-ads .stky-ads-content (height: 207px;) in CSS and Ad Unit size (width: 768px; height: 200px). White Background can be made transparent by replacing #fefefe in .stky-ads with transparent.

How To Add Verticle Left & Right Sticky Ad In Blogger?

Step 1: Log in to AdSense > Ads > Create a Fixed Verticle Display Ad Unit (width: 160; height: 600) > Copy Ad Code
Step 2: Log in to your Blogger Dashboard
Step 3: Navigate to Layout > Add a Gadget (In Sidebar) > Select HTML/JavaScript > Paste below code by replacing with Ad Code > Save

<style type="text/css">
    .left-fixed,
    .right-fixed {
        position: fixed;
        top: 60px;
        width: 160px;
        height: 600px;
        z-index: 9999;
        transform: translateZ(0);
        padding: 10px 10px;
    }
    
    .left-fixed {
        left: 0;
    }
    
    .right-fixed {
        right: 0;
    }
    
    .close-side-ad {
        position: absolute;
        width: 150px;
        height: 15px;
        line-height: 15px;
        font-size: 11px;
        font-weight: 400;
        top: -15px;
        text-align: center;
        background: #e0e0e0;
        color: #666;
        padding: 4px;
        cursor: pointer;
        border-radius: 55px;
    }
    
    @media screen and (max-width: 800px) {
        .left-fixed,
        .right-fixed {
            display: none;
            visibility: hidden;
        }
    }
</style>
<div class="left-fixed">
    <div aria-label="Close" class="close-side-ad" role="button" tabindex="0" onclick='this.parentElement.style.display="none"'>
        <b>CLOSE</b>
    </div>
    Paste Ad Code Here
</div>
<div class="right-fixed">
    <div aria-label="Close" class="close-side-ad" role="button" tabindex="0" onclick='this.parentElement.style.display="none"'>
        <b>CLOSE</b>
    </div>
    Paste Ad Code Here
</div>

Step 4: Visit your site in a private window
That’s all

Note: Verticle Left & Right Sticky Ad is only for desktop so don’t worry if it is not displaying on mobile devices.

Wrap Up

This is how you can add a footer sticky ad in the footer on Blogger as well as WordPress with and without plugins. If this article is really useful for you then make sure to share it with your friends on social media and let them know about this awesome trick to increase AdSense CTR & earning.

Happy Blogging!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *