Modifikasi Ukuran Iklan Adsense Agar Sesuai Layar

Posted on

Websiteedukasi.com – Modifikasi Ukuran Iklan Adsense Agar Sesuai Layar. Sangat di sarankan kita menggunakan jenis iklan Adsense responsive, jika kita lihat iklan tersebut di Android atau tablet 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.

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!

Ikuti websiteedukasi.com di aplikasi Google News dengan cara Following (temukan feed website edukasi di bagian Following/Mengikuti) untuk mendapatkan informasi atau berita terbaru dengan sangat mudah.

Leave a Reply

Your email address will not be published. Required fields are marked *