Footer Sticky Ads For Blogger And WordPress

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

Table of Contents

I tried a few experiments on the blog to create a sticky footer Adsense unit. I used the Ad Inserter Pro WordPress plugin to do that. But, the problem is, that 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 simplify the code for every cinerea. You can use the code on your WordPress blog, 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 to 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

You need to copy and paste the below code into any of the HTML widgets of your WordPress or Blogger blog. Or, you can simply use any of your existing WordPress Ads plugins. Copy those codes from here.

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

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.

<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. There are different places in which you can place your AdSense Ads.

These include –

In the Sidebar
In the header or beside logo
Below the Post Title
Below the Header
Inside the Content after certain para, image etc.
In the footer
As sticky ads (even if you scroll through the ads are visible)
Interstitial ads sticking to the bottom of the screen on mobile

To manually add these AdSense ad codes to your WordPress site, you need to edit the theme files or child theme files.

For the sidebar

You just have to create a text/html widget and add the AdSense code.

To add the Ad at the top of the page.

You need to open FileZilla or another client and edit your functions.php file. Generally it is located here – /wp-content/themes/yourtheme/functions.php)

add_action('genesis_before_content', 'header_ad');  function header_ad() {  if (is_page() || is_category() || is_search() ) { ?><div class="adsense-top"><style type="text/css">  .adslot_4 { width: 1000px; height: 90px; }  @media (max-width:420px) { .adslot_4 { width: 300px; height: 250px; } }</style>  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <!-- XXXXXXXX -->  <ins class="adsbygoogle adslot_4"  style="display:inline-block"  data-ad-client="ca-pub-XXXXXXXXXX"  data-ad-slot="XXXXXXX"  </ins>  <script>  (adsbygoogle = window.adsbygoogle || []).push({});  </script>  </div>  <?php }}

You need to provide your publisher id and ad slot id in the above code. The above code can be added to category page, single post page, archive page etc.

How to Add AdSense after certain (2nd , 3rd para)

//ADD ADSENSE AFTER 2ND PARAGRAPH  add_filter( 'the_content', 'prefix_insert_inpost_ads' );  function prefix_insert_inpost_ads( $content ) {  $ad_code =’ <div class="googleadsrectangle">  <style type="text/css">  .adslot_1 { width: 650px; height: 280px; }  @media (max-width:420px) { .adslot_1 { width: 300px; height: 250px; } }  </style>  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <!-- SAMPLE ADD -->  <ins class="adsbygoogle adslot_1"    style="display:inline-block"    data-ad-client="ca-pub-XXXXXXXXXXXX"    data-ad-slot="XXXXXXXX"  </ins>  <script>  (adsbygoogle = window.adsbygoogle || []).push({});  </script>  </div>';  if ( is_single() && ! is_admin() ) {  return prefix_insert_after_paragraph( $ad_code, 2, $content );  }  return $content;  }  function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {  $closing_p = '</p>';  $paragraphs = explode( $closing_p, $content );  foreach ($paragraphs as $index => $paragraph) {  if ( trim( $paragraph ) ) {  $paragraphs[$index] .= $closing_p;  }  if ( $paragraph_id == $index + 1 ) {  $paragraphs[$index] .= $insertion;  }  }  return implode( '', $paragraphs );  }

Note :

You should copy/paste the code given by AdSense in the $ad_code variable and replace the code shown in bold.
If you want the ads to appear after the first paragraph or any other position, change the number 2 to the desired value in the line: return prefix_insert_after_paragraph( $ad_code, 2, $content );

Thank you for Being with Us I Hope you Like The Information About Footer Sticky Ads On WordPress and Blogger. Don’t Forget to show your love in the comments section below And if you have any questions please let me know in the comments section below.

Post Views: 219