Great News! Try our new tool to convert img to amp-img. Try Now!

Tuesday, November 27, 2018

How to add Floating AdSense Ad at Bottom Screen

How to add Floating Bottom Adsense in Blogger Blog with CSS Only in Mobile Web Version without Close Button

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 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'>

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 :)