Cara Memasang Adsense di Pinggir Kanan Artikel Seperti Detik.Com Tanpa Masalah

posted in: Blog | 2

Memasang adsense di tengah artikel dengan bantuan plugin seperti Ad Injection itu mudah. Tetapi untuk tampil seperti di detik.com, adsense berukuran 160 x 600 di pinggir kanan, pada tema WP yang responsif akan menyisakan masalah dengan gambar yang di sebelah kirinya.

Posisi pemasangan iklan memang akan mempengaruhi penghasilan dari adsense publisher. Namun diluar dari kefektifan posisi seperti gambar di atas, saya rasa bila media yang cari makan dari iklan meletakkannya di posisi itu, kita boleh mencobanya.

Posisi Adsene Jatuh

Permasalahan datang bila tema WP yang kita gunakan adalah responsif, sehingga lebar dari container artikel dapat berubah-ubah menyesuaikan dengan lebar layar perangkat atau browser. Apabila di sisi kirinya terdapat gambar yang oleh karena lebarnya menjadi tidak muat saat container mengecil, maka gambar itu akan mengalir ke bawah.

Solusi untuk masalah ini adalah dengan menggunakan CSS. Setiap gambar yang berada di sebelah kiri akan diberikan sebuah class, misalnya diberi nama ‘respon’. Kemudian diatur CSS-nya.

Cara pemberian class gambar di WordPress editor mudah saja:

  1. Layangkan mouse kalian ke atas gambar yang diinginkan, hingga muncul dua ikon seperti gambar di bawah.
  2. Klik ikon gambar kecil yang sebelah kiri atas.
  3. Selanjutkan kalian akan muncul pop up.
  4. Klik: tab Advanced Settings.
  5. Isikan kata ‘respon’ pada kotak yang diberi tanda panah merah pada gambar di bawah ini.

Menambah Class

 

 

 

 

 

 

 

 

LIHAT JUGA: Tutotam Membuat Tokol – Membuat Anak Tema / Child Theme WordPress

Dengan menggunakan tema anak/ child theme tambahkan di style.css, CSS seperti di bawah ini:

@media screen and (min-width:1024px) and (max-width:1240px) {
    img.respon {max-width: 75%}
}

Penjelasan:

@media screen and (min-width:1024px) and (max-width:1240px) { }

Syntax ini adalah IF-nya CSS. Bila lebar layar/ browser antara 1024px-1240px jalankan CSS yang ada di dalam kurung kurawal. Kalian dapat mengganti angka yang ditebalkan dan menyesuaikannya dengan pengaturan CSS desain tema kalian sendiri.

Syntax seperti di bawah ini juga bisa digunakan untuk mengatur lebar layar/ browser di atas 1024px:

@media screen and (min-width:1024px) {
    img.respon {max-width: 75%}
}

Carilah di file stylsheet tema kalian baris koding yang menyerupai kode di atas, dan mereka selalu diawali dengan @media. Gunakan angka-angkanya sebagai panduan.

Selanjutnya:

img.respon {max-width: 75%}

Dengan baris ini browser akan mengubah ukuran gambar dengan class=’respon’ menjadi 75%. Nilainya bisa kalian tes dan coba, sesuaikan dengan lebar artikel kalian.

Jika kalian sudah melakukan perubahan, ada satu situs yang bisa membantu kalian untuk melihat hasilnya. URL-nya adalah http://quirktools.com/screenfly/

2 Responses

  1. Rungan
    | Reply

    tutorial umntuk blogspot ada gak gan

    • Juan feju
      | Reply

      Karena saya tidak pakai blogspot saya masih buta caranya. Tapi ada banyak kok di internet yang mengajarkan caranya.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.