Adsense

Cara Membuat Iklan Adsense Reponsive Sesuai Layout Website [Support Mobile]

Cara Membuat Iklan Adsense Reponsive Sesuai Layout Website [Support Mobile]

Pertanyaan ini masuk dari list pertanyaan yang pernah diajukan kepada saya, Dan pada kesempatan kali ini mumpung ada waktu maka saya buatkan artikelnya sekalian.

Bagi kalian yang mempunyai template website responsive pasti mempunyai pemikiran bagaimana Cara Membuat Iklan Adsense Reponsive Sesuai Layout Website dan support untuk mobile juga kan?

Kebetulan sekali, Kali ini saya akan menyampaikan bagaimana Membuat Iklan Adsense Reponsive Sesuai Layout Website/layar monitor dari visitor Anda.

Kemudian, Apa kelebihan dari menggunakan script ini?

  • Kelebihan yang paling menonjol adalah dimensi iklan akan menyesuaikan resolusi layar visitor.
  • Kedua, Tidak perlu membuat banyak jenis iklan. Yup!!, Iklan jenis apa saja akan responsive menyesuaikan.

Jadi Anda tidak perlu membuat banyak jenis iklan dan jenis ukuran untuk widget atau di dalam postingan.

Meskipun Ukuran iklan yang Anda buat lebih besar dari layout website Anda, Nantinya script ini akan membuat iklan tersebut otomatis menyesuaikan layout.

Bagaimana Cara Membuatnya?

Cara Membuat Iklan Adsense Reponsive Sesuai Layout Website yang Support Mobile ini sangat sederhana, Akan tetapi tentunya buat iklan adsense terlebih dahulu.

Bagi yang belum tahu bagaimana cara membuat iklan adsense silahkan menuju halaman macam macam iklan adsense dan cara membuatnya.

Langkah pertama,

Silahkan buat iklan adsense terlebih dahulu (Note : Harus type asyncronous)

Dan saya sarankan untuk memilih iklan responsive.

Langkah kedua,

Copy script berikut, Dan edit sesuai yang di interuksikan…

[box type=”shadow” align=”aligncenter” class=”” width=”100%”]

<div id=”google-ads-1″></div>
<script type=”text/javascript”>
/* Menghitung ukuran yang dapat digunakan */
ad = document.getElementById(‘google-ads-1’);
if (ad.getBoundingClientRect().width) {
adWidth = ad.getBoundingClientRect().width; // for modern browsers
} else {
adWidth = ad.offsetWidth; // for old IE
}
/* Ganti dengan kode publiser Anda contoh : pub-442323123*/
google_ad_client = “pub-1231244242”;
/*Ganti dengan kode adsense Anda */
google_ad_slot = “878112312”;
/* Saran saya tidak perlu ganti ini kecuali menurut Anda tidak cocok */
if ( adWidth >= 970 )
google_ad_size = [“970”, “90”];  /* Leaderboard 728×90 */
else if ( adWidth >= 720)
google_ad_size = [“728”, “90”];  /* Leaderboard 728×90 */
else if ( adWidth >= 468 )
google_ad_size = [“468”, “60”];  /* Banner (468 x 60) */
else if ( adWidth >= 336 )
google_ad_size = [“336”, “280”]; /* Large Rectangle (336 x 280) */
else if ( adWidth >= 300 )
google_ad_size = [“300”, “250”]; /* Medium Rectangle (300 x 250) */
else if ( adWidth >= 250 )
google_ad_size = [“250”, “250”]; /* Square (250 x 250) */
else if ( adWidth >= 200 )
google_ad_size = [“200”, “200”]; /* Small Square (200 x 200) */
else if ( adWidth >= 180 )
google_ad_size = [“180”, “150”]; /* Small Rectangle (180 x 150) */
else
google_ad_size = [“125”, “125”]; /* Button (125 x 125) */
document.write (
‘<ins class=”adsbygoogle” style=”display:inline-block;width:’
+ google_ad_size[0] + ‘px;height:’
+ google_ad_size[1] + ‘px” data-ad-client=”‘
+ google_ad_client + ‘” data-ad-slot=”‘
+ google_ad_slot + ‘”></ins>’
);
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async src=”http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”>
</script>

[/box]

Langkah ketiga,

Setelah Anda copy script diatas, Edit bagian yang sudah di interuksikan dan pasang kode tersebut sebagai ganti kode iklan yang biasa Anda gunakan.

Note

Jika Anda ingin menggunakan kode tersebut untuk iklan yang lain yang Anda tempatkan dalam satu halaman, Anad cukup mengganti kode google-ads-1 menjadi kode yang Anda butuhkan.

Apakah saya menggunakan script diatas?

Yup, Pada website ini saya menggunakannya pada div iklan header. Karena bawaan template ini hanya mendukung iklan ukuran maimal 728×90 pixel.

Saya merubahnya menjadi 970×70 piel. dan merubahnya menjadi sesuai ukuran mobile.

Tapi untuk website saya yang lainnya, Saya menggunakannya pada semua iklan, Karena selain hemat pembuatan iklan juga biar tidak ribet.

Sekian artikel yang membahas  bagaimana Cara Membuat Iklan Adsense Reponsive Sesuai Layout Website kali ini, Jika ada yang kurang dipahami jangan sungkan untuk mengisi kolom komentar.

Thanks.

REAKSI KAMU?
Bagikan Votingmu!!
0
0
0
0
0
0
0
0
0

Artikel Terkait :

Click to comment

Facebook Comment

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

To Top