Cara Membuat Iklan Billboard Responsive di Bawah Hedaer
www.azid45.web.id - Cara Membuat Iklan Billboard Responsive di Bawah Header atau Diatas Postingan. Assalamualaikum.wr.wb, mungkin teman-teman sudah tahu apa itu adsense, dan cara mendapatkan layanan google adsense. Setelah kita mendapatkan layanan periklanan dari google adsense, maka yang harus kita lakukan adalah menempatkan iklan kta sebaik mungkin dan tentunya juga tidak mengkesampingkan visitor serta selalu update artikel minimal seminggu sekali. Dalam menempatkan jenis iklan, kita harus tahu mana iklan yang sering diklik oleh pembaca dan tidak sering diklik oleh pembaca. Biasanya iklan yang sering diklik oleh pembaca adalah iklan jenis link, karena iklan tersebut samar seperti kategori sehingga pembaca kadang tertipu. Namun adakalahnya kita juga harus membuat iklan yang menarik ssperti iklan berukuran 300x600 yang biasa diterapkan oleh mas timon blogger terkenal karena jumlah visitornya yang super banyak (mastimon.com), selain menarik pendapatan dengan iklan tersebut juga cukup besar.
Terus apakah ada jenis iklan lagi selain itu?, jelas ada, selain iklan berukuran 300x600 kita juga dapat memasang iklan jenis billboard. Jenis iklan ini bisa berukuran 970x250 dan biasanya dtempatkan diatas postingan atau tepat dibawah header. Jenis iklan billboard ini biasanya diterapkan oleh kak igniel (igniel.com). Iklan jenis ini selain sangat menarik untuk dipandang, juga menghasilkan yang cukup besar. Namun untuk jumlah klik iklan jenis iklan ini volumenya kecil.
Dalam menerapkan iklan ini jika kodenya langsung ambil di google adsense, maka kadang kala sering tidak muncul di versi mobile dan kadang kala tidak responsive. Untuk itu kita harus mensetting iklan billboard agar responsive, lantas bagaimana caranya?, cukup mudah kita sebelumnya bisa membuat iklan teks/gambar responsive dan nantinya kita tinggal copas kode slot iklannya saja. Berikut caranya;
Iklan Billboard Versi Kompi Ajaib
Dalam pembuatan iklan billboard saya akan menyajikan dua versi, yaitu versi milik bang kompiajaib dan kak iginiel. Ok, yang pertama versi kompiajaib, keunggulan iklan dari bang Adi Suryadi ini adalah iklannya bisa dibuka dan ditutup (show - hidden).
Langsung saja, hal pertama yang teman-teman lakukan adalah copy kode ca-pub dan data-slot iklan responsive terlebih dahulu dan pastekan ko notepad. Setelah itu buka blogger - template - edit HTML
Letakkan kode berikut tepat di atas kode </head>
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "error_page"'>
<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>
Kemudian letakkan kode berikut ini dibawah kode </header> atau <body>
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "error_page"'>
<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>
NB: ganti ca-pub xxxxxxxxxxxx dengan kode ca-pub teman-teman dan data-slot xxxx dengan data-slot teman-teman yang sudah dicopy tadi.
Jangan Lupa Save Template
Iklan Billboard Versi Kak Igniel
Untuk iklan billboard kak igniel cara pemasangannya sama, letakkan kode berikut diatas kode </head>
<style type='text/css'>
.billboard {display:block; max-width:1000px; min-width:970px; width:100%; max-height:300px; min-height:250px; height:100%; text-align:center; margin:20px 0px; padding:0px}
@media screen and (max-width:969px){.billboard {min-width:728px; min-height:90px}}
@media screen and (max-width:727px){.billboard {min-width:336px; min-height:280px}}
@media screen and (max-width:335px){.billboard {min-width:300px; min-height:250px}}
@media screen and (max-width:299px){.billboard {min-width:250px}}
@media screen and (max-width:249px){.billboard {min-width:200px; min-height:200px}}
</style>
Setelah itu letakkan kode berikut dibawah kode </header> atau <body>
<ins class="adsbygoogle billboard"
data-ad-client="ca-pub-xxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
NB: ganti ca-pub xxxxxxxxxxxx dengan kode ca-pub teman-teman dan data-slot xxxx dengan data-slot teman-teman yang sudah dicopy tadi.
Jika teman-teman ingin meletakkan iklan tersebut hanya terlihat di postingan bisa mengikuti tutorialnya disini (Cara menampilkan iklan hanya dipostingan, homepage, atau halaman tertentu)
Jika iklan tidak bisa tampil maka, teman-teman tambahkan kode berikut tepat diatas slot ikaln <ins ..........></ins>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
Lebih lengkapnya lihat berikut ini
<ins class="adsbygoogle billboard"
data-ad-client="ca-pub-xxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Menjadi
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
<ins class="adsbygoogle billboard"
data-ad-client="ca-pub-xxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Jika teman-teman ingin memasang kode iklan tanpa diulang dan tentunya mempercepat loading juga, bisa lihat tutorial dari kak igniel disni
Demikian tutorial Cara Membuat Iklan Billboard Responsive di Bawah Hedaer atau Diatas Postingan, semoga bermanfaat.
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.