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.
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.
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('fixedbanner').style.display = 'none';' 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.
Thank you chandan sir. This code work fine in my website.
I am also from Odisha(balasore).
Thank you bhai. After trying too much plugins finally your code working perfectly.
This is helpful information..So Thanks for sharing this ads code.
Aapne ye code tu de diya kya ye future may work kare ga.. isase invalid activate click ke chance jyada ho jaenge agar site par views kam hai please replay jarur Dee
Wow I am very lucky to have read your article today, it worked for me thanks so much
Thanks Chandan Bhai
Well it is still working now? Matlab Adsense effect to nai karega na? plz reply
Thank You Good Information
Thanks Bhai
Really You Are Totally Different And Genius Geek In The Indian Blogging World. Thank You For Providing The Stickey Footer Ads Code. Really Thank You..
Thank you Chandan sir. This code works fine on my website.
How to get slot id ?
Thank you so much for this (piece) code 😀 for sticky banner footer You safe my life man! And of course my website and my earnings 😀
I slightly redesigned your the banner css code and the close button position now I have the perfect sticky (footer) banner
I bookmarked your site!
थैंक्स जी। ऐसी ही सपोर्ट करते रहें।
it’s very helpfull content for us thanks sir sharing this info
मैं ad inserter pro को buy की हूँ लेकिन इसका सेटअप कैसे करें। लाईक footer sticky ad of your hindime.net blog. Please guide.
This is helpful information..So Thanks
Finally the code worked after using so many plugins.
Thank you so much Bhai ❤️
Thank you so much sir ji
Thanks sir ads is working perfectly.
Thanks sir
Finally the code worked! Thank you so much Brother.
Hello,
I will like to use the 320 x 100 banner for it, is there any way the code can be re-edited to achieve the desired size please
Just change the height and width.
ଦା ଦା ଜୁହାର….ପୋଷ୍ଟ ପଡ଼ି କିନା ଭଲ ଭଲ ଜାନବାର ପାଏଲି।
The code works perfectly fine for our website. Thank You
Thank You so Much
Chandan Bhai I really liked the information about this Sticky Footer AdSense Ad Code, it is 100% working thank you! According to my requirement I wanted without close button, if it is possible, please send it to my email address.