Cara Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Untuk Blog Non AMP HTML

DP BBM 23 - Cara Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Untuk Blog Non AMP HTML - Hallo selamat siang dan selamat berjumpa kembali sahabat blog DP BBM 23 semuanya, dimana pun kalian berada, setelah semalam membahas mengenai Jika Domain Utama Expired Apa Adsense Bakalan Raib, Tidak Bisa Tampil Lagi Di Blog ??, dikesempatan siang inipun akan membahas hal serupa, yaitu mengenai Adsense Untuk Cara Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Untuk Blog Non AMP HTML... untuk ulasan singkatnya simak terus dibawah ini !!!

Ok guys... berbicara soal Adsense rasanya tak akan ada habisnya untuk di perbincangkan, dari mulai para blogger senior sampai blogger junior hehe, tentunya sudah tidak asing lagi ketika mendengar kata Adsense maupun GA... bahkan hampir dari semua blog yang ada keseluruhan sudah terpasangi iklan dari Adsense ini...


Dan baiknya lagi para blogger diluaran sana membagikan pengalaman pribadinya, mulai dari awal pendaftaran, penolakan maupun di terimanya oleh Adsense, bahkan sampai - sampai cara pemasangan dan pembuatan unit iklannya saja di perincikan secara detail... waahh baik hati banget ya... seperti yang saat ini mau saya bahas, cara ini saya terapkan dari blog nya Mas Adhy Suryadi... taukan siapa beliau ?? jika gk tau, singkatnya Mas Adhy Suryadi itu pemilik blog Kompi Ajaib... so, dengan begitu sobat yang mengikuti tutorial ini, jangan khawatir akun adsensenya kenapa - kenapa, karena cara yang mau saya bagikan ini, terjamin terpercaya, karena sang ahlinya yang membuat script untuk penerapan unit iklan billboard ini... dan berikut ini penampakan blog saya yang lainnya, Sebelum pemasangan unit iklan Billboard...


Sebelum Pemasangan Unit Iklan Billboard

Kurang lebih seperti itulah penampakannya, sebelum di pasangi iklan Adsense Billboard, dan dibawah ini perubahan wujudnya hehe, setelah terpasangi iklan Billboard ( iklan bersepanduk besar )... dan untuk hasilnya lebih lanjut, silahkan menuju TKP dengan mengklik tombol "DEMO" dibawah ini...


Sesudah Pemasangan Unit Iklan Billboard

Dapatkah sobat melihat iklan Billboard yang saya maksud ?? itulah hasil jadinya bro... untuk script iklan ini, Mas Adhy menambahkan tombol Close Ad ( Untuk menutup iklan ) jadi jika pengunjung merasa risih dengan tampilan iklan tersebut, bisa dengan mengklik tombol Close Ad... dan untuk menampilkannya kembali cukup dengan mengklik tombol Open Ad, gimana keren bukan ?? dan berikut ini langsung saja ke tutorial Cara Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Untuk Blog Non AMP HTML

1. Seperti biasa, pertama sobat buka dulu dashboard Blogger.Com...
2. Lalu Buka Template dan klik Edit HTML...
3. Cri Kode </head> jika sudah ketemu, letakkan kode dibawah ini, tepat diatas 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>

4. Setelah kode tersebut terpasang, jangan dulu di Save, tapi pasang dulu kode HTML dibawah ini, dan letakkan dibawah 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>

Jika Sudah dipasang, jangan lupa sobat rubah dulu bagian ca-pub-xxxxxxxxxxxxxx dengan kode ID adsense sobat, dan juga bagian xxxxxxxxxxx dengan kode unit iklan yang sobat buat... mudahkan ?? dan kiranya hanya itu saja yang dapat admin blog DP BBM 23 sampaikan / berikan pada kesempatan siang hari ini, mengenai Cara Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Untuk Blog Non AMP HTML... semoga bermanfaat ( bagi yang membutuhkan ), selamat siang dan sampai jumpa lagi... bye !!!!



Before you continue reading, it is necessary to underline that what is written is only a reference! so if there are errors in words and delivery methods, please understand! and below the recommendation article for you!


Content Disclaimer!

  • I as the owner of "BlogCaraOcha" thank you to all loyal readers, and those who accidentally stopped by here.

    And I apologize if there are many advertisements on the homepage or in the post.

    After "BlogCaraOcha" is accepted as a Google publisher, Google automatically places all advertisements.

  • If the content on "BlogCaraOcha" has similarities with other sites or blogs, it only provides a reference to each other by spreading the word in a simple article.

    With the aim, all internet visitors can easily and freely which if the article is easy to understand.

    In addition, so that readers can easily find what is on the search, with content that can provide content in surfing the internet!

  • All images posted in the article are not 100% owned by "BlogCaraOcha" but are taken from Google Search.

    So if there are similarities with the images on other sites, it is only for illustration only (to decorate the storyline as outlined in the article).

    For some of the images here, they are purely self-created, with the same purpose as illustration only.

    However, if there are inappropriate images and ask to be removed, please provide more detailed information via the contact at "BlogCaraOcha"

  • For content that discusses the product review or tutorial, if there are errors, please be advised that it may be an error in typing words or lacking in detail reviewing.

    So if there are typos and results that are not appropriate, can provide input where the location of the error or lack, so that the content is immediately deleted or corrected.

    But before submitting, try to see between the date / year the post was published with the current date / year.

    Because it could be other times what the written policy has changed.
  • '