Skip to content Skip to sidebar Skip to footer

Cara Membuat Iklan Billboard Mirip Youtube di Blog AMP

Pasti anda sering melihat tampilan iklan billboard di youtube yang disimpan di <head> , dan bagi blog AMP maun non AMP sebenarnya sangat mudah untuk menyimpannya apalagi ditambah dengan tombol show hide yang tujuannya ketika ada pembaca yang merasa terganggu bisa menutup iklannya, karena karakter pembaca berbeda-beda.

Sebenarnya trik ini sudah dibahas di blog kompiajaib, karena saya merasa tertarik dengan pembahasan ini, untuk itulah saya tulis di blog ini. Pastinya anda bertanya seberapa baguskah kinerja slot iklan billboard ? sebenarnya ini bisa dibilang pengganti atau solusi membuat iklan page level ads untuk blog AMP, karena script page level ads tidak bisa disimpan di blog AMP dan belum google sendiri belum membahas cara membuat iklan page level ads di blog amp, selain billboard anda juga bisa menggunakan amp-sticky ads.

Saya pernah membaca sebuah artikel di blog facebook tentang penempatan iklan. Ternyata menurut seorang ahli marketing, penempatan iklan yang bagus dan meningkatkan konversi klik yaitu iklan yang ditempatkan di <head> , karena akan terlihat langsung oleh costumer atau pembaca, dengan asumsi beberapa pembaca membutuhkan informasi dari iklan tersebut.

Karena saya juga menggunakan template kompiminimalis silahkan lihat contohnya yukeepoin.xyz

Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.
Berikut caranya membuat unit iklan billboard 970x250

Silahkan simpan CSS berikut di style amp-custom blog Anda.

/* Top Banner */
.top_banner{margin:20px auto;padding:0 10px 20px;position:relative;width:100%;max-width:990px;height:auto}
#close_topbanner,#open_topbanner{font-family:Roboto,sans-serif;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}

Kemudian silahkan simpan HTML berikut di bawah kode <body> atau dibawah tag penutup amp-sidebar

<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'>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxx' height='250' layout='fixed-height' type='adsense'>
 </amp-ad>
  </div>
<button id='close_topbanner' on='tap:topbanner.hide, close_topbanner.hide, open_topbanner.show' role='button' tabindex='0' title='Close'>Close Ad</button>
<button hidden='' id='open_topbanner' on='tap:topbanner.show, close_topbanner.show, open_topbanner.hide' role='button' tabindex='0' title='Open'>Open Ad</button>
  </div>
</b:if>

Selamat mencoba, semoga bisa meningkatkan penghasilan adsense anda.