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

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect