Search This Blog

Latest

Sunday, 10 July 2022

How to Add Sticky Footer Ads on WordPress and Blogger Blog

 How to Add Sticky Footer Ads on WordPress and Blogger Blog


Sticky Footer Advertisements are an announcement unit which stay fused to the bottom of a screen. By applying a simple law, you can add sticky footer Adsense unit on your WordPress blog. 

 I tried a many experiments on thehindime.net blog to produce a sticky footer Adsense unit. I used the announcement Inserter Pro WordPress plugin to do that. But, the problem is, it's a decoration plugin and this isn't a mug of tea for every blogger. 

The new bloggers ca n’t go it and that’s why I tried to simplified the law for every cinereous. You can use the law on your WordPress blog, and as well as the Blogger one. 

How to Add Sticky Footer Ads on WordPress and Blogger Blog
How to Add Sticky Footer Ads on WordPress and Blogger Blog

Benefits of Sticky Footer Adsense Ad

  1. Increase viewability of Google ads
  2. More Ad earnings
  3. 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're super agitated to add sticky footer Adsense law in your blog. But, before that you should read the following rules. else, your Adsense account will be banned. 

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

Sticky Footer Adsense Ad 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>

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.

  1. First of all login to your Blogger Dashboard.
  2. Go to Layout.
  3. Add an HTML/JavaScript gadget in the Sidebar or Footer elements.
  4. Now, in the content section, paste the sticky footer Adsense code and Save it.
  5. 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.

  1. First of all login to your WordPress Dashboard.
  2. Go to Appearance → Widgets → Custom HTML and add it to the sidebar.
  3. Now, put the above code and Save it.
  4. 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.


No comments:

Post a Comment