CSS Media Untuk Unit Iklan Responsive Adsense

CSS Media Untuk Unit Iklan Responsive Adsense

Bola Hero Gawai

CSS Media Untuk Unit Iklan Responsive Adsense

CSS Media Iklan Responsive Adsense
Seiring dengan berkembangnya zaman responsive web, maka iklan Adsense pun telah menyesuaikan dirinya dengan menyediakan unit iklan responsive baik untuk jenis iklan teks, gambar, ataupun teks/gambar.

Nah kemarin ada sahabat kompi yang menanyakan perihal kode responsive Adsense yang saya pakai di blog Kompi Ajaib ini. Dan sekarang saya ada waktu untuk menjawabnya sekalian saya jadikan postingan agar bisa berguna untuk yang lain.

Seperti kita ketahui, Adsense sendiri sudah memberikan CSS media untuk unit iklan responsive, namun hanya untuk ukuran iklan dengan dimensi 728px X 90px.

Untuk membuat iklan responsive di Adsense ini silahkan Anda buat Unit Iklan Baru, silahkan beri nama untuk iklannya untuk menentukan class pada kode iklan juga, kemudian pilih Responsive dan silahkan atur type iklannya kemudian Simpan dan Ambil Kode. Pada dialog box yang muncul, silahkan pilih Mode Lanjutan seperti gambar di bawah ini.

Kode Iklan Responsive Adsense

Dan biasanya kode iklannya akan seperti di bawah ini.


<style>
.Adsenseresponsive { width: 320px; height: 50px; }
@media(min-width: 500px) { .Adsenseresponsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .Adsenseresponsive { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- testresponsive -->
<ins class="adsbygoogle Adsenseresponsive"
     style="display:inline-block"
     data-ad-client="ca-pub-212428259xxxxxxx"
     data-ad-slot="936446xxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Nah sekarang kita menambahkan CSS media-nya agar lebih sesuai dengan ukuran device mobile.

Untuk Iklan 728px X 90px


<style scoped='scoped' type='text/css'>
.Adsenseresponsive { width: 200px; height: 60px; }
@media(min-width: 240px) { .Adsenseresponsive { width:200px; height: 60px; } }
@media(min-width: 300px) { .Adsenseresponsive { width:234px; height: 60px; } }
@media(min-width: 375px) { .Adsenseresponsive { width: 320px; height: 100px; } }
@media(min-width: 500px) { .Adsenseresponsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .Adsenseresponsive { width: 728px; height: 90px; } }
</style>

Kode <style> diganti dengan <style scoped='scoped' type='text/css'> agar tidak error validasi HTML5.

Dan silahkan ganti atau sesuaikan kode class .Adsenseresponsive dengan kode class unit iklan yang Anda buat.

Untuk Iklan 970px X 90px

Tambahkan kode CSS media di bawah ini pada kelompok CSS media unit iklan 728px X 90px di atas tadi


@media(min-width: 1000px) { .Adsenseresponsive { width: 970px; height: 90px; } }

Untuk unit iklan 970px X 250px tinggal ganti angka pada height di atas dengan 250px.

Untuk Iklan 300px X 250px


<style scoped='scoped' type='text/css'>
.Adsenseresponsive { width: 200px; height: 200px; }
@media(min-width: 320px) { .Adsenseresponsive { width:200px; height: 200px; } }
@media(min-width: 350px) { .Adsenseresponsive { width: 300px; height: 250px; } }
</style>

Untuk Iklan Tinggi 300px X 600px


<style scoped='scoped' type='text/css'>
.Adsenseresponsive { width: 160px; height: 600px; }
@media(min-width: 320px) { .Adsenseresponsive { width: 300px; height: 600px; } }
</style>

Namun khusus untuk iklan yang di simpan di dalam postingan, agar tidak error pada validasi HTML5 silahkan simpan kode CSS media unit iklannya di atas kode ]]></b:skin> atau </style> (tanpa kode <style scoped='scoped' type='text/css'> dan penutupnya </style>)

Dan lengkapi kode async menjadi async='async' pada js-nya agar tidak error ketika template di-save. Dan jika kita menyimpan lebih dari satu iklan Adsense di blog, kita bisa menyimpan js-nya hanya satu saja dan simpan di atas kode </body> (dan hapus kode js-nya di tiap-tipa kode iklannya) untuk sedikit mengurangi loading blog.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×