Create Ads AMP 970x250 With Show Hide Ad Button

Adsense Billboard 970x250

MyBacklink86 - This is inspired by billboard adsense on Youtube, just check out the adsense at the top of the Youtube page of 970x250 billboard ad unit.

And there is no harm we try to experiment with this billboard advertising unit, who knows his rea is in the unit.

And it seems still not many bloggers who use this 970x250 billboard advertising unit, probably because of its large size so it takes up a lot of space on the blog.

For that, this ad unit we are equipped with show hide ad button, so if there are visitors who feel annoyed with this slot then the ads can be hidden as well as on the Youtube page also use the show hide ads button.

If you want to try it, please follow the steps below.

Please save the CSS code under the place above ]]></b:skin>.

/* Top Banner */
.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}

Then please save the code below and place it after the code. <body>

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<div class='top_banner'>
<div id='topbanner'>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxx' 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'>Close Ad</button>
<button hidden='' id='open_topbanner' on='tap:topbanner.show, close_topbanner.show, open_topbanner.hide' role='button' tabindex='0' title='Open'>Open Ad</button>
  </div>
</b:if>

Please customize the code <data-ad-client='ca-pub-xxxxxxxxxxxxxx' and data-ad-slot='xxxxxxxxxx' with your responsive ad unit.

And make sure you've installed js amp-ad on your blog.