Cara Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Di Blogger Cara Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Di Blogger - mizipediacom mizipediacom: Cara Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Di Blogger

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Di Blogger

Sunday, February 18, 2018



Selamat berjumpa kembali rekan blogger, pada siang ini saya akan berbagi sedikit tentang Cara Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Di Blogger. 

Saya lihat di website atau blog mereka masih banyak rekan blogger kita yang belum menggunakan unit iklan billboard ini, barangkali tidak tau cara untuk membuatnya atau juga memang tidak suka. hehe


Sebenarnya cara ini sudah banyak yang di share oleh master blogger kita, dan  saya rasa tidak salah nya juga saya untuk share kembali postingan cara membuat slot iklan adsense billbord ini. 

Jika anda seorang blogger pemula baru saja bergelut di dunia blogger, mungkin belum banyak paham masalah mengenai Unit iklan billboard ini , karena pastinya anda bisa jadi tidak punya akun adsense atau blog anda sedang di di buat. 

Nah Penjelasan sedikit dari saya, untuk ukuran dari iklan adsense Billboard ini cukup besar yaitu sekitar 970x250 dan 300x250.  Iklan yang ditampilkan kita atur dengan responsive media query. 

Di layar 1024px ke atas maka akan ditampilkan ukuran 970x250 sementara di layar 1024px ke bawah akan ditampilkan iklan dengan ukuran 300x250. 

ini sehingga akan banyak memakan ruang pada blog atau postingan. Maka dari itu unit iklan ini saya buatkan tombol show hide ad seperti tanda panah merah di bawah. 

Tujuan dari kita untuk membuat Tombol Show Hide Ad adalah" pada saat jika ada pengunjung yang merasa terganggu dengan slot iklan adsense ini, maka mereka bisa mengklik tombol Close As dan iklan bisa disembunyikan oleh pengunjung seperti halnya di halaman Youtube yang juga menggunakan tombol show hide iklan

Bagi anda yang ingin sekali untuk melihat demo dari iklan Adsense Billboard Dengan Tombol Show tersebut, saya sudah menyediakan demo nya di bawah ini. anda bisa melihat gambar video gif sebagai berikut atau lihat langsung saja di blog saya ini jika belum saya hapus.

Bagi anda yang  yang ingin sekali untuk mencobanya silahkan ikuti langkah-langkahnya sebagai berikut ini.

Cara Membuat Slot Iklan Adsense Billboard

1. Pertama , pastikan anda udah masuk di dasbhor milik anda sendiri
2. Kemudian masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Temukan kode di samping ini </head>
4. Silahkan anda simpan 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>
5. Dan selanjutnya anda simpan 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'>
<!-- Kode iklan simpan 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>
Silahkan anda sesuaikan data-ad-client dan data-ad-slot dengan unit iklan responsive Adsense milik Anda.
6. Nah langkah terakhir anda klik save template jika sudah anda masukan code- code tersebut kedalam HTML Blog anda. 

7. Oh ya sampai lupa saya,  dan pastikan juga Anda sudah memasang js Adsense di atas kode </body>

Mungkin penjelasan singkat saya pada siang ini, cukup sampai disini dulu ya, apabila anda mengalami kesulitan untuk cara penerapannya bisa anda klik tombol komentar di bawah ini. Dan saya akan segera membantu anda jik saay tidak sibuk. 

Semoga artikel ini bisa bermanfaat dan dapat membantu anda yang ingin Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Di Blogger. Jangan lupa ikuti trus perkembangan Blog mizipediacom dengan cara berlangganan email di bawah ini. SALAM BLOGGER
Lihat Juga