sticky footer adsense ads

How to Add Sticky Footer Ads on WordPress and Blogger Blog | Technical AVE

Sticky Footer Ads are an Ad unit which stay glued to the bottom of a screen. By applying a simple code, you can add sticky footer Adsense unit on your WordPress blog.

I tried a few expriements on the hindime.net blog to create a sticky footer Adsense unit. I used the Ad Inserter Pro WordPress plugin to do that. But, the problem is, it is a premium plugin and this is not a cup of tea for every blogger.

The new bloggers can’t afford it and that’s why I tried to simplified the code for every cinereo. You can use the code on your WordPress blog, and as well as the Blogger one.

Benefits of Sticky Footer Adsense Ad

This is my personal experience that, after removing the Link ads by Adsense, many people faced the earning drop down problem. But, when I applied the sticky footer ads in WordPress, I recovered a few earnings.

Well, let’s have a look at the pros of sticky footer Adsense.

Increase viewability of Google ads
More Ad earnings
It is possible to personalize it to allow users to dismiss or close advertisements and Keep reading articles.

Things to Consider Before Implementation

I know that, you are super excited to add sticky footer Adsense code in your blog. But, before that you should read the following rules. Otherwise, your Adsense account will be banned.

If you have a gaming blog, then don’t use it.
Don’t use it on infinite post loading
Your sticky footer Adsense, should not cover more than 30% of your computer, tablet and mobile screen.

Sticky Footer Adsense Ad Code

https://youtu.be/QNIV5ik6RZM

You need to copy and paste the below code in any of the HTML widget of your WordPress or Blogger blog. Or, you can simply use any of your existing WordPress Ads plugin.

lugin.

<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>

You need to replace the replace the above red (ca-pub-XXXXXXXXXXXXXXXX and XXXXXXXXXX) code with your Adsense code. That’s it.

Responsive Sticky Footer Ad on Blogger

Follow the below steps to impliment the above coded in your blogger blog. You don’t need to put the coded insided the HTML code. Let’s do it.

First of all login to your Blogger Dashboard.
Go to Layout.
Add an HTML/JavaScript gadget in the Sidebar or Footer elements.
Now, in the content section, paste the sticky footer Adsense code and Save it.
That’s it.

You’ll see a sticky footer ad all of the pages of your blog.

Responsive Sticky Footer Ad on WordPress

WordPress has a lot of options to impliment the sticky footer Adsense code. You can use the Ad Inserter plugin to show the sticky ad in side the article or put the code inside a “Custom HTML” widget to show it all over the site.

First of all login to your WordPress Dashboard.
Go to Appearance → Widgets → Custom HTML and add it to the sidebar.
Now, put the above code and Save it.
That’s it.

If you have any caching pluin, then do’t forget to clear the cache, in order to show the Sticky Adsence on your blog.

Final Words

This is the effective way to impliment sticky footer Adsense ads on your blog. Before adding the code, do’t forget to check the terms and conditions described above. If you live the post, then don’t forget to share with your friends.

How to Add Sticky Footer Ads on WordPress and Blogger Blog