Dec 13, 2017

Memasang Iklan Billboard 970x250 Dengan Tombol Show Hide Ad Untuk Non AMP HTML

Iklan Billboard 970x250

Setelah kemarin kita uji coba Meningkatkan CPC Adsense Menggunakan Billboard 970x250 Dengan Tombol Show Hide Ad Untuk AMP HTML dan mendapatkan respon serta tanggapan yang banyak dari anggota Grup Blogger baik yang di Indonesia maupun di Luar Negri. Ada banyak beragam tanggapan dari yang sukses memasangnya dengan mengikuti Step by step penerapannya dan sudah merasakan hasil yang baik untuk peningkatan CPC adsense. 

Ada juga beragam tanggapan yang lain dari anggota dan pengunjung setiap melalui inbox mail, yang tidak berhasil menerapkan kode script tersebut didalam blog yang dikelolanya, hal ini membuat rasa penasaran saya untuk mengetahui dan meminta link blog tersebut, dan ternyata Agan agan atau Mas Bro pengunjung blog dibalikseo ini tidak memperhatikan Judul dari postingan yang lalu Meningkatkan CPC Adsense Menggunakan Billboard 970x250 Dengan Tombol Show Hide Ad Untuk AMP HTML.

Nah di kesempatan kali ini saya akan berbagi dengan Materi yang sama namun cara yang berbeda khusus untuk Pemasangan Iklan Billboard 970x250 yang akan dipasang pada Blog Non AMP dan ini sekaligus untuk menjawab pertanyaan sebelumnya.

Bagaimana sobat penasaran dan mau mencobanya, mari kita simak pembahasannya Cara Memasang Iklan Billboard 970x250 Dengan Tombol Show Hide Ad Untuk Non AMP HTML.

Langkah Pertama
Silahkan salin kode CSS style berikut di atas kode </head>.

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<style type='text/css'>
/* Top Banner */
.top_banner{margin:20px auto;padding:0 10px 20px;position:relative;width:100%;max-width:990px;height:auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#close_topbanner,#open_topbanner{font-family:inherit;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}
.adsenseresponsive{width:970px;height:250px;}
@media screen and (max-width:960px){
.top_banner{max-width:320px;}
.adsenseresponsive{width:300px;height:250px;}
}
</style>
</b:if>


Langkah Ke Dua
Silahkan salin kode HTML berikut di bawah kode <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'>
<!-- Simpan Kode Iklan di Bawah ini -->
<ins class="adsbygoogle adsenseresponsive"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
  </div>
<button id='close_topbanner' onclick="document.getElementById('topbanner').style.display='none';close_topbanner.style.display='none';open_topbanner.style.display='block';" role='button' tabindex='0' title='Close'>Close Ad</button>
<button hidden='' id='open_topbanner' onclick="document.getElementById('topbanner').style.display='block';close_topbanner.style.display='block';open_topbanner.style.display='none';" role='button' tabindex='0' title='Open'>Open Ad</button>
  </div>
</b:if>

Perhatikan kode yang ditandai ca-pub-xxxxxxx silahkan sesuaikan, dan data-ad-slot='xxxxxxxxx' silahkan juga sesuaikan.

Perhatikan juga setiap langkah dan penerapan kodenya, jika sudah selesai silahkan SAVE. Semoga bermanfaat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.