If you want to add responsive bottom sticky footer ads on blogger and WordPress blogs then this blog post helps you to solve this problem. I will provide you the best two ways to add sticky footer ads one is by using CSS and Some HTML Code and the second one is by using HTML code only.
Bottom Sticky Ads can boost your revenues and by using this footer sticky ad code average number of people can get the best increase result in the revenue.
{tocify} $title={Table of Contents}
And you have to know the Google Adsense guidelines which you have to follow to prevent your AdSense account from being disabled. Yes, many people get their account disabled because they ignore or don't know about the guidelines set by AdSense for Sticky Ads. Before the guidelines let talk about what is sticky footer ads, The benefits of sticky footer ads, types of sticky ads, Things to consider before the implementation of sticky footer ads, And Google Adsense Guidelines Regarding Sticky Footer Ads.
What are Sticky Footer Ads?
Sticky footer ads are the ads which visible and stick at the bottom of any screen resolution and these types of ads don't move when the content is scrolled up or scrolled down. Such ads can help in increasing the revenue by getting higher clicks and impressions.
People Also Read:- Online Image To WebP Converter | Online Image Converter Free | Image Converter WebP
People Also Read:- Word Counter Online Tool | Count Words, Check Readability Score, Characters, Sentences, Paragraphs, etc.
We can place sticky ads in any place like left, right, top, bottom, left-sidebar, right-sidebar. But we have to place such sticky ads by following the Google AdSense guidelines. Remember AdSense also introduce sticky ads and you can turn it on by visiting the "Auto Ads" setting and you have to turn on "Anchor Ads" and you have turned on Adsense Sticky Ads.
What are the benefits of sticky footer ads?
There are the one most helpful benefit of sticky footer ads is
- Increase Adsense Revenue, CTR(Click Through Rate), Impression.
Okay! you think about how the footer ads increase revenue is the ads remain visible in any situations and According to Google AdSense he says putting your ads bottom above the fold will increase your revenue and due to it present in the bottom, it will get the impression by when a user read your post from starting it takes around 3min to reach the user at the bottom and then only he notice that ads and close it but before closing, he can contribute impression to ads and for the 3min the impression is more to make $0.02 or more.
People Also Read:- AdSense Account Disabled Due To Invalid Clicks On Blog - Solve
People Also Read:-How To Prevent AdSense Click Bombing And Invalid Clicks
People Also Read:- How to reserve space for ads on the website | Add space for ads
People Also Read:- How To Reserve Space In Website For Images To Overcome CLS Issue?
People Also Read:- How To Solve You Are About To Redirect Issue In Blogger
What are the types of sticky ads?
There are two types of sticky ads that are present till now and they are Horizontal Sticky Ads, Vertical Sticky Ads.
Horizontal Sticky Ads:- Horizontal sticky ads are those ads that present in a horizontal manner. Such types of ads are used in the Top and Footer of the sites. Anchor Ads are the best example of such types of ads.
People Also Read:- Google AdSense Address verification PIN in Nepal within 15 Days
Vertical Sticky Ads:- Vertical sticky ads are those ads that are present in a vertical manner. Such types of ads are present in left, right, left-sidebar, right-sidebar. We can see such types of ads only in desktop mode.
What are the things to be considered before the implementation of sticky footer ads?
There are a few things you have to remember before the implementation of the sticky footer ads. And this guidance is provided by AdSense and if you do not follow it then your account got disabled.
- Don't implement sticky footer ads in Gaming Websites.
- Don't implement sticky footer ads in the infinite post-loading websites.
- Ads must not cover more than 30% of the screen area at any screen and time.
- Ads should not move with the Cursor Movement in both Mobile and Desktop screens.
- No more than 1 Vertical sticky ad is allowed per viewport.
- No more than 1 Horizontal sticky ad is allowed per page.
What are the Google Adsense Guidelines Regarding Sticky Footer Ads?
Google Adsense has provided some guidelines for sticky footer ads which every website owner has to follow. If he/she doesn't follow these guidelines then his/her Google Adsense account got disabled so, you also have to be very careful before implementing the footer sticky ads in your site.
- Your site must not be a gaming and infinite loading site.
- In footer sticky ads, ads shouldn't cover more than 30% space.
- Bottom sticky ads should not move with the movement of the mouse in both mobile and desktop screens.
- You cannot change the responsive ads code for the bottom space.
- You cannot trick or force users to click on the ads.
- You have to add a close button in the bottom sticky ads to maintain the user experience.
- If you use both Anchor ads from auto ads and Sticky footer ads code then you have to turn off or remove one code so, that it does not overlap the other advertiser ads.
- See "things to be considered before the implementation of sticky footer ads" for more.
How to add Responsive Sticky Footer Ads on Blogger and WordPress Blog using HTML Only?
You have to follow every step correctly so that you will be able to show bottom sticky ads on blogger and WordPress blog.
- Open Blog and click on the "Layout" tab.
- Now copy the below 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('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> - Please replace the ca-pub-XXXXXXXXXXXXXXXX and data-ad-slot="XXXXXXXXXX" code with your own code and if you want to add a fixed-sized ad then you can replace the above responsive AdSense Code with a fixed-sized AdSense Code.
- Paste the above code anywhere in the layout tab by clicking on "Add Gadgets".
- After clicking on Add Gadget click on "HTML/JavaScript".
- Now, paste the above-copied code inside the "Configure HTML/JavaScript" of HTML/JavaScript,
- Click on the "Save" button.
The above steps are for showing footer ads using a single code and I highly recommend to everyone to use this code instead of using below CSS and HTML code or any other code from another website.
People Also Read:- How to make $100 from Honeygain {You Don't Know About It?}
How to add Responsive Sticky Footer Ads on Blogger and WordPress Blog using CSS and HTML?
This is another way to show the sticky footer ads on your website for this you have to add some CSS and HTML code to your website. Below are the steps you have to follow to show sticky ads on the blog using CSS and HTML are:-
- Open your blog, click on the "Theme" tab, and in the theme tab click on the "Customized" button.
- There you have to click on the "Advanced" tab and click on "Add CSS" by clicking on "Theme Option".
- Now, copy and paste the below CSS to your that "Add CSS" section.
- Now, copy the below HTML code and paste it just above the </body> body close tag.
<div class='sticky-ads' id='sticky-ads'> <div class='sticky-ads-close' onclick='document.getElementById("sticky-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='sticky-ads-content'> <ins class="adsbygoogle" style="display:inline-block;height:70px;width:100%;line-height:70px;" data-ad-client="ca-pub-xxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>
- Replace the yellow color highlighted with your Adsense Code.
- Save theme and you will successfully add-footer sticky ads to your website.
.sticky-ads{
position: fixed;
bottom: 0; left: 0;
width: 100%; min-height: 70px; max-height: 200px;
padding: 5px 0;
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; }
.sticky-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); }
.sticky-ads .sticky-ads-close svg { width: 22px; height: 22px; fill: #000; } .sticky-ads .sticky-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }
If you want to show the footer sticky ads on mobile viewport only then you can add the below code and if you do this then the ads will not be shown in the desktop viewport so, if you want to do then you can do it by the following below steps.