Ahad, 20 Mac 2016

Mengubah iklan header adsense kepada responsif

Cara membuat iklan pelbagai saiz untuk header blog.

Bagi tutorial ini apa yang dimaksudkan dengan responsive adalah iklan untuk header blog yang akan berubah saiz mengikut paparan skrin peranti seperti desktop,tablet dan telefon pintar yang digunakan oleh pengguna.

Apa yang diperlukan:

  1. Notepad/Notepad ++.
  2. Kod iklan Adsense.
  3. Kod Cascading Styling Sheets (CSS)
  4. Pastikan anda backup template blog sebelum bermula.

Pertama sekali sediakan notepad atau notepad ++ untuk tujuan pengeditan kod, kemudiannya salin kod iklan (Ad Code)yang terdapat pada bahagian My ads dalam akaun google adsense anda.
Tampalkan unit kod tersebut dalam notepad dan biarkan.

Contoh kod iklan jenis Asynchronous 

Langkah seterusnya adalah untuk mengubah beberapa aspek dalam kod seperti berikut :

Contoh kod iklan yang asal.


iklan asal tanpa pengubahsuaian

Kod iklan yang telah diubahsuai.



Apa yang perlu dibuat :

Pada kod adsense asal yang telah anda pastekan di dalam notepad/notepad ++,padamkan dan ubahkan 4 ciri berikut:


  1. Tukarkan nama ins class="iklan_1" kepada (contoh:adslot_1/myads/ads_1) mengikut suka.
  2. Padamkan "width:728px;height:90px" pada bahagian style.
  3. Gantikan "data ad client" dengan id anda sendiri. (contoh:ca-pub-1234567123456789) .
  4. Begitu juga dengan "data ad slot" tukarkan dengan id anda. (contoh:6789012345).

Kod css utuk iklan.



Sila copy dan paste kod css di dalam textarea diatas ke dalam notepad/notepad ++.Perhatikan pada nama".iklan_1", pastikan anda menukar kesemuanya mengikut nama "ins class" yang telah anda cipta sebentar tadi. (contoh:adslot_1/myads/ads_1).

Cara letak kod html dan css dalam blog.

Mula mula copy kod iklan adsense yang telah diubahsuai, pergi ke bahagian reka letak blog anda dan pastekan kod pada bahagian header.

klik edit dan tampalkan kod iklan
Bagi kod css, pergi ke bahagian "template" blog dan seterusnya klik "edit template".Tekan kekunci "Ctrl" dan "F" dan pastekan kod berikut dalam ruangan carian "</b:template-skin>" dan tekan enter. Tampalkan kod css dan klik save,rujuk pada gambar dibawah.

Paste kod css seperti dalam gambar
Untuk memastikan iklan responsif ini berkesan sepenuhnya, jangan lupa tukarkan aturan "template mudah alih" kepada "peribadi" seperti dalam gambar dibawah.




Terakhir sekali cuba buka blog anda dan lihat perbezaan saiz iklan mengikut saiz skrin peranti yang digunakan.

Dekstop.


Tablet.


Smartphone.







  1. Saya Blogger pemula Gan, informasinya sangat bermanfaat buat saya blogger pemula

    BalasPadam

Terima kasih di atas kesudian anda untuk menjengah ke blog ini. Semua komen akan disemak terlebih dahulu sebelum dipaparkan pada ruangan komen oleh admin. Harap maklum.

favourite category

...
test section describtion

Butang Whatsapp hanya berfungsi pada peranti smartphone