Cara Memasang 2 Iklan Adsense di Tengah Postingan Pada Template AMP

  • Whatsapp
Memasang 2 Iklan Adsense di Tengah Postingan AMP

Memasang 2 Iklan Adsense di Tengah Postingan AMP » Selamat datang di website sederhana lapaklama.com yang akan selalu memberikan tips-yips ngeblog yang benar dan membagikan template-template blogger gratis. dan premium.

Pada kesempatan yang indah ini admin ingin berbagi informasi Cara Memasang 2 Iklan Adsense di Tengah Postingan AMP Blogger.

AMP atau kependekan dari Accelerated Mobile Pages atau yang mudah kita pahami Laman Seluller yang dipercepat. Adapun tujuan dibuatnya project AMP ini adalah untuk membuat halaman web yang mudah dimuat jika dibuka menggunakan perangkat seluler atau mobile seperti android dan iphone.

Inti tujuan project AMP ini supaya orang-orang yang membuka laman atau situs akan merasakan sensasi kecepatan akses tanpa harus mengeluarkan banyak kuota data internet mereka.

Namun ada sebagian orang yang mengeluhkan kalau menggunakan template AMP itu bisa mengurangi pendapatan adsense mereka, Nah untuk supaya pendapatan adsense kita tetap stabil kita harus memasang beberapa slot iklan di halaman AMP kita. Salah satu tempat yang paling cocok untuk memasang iklan adalah di tengah postingan artikel.

Untuk kamu pengguna template AMP blogger. silahkan gunakan panduan dibawah ini untuk Memasang 2 Iklan Adsense di Tengah Postingan AMP template blogger.

Atau jika kamu belum menggunakan template AMP dan sedang mencari template AMP yang cocok untuk blog kamu, kami memiliki 3 rekomendasi template AMP dibawah ini. Atau kamu bisa cari pada halaman Template kami.

Memasang 2 Iklan Adsense di Tengah Postingan AMP Template Blogger

Sebelum menggunakan panduan dibawah kamu perlu memastikan kalau template blogger yang kamu gunakan dan format postingan yang kamu gunakan sudah valid AMP.Memasang 2 Iklan Adsense di Tengah Postingan AMP

Panduan 1:

Langkah pertama yang harus kamu gunakan untuk melakukan cara ini ialah, Kamu harus mengubah halaman indexsi AMP terpisah dari link/Halaman canonical yang asli. dalam tahap ini kamu harus memanfaatkan URL Mobile m+1 yang akan kita jadiakan sebagai syarat tampilan AMP dan hanya akan aktif pada perangkat mobile saja. adapun caranya sebagai berikut:

  1. Masuk Kedalam dasboard blogger kamu.
  2. Kemudian pilih menu Template lalu pilih Edit HTML.
  3. Cari kode seperti ini atau paling tidak mirip dengan kode ini. 
    Script
    <HTML amp=’amp’ expr:dir=’data:blog.languageDirection’ lang=’id’>
  4. Ganti kode tersebut dengan kode dibawah ini.
    Script
    <HTML expr:dir=’data:blog.languageDirection’ lang=’id’>
    <b:attr cond=’data:blog.isMobileRequest == &quot;true&quot;’ name=’amp’ value=’amp’/>
  5. Masih dihalaman Edit HTM. Cari meta tag berikut ini.
    Script
    <link expr:href=’data:blog.url’ rel=’canonical’/>
  6. Ganti kode Meta Tag tersebut dengan kode ini.
    Script
    <b:if cond=’data:blog.isMobileRequest == &quot;false&quot;’>
    <link expr:href=’data:blog.url’ rel=’canonical’/>
    <link expr:href=’data:blog.url + &quot;?m=1&quot;’ rel=’amphtml’/>
    </b:if>
    <b:if cond=’data:blog.isMobileRequest == &quot;true&quot;’>
    <link expr:href=’data:blog.url’ rel=’canonical’/>
    </b:if>
  7. Kemudian klik simpan Template/Save Template.

Sampai Tahap ini tampilan AMP hanya akan muncul pada URL mobile m+1 sudah selesai. dan kita akan menuju ke panduan ke-2.

PAnduan 2:

Pada panduan kedua kita akan memasang Javascript untuk menampilkan 2 slot iklan adsense di tengah-tengah postingan artikel.

Untuk cara memasang Javascript simak ulasan dibawah ini.

  1. Masih di halaman Edit HTML.
  2. Cari kode berikut ini. 
    Script
    <b:if cond=’data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;’>
    <data:post.body/>
    </b:if>
  3. Ganti kode tersebut dengan kode ini. 
    Script
    <b:if cond=’data:blog.pageType == &quot;item&quot;’>
    <b:if cond=’data:blog.isMobileRequest == &quot;false&quot;’>
    <div class=’middleAds middleAds1′ id=’middleAds1′>
    <div style=’clear:both;’>
    <!– Iklan di tengah artikel 1 –>
    </div>
    </div>
    <div class=’middleAds middleAds2′ id=’middleAds2′>
    <div style=’clear:both;’>
    <!– Iklan di tengah artikel 2 –>
    </div>
    </div>
    <div id=’tgtPost’><data:post.body/></div>
    <script type=’text/javascript’>
    function insertAfter(tbh,tgt) {
    var prt = tgt.parentNode;
    if (prt.lastChild == tgt) {prt.appendChild(tbh);}
    else {prt.insertBefore(tbh,tgt.nextSibling);}}
    var tgt = document.getElementById(&quot;tgtPost&quot;);
    var midAd1 = document.getElementById(&quot;middleAds1&quot;);
    var midAd2 = document.getElementById(&quot;middleAds2&quot;);
    var showAd1 = tgt.getElementsByTagName(&quot;br&quot;);
    var showAd2 = tgt.getElementsByTagName(&quot;p&gt;&quot;);
    if (showAd1.length &gt; 0) {insertAfter(midAd1,showAd1[3]);}
    if (showAd2.length &gt; 0) {insertAfter(midAd1,showAd2[3]);}
    if (showAd1.length &gt; 0) {insertAfter(midAd2,showAd1[5]);}
    if (showAd2.length &gt; 0) {insertAfter(midAd2,showAd2[5]);}
    </script>
    </b:if>
    <b:else/>
    <data:post.body/>
    </b:if>
    <b:if cond=’data:blog.pageType == &quot;static_page&quot;’>
      <data:post.body/>
    </b:if>
  4. Atau jika di template hanya menemukan kode seperti ini
    Script
    <b:if cond=’data:blog.pageType == &quot;item&quot;’>
    <data:post.body/>
    </b:if>
  5. Jangan memasukan kode yang saya tandai dengan warna merah.
