|
| How to make anchor ads appear at the bottom of the screen |
Hello everyone, on this occasion I will share how to create anchor ads that appear at the bottom of the screen on both mobile and desktop, and of course remain fully responsive.
This type of ad is also commonly known as a floating ad, sticky ad, or anchor ad. Actually, this ad type is already provided by Google AdSense by simply enabling Auto Ads and checking the Anchor ads option.
However, Auto Ads have a drawback: the ad position is not fixed. Sometimes it appears at the top, sometimes at the bottom, and most often at the top of the screen. Many users prefer anchor ads to appear at the bottom because they do not cover the header. In addition, AdSense automatic anchor ads only work on mobile devices and do not appear on desktop.
So, if you want to create anchor ads, floating ads, or sticky ads that appear only at the bottom of the screen, follow the steps below.
How to Make Anchor Ads Appear at the Bottom of the Screen
First, create an ad unit by choosing a Display ad and selecting the Responsive size. Take note of your data-ad-client and data-ad-slot.
Next, go to Blogger, select Theme, then Edit HTML.
Copy and paste the CSS code below just above the
]]></b:skin> tag.
.stickAd{position:fixed;bottom:0;left:0;right:0;width:100%;min-height:70px;max-height:200px;padding:5px 5px;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1);transition:all .1s ease-in;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:50;border-top:1px solid #eceff1}
.stickAdclose{width:40px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;border:1px solid #eceff1;border-bottom:0;border-right:0;position:absolute;right:0;top:-30px;background-color:inherit}
.stickAdclose svg{width:18px;height:18px;fill:none!important;stroke:#48525c;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
.stickAdcontent{flex-grow:1;overflow:hidden;display:block;position:relative}
.stickAdin:checked ~ .stickAd{padding:0;min-height:0}
.stickAdin:checked ~ .stickAd .stickAdcontent{display:none}
.stickAdin:checked ~ .stickAd .stickAdclose svg{transform:rotate(180deg)}
/* Dark mode (adjust class if different or remove this section) */
.darkMode .stickAd,
.darkMode .stickAdclose{border-color:rgba(255,255,255,.1)}
.darkMode .stickAd{background-color:#2d2d30}
Then copy the HTML code below and place it above the
</body> tag.
If you can’t find it, it may appear as
<!--</body>--></body>.
<b:if cond='data:view.isPost'>
<b:if cond='data:blog.isMobileRequest == "true"'>
<input class='stickAdin hidden' id='stickAdin' type='checkbox'/><div class='stickAd'><label class='stickAdclose' for='stickAdin'><svg viewBox='0 0 24 24'><g transform='translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg></label><div class='stickAdcontent'><ins class='adsbygoogle' data-ad-client='ca-pub-8802465226xxxxxx' data-ad-format='horizontal' data-ad-slot='8252xxxxxx' data-full-width-responsive='false' style='display:block;text-align:center'></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div></div></b:if></b:if>
Replace your own ca-pub and data-ad-slot values. This ad will appear only on mobile devices and only inside posts.
If you want the ad to appear on desktop as well, remove:
<b:if cond='data:blog.isMobileRequest == "true"'>
and its closing </b:if>.
If you want the ad to appear on all pages, remove:
<b:if cond='data:view.isPost'>
and its closing </b:if>.
After that, click save and check the result. That’s all for this guide on how to make anchor ads appear at the bottom of the screen . Hopefully, it’s useful.
