NixOS Linux 17.03 Installation with KDE Plasma 5 on VMware Workstation

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

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 in 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 in a website that is interesting to apply.
An 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.

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

Note:
Please replace xxxxxxxx with adsense ad-slot and client  details you have created. I recommend the 970X250 size.

For non-AMP

<div class='top_banner'>  <div id='topbanner'>  Copy Adsense Code Here  </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>

Note: Please copy and paste the ad unit ad code you have created.

3. Click SAVE for finish the step.

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.

May be useful :)