Keterangan
  • Letakan slot iklan yang pertama dibawah kode <!– Iklan di tengah artikel 1 –>
  • Kemudian slot iklan kedua letakan dibawah kode <!– Iklan di tengah artikel 2 –>
  • Terahir sesuaikan sendiri pada paragraf keberapa kamu ingin menampilkan iklan dengan memilih angka 3 ata 5 
    Script
    if (showAd1.length &gt; 0) {insertAfter(midAd1,showAd1[3]);}
    if (showAd2.length &gt; 0) {insertAfter(midAd1,showAd2[3]);}
    if (showAd1.length &gt; 0) {insertAfter(midAd2,showAd1[5]);}
    if (showAd2.length &gt; 0) {insertAfter(midAd2,showAd2[5]);}

Note: Semakin besar angka yang kamu tuliskan maka iklan akan berada semakin kebawah

Panduan 3:

Sekarang waktunya kita memasang script iklan adsense pada slot widget yang sudah tersedia. untuk cara memasangnya simak ulasan dibawah ini.

Sebelumnya kita harus memisahkan script iklan adsense yang akan kita tampil AMP dan Destop.

  1. Hapus terlebih dahulu kode js-ad seperti ini
    Script
    <script async=’async’ custom-element=’amp-ad’ src=’https://cdn.ampproject.org/v0/amp-ad-0.1.js’/>
  2. Kemudian cari kode </head> atau kode &lt;/head&gt;&lt;!--<head/>--&gt; lalu letakkan kode dibawah ini tepat di atas kode tadi.
    Script
    <b:if cond=’data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery’>
    <script async=’async’ custom-element=’amp-ad’ src=’https://cdn.ampproject.org/v0/amp-ad-0.1.js’/>
    </b:if>
    <b:if cond=’data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery’>
    <script async=’async’ src=’//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js’/>
    </b:if>
  3. Untuk bisa meletakan slot iklan pada script widget yang akan menampilkan 2 slot iklan di tengah postingan kita harus menggunakan format yang biasa dan bukan format AMP. Kurang lebihnya seperti kode ini.
    Script
    <ins class=’adsbygoogle’ data-ad-client=’ca-pub-xxxxxxxxxxxxxx’ data-ad-format=’rectangle’ data-ad-slot=’xxxxxxxxxxxxxx’ style=’display:block’/>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  4. Kemudian kita juga harus mengubah seluruh script semua slot iklan kecuali widget yang menampilkan 2 iklan di tengah tadi menjadi seperti kode ini.
    Script
    <b:if cond=’data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery’>
    <!– Ini untuk menampilkan iklan di perangkat desktop (laptop/PC) –>
    <ins class=’adsbygoogle’ data-ad-client=’ca-pub-xxxxxxxxxxxxxx’ data-ad-format=’rectangle’ data-ad-slot=’xxxxxxxxxxxxxx’ style=’display:block’/>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    </b:if>
    <b:if cond=’data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery’>
    <!– Ini akan menampilkan iklan di tampilan AMP/mobile –>
    <amp-ad data-ad-client=’ca-pub-xxxxxxxxxxxxxx’ data-ad-slot=’xxxxxxxxxxxxxx’ data-auto-format=’rspv’ data-full-width=” height=’320′ media='(max-width: 736px)’ type=’adsense’ width=’100vw’>
    <div overflow=”/>
    </amp-ad>
    </b:if>
    Ganti Kode data-ad-client dan data-ad-slot pada iklan dengan Script iklan yang sesuai dengan iklan kamu.
  5. Supaya tampilan iklan di tengah postingan terlihat rapi. silahkan tambahkan kode CSS berikut diatas </style> pada post page.
    Script
    /* Middle Ads */
    .middleAds{margin:10px auto 4px;display:block;overflow:hidden;width:100%;height:auto;text-align:center}
    .middleAds p{font-size:11px!important;font-weight:400;text-align:center;display:block;padding:0;margin:0 auto 5px!important;color:#bbb!important}
  6. Terahir simpan Template.

Dua iklan yang sudah kita buat tadi hanya akan tampil pada halaman destop saja, atau perangkat lainya selain device yang berahiran url m=1

Demikianlah panduan Memasang 2 Iklan Adsense di Tengah Postingan AMP pada template blogger, Jika kamu suka dengan artikel seperti ini, silahkan berlangganan artikel kamu via email dan sukai halaman fb agenponsel.com

Nilai

Pos terkait

Loading...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *