Cara Memasang Iklan di Bawah Judul Tulisan

Iklan di bawah judul

Pada tulisan kali ini saya mau berbagi bagaimana cara memasang iklan di bawah judul. Berikut langkah-langkahnya

Membuat Kode Iklan

Apabila kamu menggunakan platform seperti google adsense atau idblognetwork, pastikan kamu sudah mendapatkan kode iklannya. Ukuran iklan yang saya sarankan di bawah judul adalah 300 x 250 px. Saya sarankan karena ukuran iklan akan tampak di semua device dengan baik. Karena setahu saya tidak ada ukuran layar mobile device yang berada di bawah 300. Sehingga dengan width 300 akan muncul di semua perangkat.

Saya pernah mencoba buat iklan dengan ukuran width 468, ketika di akses menggunakan perangkat mobile, iklan tersebut terpotong. Untuk kamu yang pakai google ads, mungkin bisa pilih kode iklan yang responsive, dimana dapat kita atur iklan yang muncul pada ukuran layar tertentu.

Sebagai contoh, saya gunakan sebuah iklan dengan resolusi 300 x 250px dengan script di bawah ini

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- iklan 300 x 250 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-xxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Setelah membuat sebuah iklan, sekarang saatnya untuk memasukkan iklan ke dalam halaman web.

Membuat Element div

• Tulisan akan menempel pada kode iklan, karena script tersebut tidak berada dalam sebuah element html tersendiri
• Di samping iklan hanya akan tampak 1 baris tulisan yang sejajar dengan bagian bawah iklan, hal ini dikarenakan iklan tersebut dianggap sebuah karakter dalam postingan blog
• Dengan kondisi seperti diatas, iklan akan membuat tulisan dalam artikel tidak terbaca.

Beberapa alasan diatas yang membuat saya memutuskan untuk membuat sebuah element html yang bernama div. Pada div tersebut saya tambahkan class yang bisa diatur melalui bagian CSS. Berikut element div yang saya tambahkan pada script iklan

<div class="iklan">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- iklan 300 x 250 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-xxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

Tidak jauh berbeda dengan sebelumnya, karena saya hanya menambahkan elemen div di awal dan di akhir script. Selain itu juga menambahkan sebuah class supaya bisa dengan mudah diatur dengan CSS.

Menambahkan CSS

Setelah menambahkan sebuah div, selanjutnya tambahakan sebuah css untuk class iklan yang sudah dibuat sebelumnya. Berikut kode css yang saya gunakan untuk mengatur posisi iklan

.iklan{
  padding: 10px 5px 10px 0px;
  float:left;
}

padding digunakan untuk memberikan jarak antara iklan dengan tulisan di blog. Dalam kode css diatas, secara berurutan dari kiri ke kanan adalah padding untuk bagian atas, kanan, bawah dan kiri. Padding kiri memang sengajar saya atur menjadi 0, hal ini dikarenakan iklan tersebut saya pasang di bagian kiri. Untuk meletakkan posisi iklan di kiri saya menggunakan float.

Kalau kamu ingin meletakkan kode iklan di bagian kanan, tinggal ubah lelft menjadi right. Selain itu juga jangan lupa ubah padding untuk left menjadi 0px dan right menjadi 5px. Kala mau dengan ukuran lain ya dipersilakan.

Memasukkan ke dalam Template Blogger

Setelah berhasil membuat kode iklan beserta CSSnya, selanjutnya kita masukkan ke dalam blogger. Buka halaman template dan pilih edit html. Pada mode edit html, cari data:post.body. Setiap template yang digunakan memiliki posisi yang berbeda, namun bisa dipastikan ada kode tersebut.

Sebelum memasukkan script, encode terlebih dahulu kode tersebut hingga tampak seperti gambar di bawah ini

Encode dengan HTMLEntities

Tidak perlu bingung untuk melakukan konversi, banyak tool yang bisa kamu gunakan, silakan search dengan kata kunci htmlentities. Saya biasanya menggunakan htmlentities.net.

Masukkan kode yang sudah di encode diatas pada sebelum kode data:post.body setelah itu simpan templatenya dan coba lihat, apakah iklan muncul di dalam sebuah tulisan. Kalau ternyata belum muncul di tempat yang diingkan, coba lagi car data:post.body yang lain dan letakkan kode tersebut diatasnya. Karena pada sebuah template apalagi yang terdapat fitur readmore akan memiliki lebih dari satu kode diatas

Berikut penampakan kode yang pernah saya pasang di blog saya ini dengan menggunakan kode iklan yang responsive.

Kode iklan

Setelah menuliskan artikel ini, iklan di bawah judul memang sengaja saya hapus. Supaya kamu bisa lebih nyaman saat membaca artikel di blog ini. Buat yang masih bingung cara mendapatkan iklan untuk di pasang pada blog, coba deh baca cara mendapatkan uang dengan blog. Siapa tahu kamu tertarik untuk mencobanya juga

Semoga tulisan sederhana ini bisa menjawab pertanyaan teman-teman bagaimana cara memasang iklan di bawah judul :D.

Salam

Panduaji.net