Create Adsense Billboard 970x250 Ad Slot With Show Hide Ad Button For AMP


Create Adsense Billboard 970x250 Ad Slot With Show Hide Ad Button For AMP

Live Demo Here

My Backlink - This is inspired by billboard ads on Youtube, just check out the ads at the top of the Youtube page of 970x250 or Adsense 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.