GO Blog

Mengatasi masalah iklan dari google yang tidak responsive adalah satu trik menyesuaikan tampilan blog agar tampil bagus di resolusi berbeda dan hal ini perlu kita lakukan apa lagi bagi sobat yang memasang di blognya. pada awal Agustus 2013, Google Adsense resmi support untuk dukungan iklan dengan Style Responsive. Untuk saat ini memang masih dalam tahap versi Beta dan menurut saya pribadi masih banyak kekurangan dimana iklan yang ditampilkan harus sesuai dengan ukuran Pixel yang sudah kita tetapkan sebelumnya. Responsive Adsense tidak mengalir dan menggulung seperti Responsive pada tampilan, misalkan kita ingin menampilkan iklan dalam media queries max-width:300px berarti kita harus menentukan iklan yang memang mendukung dan sesuai dengan resolusi ini, misalnya pada ads unit 250x250 atau 320x50. Perlu diperhatikan dalam mencoba beberapa desain iklan kalian harus mengecilkan browser secara manual sesuai dengan resolusi yang sudah ditetapkan dan jangan lupa untuk melakukan refresh pada browser untuk melihat tampilan iklan. Contoh dibawah ini merupakan standar Source Code adsense dalam mode responsive, dan kita hanya perlu merubah sedikit pada bagaiannya:

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-10<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive_homepage -->
<ins class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Secara default, kode iklan responsif menyertakan tag data-ad-format dengan nilai "auto". Tag ini yang memungkinkan tindakan penentuan ukuran cerdas untuk unit iklan responsif.
Jika Anda mengetahui ukuran unit iklan yang tepat per perangkat yang paling sesuai dengan situs responsif Anda, Anda dapat menggunakan kueri media CSS3 untuk menetapkan ukuran unit iklan responsif Anda. Contoh berikut menunjukkan cara mengubah kode iklan untuk menggunakan kueri media CSS3:

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-13<style>
@media(min-width: 500px) { .dbads-responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .dbads-responsive { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- DAFIN-RESPONSIVE -->
<ins class="adsbygoogle dbads-responsive"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxx"
     data-ad-slot="yyyy"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

untuk lebih banyak media query

1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-910code-line:3-1011code-line:3-1112code-line:3-1213code-line:3-1314code-line:3-1415code-line:3-1516code-line:3-1617code-line:3-1718code-line:3-1819code-line:3-19<style>
@media(min-width: 240px) { .dbads-responsive { width: 234px; height: 60px; } }
@media(min-width: 320px) { .dbads-responsive { width: 250px; height: 250px; } }
@media(min-width: 480px) { .dbads-responsive { width: 468px; height: 60px; } }
@media(min-width: 768px) { .dbads-responsive { width: 728px; height: 90px; } }
@media(min-width: 1024px) { .dbads-responsive { width: 468px; height: 60px; } }
@media(min-width: 1216px) { .dbads-responsive { width: 728px; height: 90px; } }
</style>
<div style="text-align:center">
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- DAFIN-RESPONSIVE -->
<ins class="adsbygoogle dbads-responsive"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxx"
     data-ad-slot="yyyy"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

perhatikan dbads-responsive ubah dengan kepunyaan sobat sendiri. Aturan @media adalah sintaks CSS3, dan didukung di semua browser modern. Jika Anda ingin mendukung browser lama, seperti Internet Explorer 7 atau versi sebelumnya, sebaiknya Anda menentukan ukuran default terlebih dahulu. Hal ini akan memastikan penayangan iklan bahkan saat kueri media tidak didukung. Perhatikan bahwa menetapkan ukuran kode iklan melalui CSS di lembar gaya eksternal tidak didukung secara resmi.

Contoh bentuk horizontal

Contoh ini menunjukkan cara mengubah kode iklan responsif untuk menentukan bentuk horizontal umum untuk unit iklan Anda:

1code-line:4-12code-line:4-23code-line:4-34code-line:4-45code-line:4-56code-line:4-67code-line:4-7<ins class="adsbygoogle"
    style="display:block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="horizontal"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Secara default, kode iklan responsif menyertakan tag data-ad-format dengan nilai "auto" yang memungkinkan tindakan penentuan ukuran otomatis untuk unit iklan responsif. Namun, Anda dapat menentukan bentuk umum untuk unit iklan responsif Anda dengan mengubah nilai data-ad-format menjadi salah satu dari nilai-nilai berikut: "kotak", "tegak", "horizontal" atau kombinasi apa pun dari nilai-nilai tersebut yang dipisahkan oleh tanda koma, misalnya "kotak, horizontal".
Semoga bermanfaat...