Tuesday, November 27, 2018

How to add Floating AdSense Ad at Bottom Screen

    How to Create Floating  AdSense Ad Without Close Button in Mobile View

    Floating Ad

    Floating Ad is an ad placement with a high CTR. By adding a floating ad on a blog, the possibility of getting ad clicks from visitors is very large.

    Placement of this type of ad is actually prohibited by Google, especially for those of you who use ads from Google AdSense. However, it turns out there are still many Webmasters or Bloggers who use this method. Even large media such as 9Gag also place this type of advertisement.

    This time, We will share tutorials to make AdSense ads float at the bottom of the screen. Making this element uses CSS, and will only appear when the website is opened using the Smartphone browser. 

    Create Floating Ad

    Open the Blogger.com dashboard, then select the blog that will be edited. Click Themes, then click Edit HTML.

    For who use non-AMP, copy this CSS before ]]></b:skin> , for Blogger who use AMP Blogger Template, copy this CSS just after <style amp-custom='amp-custom'>

    #adfloatBottom {
        left: 0;
        position: fixed;
        text-align: center;
        bottom: 0px;
        width: 100%;
        z-index: 999;
        background: rgba(249, 249, 249, 0.5686274509803921)
    }
    
    @media (min-width:768px) {
        #adfloatBottom {
            display: none
        }
    }
    
    

    CSS above uses Responsive media queries that make the #adfloatBottom element only appear on mobile pages.

    Next step, you should copy this HTML before </body> 

    <div id='adfloatBottom'>
        YOUR ADSENSE AD UNIT HERE
    </div>

    Change yellow text with your AdSense Ad Unit Code, i recommended use 320X50 Ad unit. 

    For finish this step, click Save.  So the result will shown like this:


    It should be noted, I am not responsible if you get a problem with your AdSense account, because basically the placement of this ad is prohibited by Google.

    Good luck :)