Cara Membuat 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 seperti media yang akan bangkrut karena tidak memiliki penghasilan.

Untuk menaikan rate klik iklan pun, banyak sekali cara yang dilakukan oleh sebuah website agar iklan tersebut menarik pengunjung untuk meng-klik nya.

Sebagai contoh inovasi iklan dalam sebuah website yang terbaru adalah iklan parallax. Di mana iklan tersebut tertanam dalam sebuah website, dan jika 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 berbagi mengenai cara membuat iklan bisa ditampilkan dan disembunyikan (show / hide ad). Contohnya bisa anda lihat iklan di bawah menu navigation blog ini.

Jadi pengunjung blog anda bisa memiliki pilihan untuk melihat iklan atau menyembunyikan iklan. Slot tersebut tentu saja bisa anda terapkan pada iklan adsense anda. Berikut adalah cara membuat slot iklan Show / Hide pada Blogger.

1. Yang pertama kali dibutuhkan, tentu saja membuat CSS untuk slot iklan tersebut. Silahkan copy kode 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, sekarang kita tinggal panggil DIV yang dibuat dengan nama top_banner tersebut. Silahkan copy kode di bawah ini di tempat 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 kode unit iklan adsense yang telah anda buat.

3. Setelah selesai, silahkan klik SAVE.

Jika anda sudah membuat iklan adsense tersebut sebelumnya, maka iklan akn langsung terlihat. Namun jika anda baru membuat unit iklan baru, biasanya hanya terlihat halaman blank putih saja.

Semoga bermanfaat :)