If You Want top backlinks or free guest posting on our blog Lets do it Join in Google News


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

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.


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}
    .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>--></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:

Thanks for reading: how to make anchor ads appear at the bottom of the screen, Sorry, my English is bad:)

About the Author

Hi Greetings! thanks for reaching here, We are so delighted to welcome you on board. Your intelligence and energy make you an asset to your family and love ones.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It Look like there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.