Membuat Iklan Adsense Billboard di Blog Non AMP HTML

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Membuat Iklan Adsense Billboard di Blog Non AMP HTML, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang android, Blogger, Tutorial, Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Memang unit iklan adsense billboard ini belum banyak yang menggunakannya, akan tetapi harga perkliknya cukup menggiurkan dari pada unit iklan adsense ukuran yang lainnya. Tutorial ini saya dapatkan dari blog Kompi Ajaib.

Ukuran dari iklan adsense ini adalah 970x250 dan 300x250, jika Anda sedang berkunjung dengan layar 1024px maka unit iklan ini akan berukuran 970x250, dan jika Anda memakai ukuran layar dibawah 1024px maka ukuran iklan ini adalah 300x250px.

Cara Membuat Unit Iklan Adsense Billboard Dengan Tombol Show Hide

Ohh iya, saya belum memberitahukan, unit iklan billboard ini juga menggunakan tombol show dan hide pada bagian bawahnya, jadi jika Anda atau pengunjung Anda merasa terganggu dengan iklan ini, bisa saja ikln ini di hide untuk waktu sementara.

1. Silakan Anda Copy dan Paste kode dibawah ini ke 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>

2. Kemudian Copy dan Paste kode dibawah ini ke 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>

Silakan Anda sesuaikan data-ad-client dan data-ad-slot dengan punya Anda Silakan save template Anda, jika Ada belum memasang js Adsense, maka sebaiknya Anda pasang terlebih dahulu agar unit iklan adsense bisa muncul.