Cara Memasang Iklan Adsense di Kiri Paragraf dalam Postingan Blogger

Meletakkan iklan di awal paragraf sebelah kiri memang cocok untuk diterapkan dalam blog yang memiliki banyak kata dan sudah umum ditemukan. Untuk scriptnya pun sudah saya modifikasi agar lebih responsif.

Ketika blog dibuka di layar yang lebih kecil, posisi iklan akan berubah menjadi di atas paragraf. Kok bisa? Jika tetap ada di kiri akan memakan tempat dan membuat tampilan lebih tidak rapi.

Nah, text yang di sebelah kanan hanya akan tampil sedikit karena diisi oleh lebar iklan. Lebih baik Anda ubah posisinya menjadi di atas jika di buka di layar yang lebih kecil.

Kalau Anda suka memasang gambar di awal paragraf seperti saya, posisi jenis ini kurang bagus karena tampilannya akan bersebelahan dengan gambar yang ukurannya lebih besar.

Iklan di kiri paragraf cocoknya sama blog yang di awal paragraf di dahului oleh banyak kalimat. Jadi, gambarnya harus dipindahkan ke paragraf ke dua saja.

Cara Membuat Iklan di Sebelah kiri di Awal Paragraf

Ukuran iklan yang cocok untuk diletakkan di posisi ini yaitu 336x280 atau 300x250 agar tidak mengganggu tampilan text di sampingnya.

Baca Juga: Cara Membuat dan Memasang Iklan 5 susun yang benar

Langkah Pertama: Cari kode <data:post.body/>. Jika ada banyak, pastikan untuk memilih yang ada di dalam tag kondisional halaman post <b:if cond='data:view.isPost'>.

Setelah itu tambahkan kode HTML berikut sebelum kode yang disebutkan tadi.

 <div class="iklankiri">
  <!-- Tulis Kode Iklan -->
 </div> 

Hasil akhirnya kurang lebih seperti ini.

 <b:if cond='data:view.isPost'>
  ....
  ....
  <div class="iklankiri">
    <!-- Tulis Kode Iklan -->
  </div>
  <data:post.body/>
  ....
  ....
 </b:if> 

Jangan lupa tambahkan kode CSS ini agar posisinya bisa berada di kiri sekaligus membuatnya lebih responsive seperti yang sudah saya jelaskan sebelumnya. Simpan diatas </style> atau ]]></b:skin>.

 .iklankiri {float:left; margin-right:15px; margin-bottom:15px;}
@media screen and (max-width:568px){
 .iklankiri {float:none; display:block; margin:0px auto 15px; text-align:center;}
} 

Silahkan Anda simpan template dan lihat hasilnya. Semoga tutorial ini bermanfaat bagi Anda dan terima kasih atas kunjungan Anda.

Berbagi :