Blog ini adalah tempat saya menyimpan sekaligus berbagi tips seputar dunia blogging

Memasang Iklan Adsense di Bagian Kiri Postingan Blog AMP


Memasang unit iklan adsense di dalam blog Costum Amp memang berbeda dengan Blog biasa(Non-Amp).butuh kode tambahan (khusus) yang valid Amp,bisa saja memasang unit iklan adsense seperti biasanya.namun hal tersebut akan menyebabkan Error pada blog Costum Amp.
Oleh sebab itu,paling tidak kita harus faham sedikit tentang kode HTML,untuk bisa otak-atik kode HTML yang valid Amp.

Untuk penempatan iklan adsense di blog Amp sendiri ada dua macam.yakni Above The Fold atau iklan yang tampak pada layar bagian atas sebelum layar di geser ke bawah.biasanya letak penempatan iklanya di bagian header.

Kemudian yang kedua adalah Bellow The Fold,penempatan iklan seperti ini akan tampak setelah halaman blog di geser ke bawah.peletakanya biasanya di bawah artikel atau bisa juga di bawah komentar.

Oke....demikian sedikit pengantar tentang penempatan iklan Adsesnse.sekarang saatnya kita terapkan penempatannya di bagian kiri atas artikel.

CARA MEMASANG IKLAN ADSENSE DI BAGIAN KIRI ATAS ARTIKEL

1). Pertama-tama silahkan gunakan kode iklan adsense yang berukuran 300x250 (di sarankan).ambil kodenya seperti di bawah ini.

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

Perhatikan angka-angka yang tertulis tebal,angka-angka tersebut yang akan di gunakan untuk memasang iklan adsense di blog AMP.
    Keterangan
  • data-ad-client="ca-pub-1111222233334444" = ID Publisher
  • data-ad-slot="369369" = ID Iklan


2). Masuk ke blogger,kemudian klik tema dan Edit HTML

3). Selanjutnya,letakkan script di berikut ini di atas kode </head> themplate blog.

<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>


Kalau sudah memakai themplat valid AMP,biasanya script tersebut sudah di pasang oleh pembuatnya.jadi lewati langkah ini jika memang script di atas sudah ada di dalam themplate Anda.

4). Cari <style amp-costum='amp-custom'> di dalam themplate.biasanya ada 3 atau lebih.tergantung struktur themplate yang Anda gunakan.style tersebut biasanya meliputi tampilan depan blog, halaman postingan blog, dan terakhir halaman statistik blog.

Jadi,untuk menempatkan iklan adsense di sebelah kiri atas artikel postingan blog.pilihlah <style amp-costum='amp-custom'> yang kedua dan ketiga.
Kemudian letakkan CSS berikut di dalamnya (keduanya).

.iklan_atas{display:inline-block;width:auto;height:auto;margin:0 15px 15px 0;float:left}
.iklan_atas amp-img{width:100%;max-width:300px;height:auto}


Kenapa harus di letakkan di kedua <style amp-costum='amp-custom'> tersebut?,karena jika tidak maka iklan akan berada di bagian atas artikel saja,bukan sebaliknya berada di bagian kiri atas artikel.faham maksud saya kan?

5). Cari kode <data:post.body/>.kalau ada tiga maka pilihlah yang kedua,atau yang di bungkus tag conditional seperti ini
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Kemudian letakkan kode berikut di atas <data:post.body/> tersebut.

<amp-ad layout="fixed-height" height="250" type="adsense" data-ad-client="ca-pub-1111222233334444" data-ad-slot="369369"> </amp-ad>

    Katerangan
  • ganti ca-pub-1111222233334444 dengan ID Publisher Anda
  • ganti 369369 dengan ID Iklan yang ingin anda tampilkan


Hasilnya akan tampak seperti ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='iklan_atas'>
<amp-ad layout="fixed-height" height="250" type="adsense" data-ad-client="ca-pub-1111222233334444" data-ad-slot="369369"> </amp-ad></div> <data:post.body/>
</b:if>


6). Terakhir klik Simpan.selesai......

Nah itu tadi cara meletakkan iklan adsense di bagian kiri atas artikel blog.untuk penempatan di bagian blog lainnya,tunggu artikel saya selanjutnya.
Kalau tidak sabar menunggu,silahkan browsing lagi,karena saya kira tutorial semacam ini sudah banyak bertebaran di interneg.😁

Terima kasih atas kunjunganya,semoga ada guna dan manfaatnya.dan yang terpenting semoga sukses anda terapkan di dalam blog anda.
 
Copyright © 2016
Created by Kang Ismet and DroidPluss