How to Make Hide and Show Ads On AMP Blogger / Non AMP Blogger

Ads are one of the biggest sources of income for a website or blog. Without advertising, there may be websites like the media that will go bankrupt because they have no income.

To increase the rate of ad clicks, many ways are done by a website so that the ad attracts visitors to click on it.

As an example of the latest ad innovation on a website is parallax ads. In which the advertising embedded in a website, and if we scroll, then advertising will follow. Read: amp-fx-flying-carpet.

In addition, there are many more ad slot innovations on a website that is interesting to apply.
This time Here's How to Make Blogger Slot Ads To Have Options Close and Show Ad. For example, you can see ads under the navigation menu of this blog.

So your blog visitors can have the option to view ads or hide ads. And of course, The slot you can apply to your Adsense ads.

How to Make Blogger Slot Ads To Have Options Close and Show Ad

1. The first one needed,  makes CSS for that ad slot. Please copy the CSS code below. Then paste on amp-custom for AMP blog, and on b:skin on the non-amp blog.

/* Top Banner AMP idn START*/ .top_banner{margin:20px auto;padding:0 10px 20px;position:relative;width:100%;max-width:990px;height:auto} #close_topbanner,#open_topbanner{font-family:Roboto,sans-serif;position:absolute;padding:0;bottom:0;background:0 0;border:none;cursor:pointer;color:#888;font-size:15px;font-weight:500;height:20px;line-height:20px;} #close_topbanner{right:10px} #open_topbanner{width:100px;text-align:center;right:50%;margin-right:-50px} #close_topbanner:focus,#open_topbanner:focus{outline:0} /* Top Banner AMP idn END*/

2. After CSS is created, now we just call DIV that made with the name of the top_banner. Please copy the code below in the desired place. I recommend to paste it before the code </ nav>.

For Blogger with AMP

<div class='top_banner'> <div id='topbanner'> <amp-ad data-ad-client='ca-pub-xxxxxxxxxxx' data-ad-slot='XXXXXX' height='250' layout='fixed-height' type='adsense'> </amp-ad></div> <button id='close_topbanner' on='tap:topbanner.hide, close_topbanner.hide, open_topbanner.show' role='button' tabindex='0' title='Close'>Hide Ad</button> <button hidden='' id='open_topbanner' on='tap:topbanner.show, close_topbanner.show, open_topbanner.hide' role='button' tabindex='0' title='Open'>Show Ad</button> </div>

If you have already created the Adsense ads before, then the ads will be instantly visible. But if you just create a new ad unit, usually only visible white blank pages only. It's may take several minutes.

Maybe useful :)