how to make anchor ads appear at the bottom of the screen

byMR MARWAT TECH •January 05, 2024 • 2 min read

0

how to make anchor ads appear at the bottom of the screen

Hello & assalaam o aleykum everyone, on this occasion I will share how to make anchor ads appear at the bottom of the screen on mobile or desktop and responsive of course.

This type of ad is also commonly referred to as floating ads, floating ads, sticky ads, this type of ad itself is actually already provided by Google AdSense by simply activating automatic ads and ticking anchor ads .

but this automatic ad has the disadvantage that the position is not fixed, sometimes it appears above and sometimes below and more often appears on the top screen, while most people prefer this type of ad to appear on the bottom screen because it doesn't cover the header, besides that it also ads This automatic anchor can not appear on the desktop only mobile only.

DEMO

so for those of you who want to make anchor ads, floating ads, floating ads, sticky ads only appear on the bottom screen, here's how below.

How to Make Anchor Ads Appear Below Screen

please create an ad unit first by selecting display ads and selecting responsive size and note down your data-ad-client and data-ad-slot codes .

then go to blogger select temaand edit htmlcopy and place the css below just above the code ]]></b:skin>

.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{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
      
    /* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
    .darkMode .stickAd,.darkMode .stickAdclose{border-color:rgba(255,255,255,.1)}
    .darkMode .stickAd{background-color:#2d2d30}

and please copy the code below and place it above the </body> code if you don't find it it may have been parsed so it will look like </body>


    <b:if cond='data:view.isPost'>
    <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
    <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>

please change your ca-pub code and data-ad-slot , this ad only appears on mobile and in posts.

if you want to display it on the desktop also remove the code <b:if cond='data:blog.isMobileRequest == "true"'> and the closing </b:if>

and if you want to show ads on every page remove the code <b:if cond='data:view.isPost'> and the closing </b:if>

if you have, please click save and see the results, here are some ways to make anchor ads appear at the bottom of the screen, hopefully it will be useful.

Source code:
www.miusm-tech.com

Tags: google adsense