Modifikasi Ukuran Iklan Adsense Agar Layar Penuh Tetapi Tetap Responsive di Handphone

Modifikasi Ukuran Iklan Adsense Agar Layar Penuh Tetapi Tetap Responsive di Handphone - Sangat di sarankan kita menggunakan jenis iklan Adsense responsive, jika kita lihat iklan tersebut di HP memanglah responsive tapi di dekstop menjadi kecil, tidak sesuai yang di inginkan saya.

Untuk membuatnya iklan Adsense menjadi lebih Responsive kita perlu memodifikasi CSS. Berikut screnshot iklan yang sudah di modifikasi menjadi sesuai ukuran di postingan.


Ukuran iklan menjadi lebih besar, menariknya adalah ukuran iklan bisa kita setting sesuai dengan keinginan. Nah, untuk kamu yang ingin membuat ukuran iklan Adsense menjadi responsif bisa mengikuti panduannya di bawah ini :

<style>
.ads_post { display:inline-block; width: 336px; height: 280px; } 
@media (max-width:450px) { .ads_post { width: 300px; height: 250px; } }
@media (min-width:500px) { .ads_post { width: 336px; height: 280px; } }
@media (min-width:800px) { .ads_post { width: 620px; height: 280px; } }
</style>
<div>
&lt;ins class=&quot;adsbygoogle ads_post&quot;
     data-ad-client=&quot;ca-pub-395xxx&quot;
     data-ad-slot=&quot;234xxx&quot;&gt;&lt;/ins&gt;
&lt;script&gt;
(adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;
  </div>

Silahkan kamu ubah kode CSS yang saya beri warna biru, disana bisa kita lihat terdapat tiga ukuran yakni :

  • width: 300px; height: 250px;
  • width: 336px; height: 280px;
  • width: 620px; height: 280px;

Untuk memastikan kode tersebut bekerja dengan baik, kamu bisa menggunakan tools untuk mengecek mobile friendly.

Baca juga : 6 Alat Penguji Website Mobile Friendly

Tetapi akan lebih baik jika kamu mengeceknya dengan menggunakan perangkat smartphone kamu sendiri. Ternyata sangat mudah bukan untuk membuat ukuran iklan adsense responsive dan sesuai dengan keinginan.

Sekian dari saya, happy Blogging!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel