Skip to main content
FANCYBLOGGERTRICKS

follow us

How to Add a Sticky Footer Floating Adsense Ad on a Blogger Blog

Google Adsense is the largest and mostly used Ad Network when its comes to making money online with a blog. Earning Big with Adsense is not rocket science it requires hard-work and smartness. Tons of bloggers search each day on how to boost Adsense earnings, but later get some guides that either proves to help at first and later get your account banned by Google Adsense. Here is another method of Ad Placement which can boost your adsense earning on mobile devices.
Actually i have been receiving many queries on how to create a sticky footer floating adsense ads on a blogger blogs as it is seen on many blogs (a live preview is on the mobile version of this blog). Which the latest update of Auto Ads which creates a sticky ad that displays at top of the phone screen, leaving an empty space at the bottom of the screen.

Have you been wondering on how to make Adsense ads sticky in website footer? Your search is over. Today I bring to you a responsive adsense floating ads made with sticky-adbar. This responsive sticky ad bar is codded to show at the bottom screen of the mobile screen just like the previous google Pagelevel Ads which now shows at the top of the screen.

To increase and maximize your earnings on mobile devices by using sticky floating ads, follow the below guides,

HOW TO INSTALL FLOATING STICKY ADBAR ON BLOGGER

1. Login to your blogger dashboard, Goto Templates then Edit Html
2. In your html codes press CTRL+F  and search for </head> and paste the below code just above it


<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<style>
/*<![CDATA[*/
.sticky-ad {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: visible;
position: fixed;
text-align: center;
bottom: -104px;
left: 0;
width: 100%;
z-index: 999;
max-height: 104px;
background-image: none;
background-color: #fff;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
margin-bottom: 0;
padding-top: 4px;
transition: all .4s ease-in-out;
}
.sticky-ad-close-button {
position: absolute;
width: 28px;
height: 28px;
top: -28px;
right: 0;
background-image: url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
background-size: 13px 13px;
background-position: 9px;
background-color: #fff;
background-repeat: no-repeat;
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
border: none;
border-radius: 12px 0 0 0;
cursor: pointer;
}
.sticky-ad-close-button:before {
position: absolute;
content: "";
top: -20px;
right: 0;
left: -20px;
bottom: 0;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:active,
:focus {
outline: 0
}
/*]]>*/
</style>
</b:if>

NOTE
We do not want ads showing up on Static Pages, Error Pages, Search Pages and Desktop Version. So we used conditional tags to show this only on Mobile Version of the blog.

3. Now again search for </body> and paste the below codes just above the </body> tag
<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<div class="sticky-ad" id="sticky-ad">
<!-- Paste Your Responsive Ad Code Here -->

<button class="sticky-ad-close-button" onclick="document.getElementById('sticky-ad').style.display='none';" aria-label="Close this ad"></button>
</div>

<script>
//<![CDATA[
window.addEventListener("scroll",function(){
var target = document.getElementById('sticky-ad');
if(window.pageYOffset > 300){
target.style.bottom = "0";
}
},false);
//]]>
</script>
</b:if>


Customization

(i) Replace "Paste Your Responsive Ad Code Here" with adsense ad unit code or any ad network adcode

(ii) The coloured 300 above is to set the hieght of your ad. You can adjust the height from 300 to your desired size to make your Ad taller. For example from 300 to 100. I strongly recommend using horizontal ad units of  320x50 and 320x100. 

4. Finally, Click on Save Template and view your blog on a mobile device to see your sticky floating adsense ads live on your blog footer.

We have successfully add adsense sticky ads on blogger. Next time, I will be sharing how to add sticky ads to AMP Blogs. Keep visiting for more interesting updates on blogger tutorial. Don't forget to keep sharing....

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment