Cara Membuat Iklan Billboard Responsive di Bawah Hedaer

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 != &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>

Kemudian letakkan kode berikut ini dibawah kode </header> atau <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>
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

Bagikan :
Reaksi:
PERHATIAN:Jika anda mendownload di blog ini, maka anda akan di redirect terlebih dahulu ke laman Short Safelink untuk keamanan blog. Oleh karena itu jika terjadi error 404 maka terjadi kesalahan dalam klik di laman redirect atau terjadi refresh laman redirect. Untuk mengatasinya anda bisa mengulang kembali klik file yang akan anda download di blog ini. Dan Jika anda ingin bertanya atau bantuan bisa kontak kami dengan Klik Disini atau nomor berikut 085733513782 - Terima kasih.

Berlangganan update artikel terbaru via email:

You Might Also Like:

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

0 Response to "Cara Membuat Iklan Billboard Responsive di Bawah Hedaer"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel