Cara Menciptakan Iklan Adsense Show / Hide Di Blogger

Inilah Cara Membuat Slot Iklan Blogger Agar ada Pilihan Close and Show Ad

Iklan merupakan salah atu sumber penghasilan terbesar bagi sebuah website maupun blog. Tanpa iklan, mungkin banyak website ibarat media yang akan gulung tikar sebab tidak mempunyai penghasilan.

Untuk menaikan rate klik iklan pun, aneka macam cara yang dilakukan oleh sebuah website semoga iklan tersebut menarik pengunjung untuk meng-klik nya.

Sebagai pola penemuan iklan dalam sebuah website yang terbaru adalah iklan parallax. Di mana iklan tersebut tertanam dalam sebuah website, dan jikalau di kita scroll, maka iklan akan mengikutinya. Baca: Iklan amp-fx-flying-carpet.

Selain itu, masih banyak lagi inovasi-inovasi slot iklan dalam sebuah website yang menarik untuk diterapkan.

Dan kali ini, saya akan coba menyebarkan mengenai cara menciptakan iklan dapat ditampilkan dan disembunyikan (show / hide ad). Contohnya dapat anda lihat iklan di bawah sajian navigation blog ini.

Makara pengunjung blog anda dapat mempunyai pilihan untuk melihat iklan atau menyembunyikan iklan. Slot tersebut tentu saja dapat anda terapkan pada iklan adsense anda. Berikut yakni cara menciptakan slot iklan Show / Hide pada Blogger.

1. Yang pertama kali dibutuhkan, tentu saja menciptakan CSS untuk slot iklan tersebut. Silahkan copy instruksi CSS di bawah ini. Lalu paste pada amp-custom untuk blog AMP, dan pada b:skin pada blog non-amp.

 /* 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. Setelah CSS dibuat, kini kita tinggal panggil DIV yang dibentuk dengan nama top_banner tersebut. Silahkan copy instruksi di bawah ini di daerah yang di inginkan. Saya merekomendasikan untuk menempelnya sebelum kode </nav>.

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

Keterangan:

Silahkan ganti xxxxxxxx dengan detail adsense klien dan ad-slot yang telah anda buat. Saya  merekomendasikan ukuran 970X250.

Untuk blog non-AMP

<div class='top_banner'>  <div id='topbanner'>  Tempel Kode Adsense Anda disini  </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>

Keterangan:
Silahkan copy dan pastekan instruksi unit iklan adsense yang telah anda buat.

3. Setelah selesai, silahkan klik SAVE.

Jika anda sudah menciptakan iklan adsense tersebut sebelumnya, maka iklan akn pribadi terlihat. Namun jikalau anda gres menciptakan unit iklan baru, biasanya hanya terlihat halaman blank putih saja.

Semoga bermanfaat :)

Berbagi :