Iklan Parallax Adsense di Postingan Blogger

Iklan Parallax Adsense 100 % Work

Apa itu Iklan Parallax Adsense ?

Dengan kata sederhana, iklan paralaks adsense adalah alat bantu tampilan animasi yang dikembangkan oleh Google untuk web seluler. Iklаn parallax adsense yang unіk ini, akan muncul dаrі dаlаm postingan ѕааt dі-ѕсrоll dan роѕіѕі iklan adsense nya tеtар dіаm.

Apa yang sebenarnya dilakukan iklan paralaks adalah konsep unik yang digunakan saat pengguna membaca postingan artikel di perangkat seluler, kemudian menggulirkannya dari atas ke bawah atau sebaliknya , lalu iklan tersebut ditampilkan sepenuhnya sebagai animasi.

Manfaat Iklan Parallax Adsense

Dapat meningkatkan rasio klik iklan Adsense Anda dengan menggunakan iklan paralaks.

Tutorial

Bagaiman cara membuat Iklan Parallax Adsense di dalam postingan blogger. ?

Anda harus menambahkan kode widget dibawah ini secara manual melalui editor Html Dashboard blogger Anda.

Langkah Pertama - Mempunyai Akun Google Adsense

Cara buat Google Adsense :

Google Adsense

Langkah Kedua - Menambahkan Kode CSS

Pertama-tama Anda harus masuk ke menu Dashboard Blogger - Pilih Tema - Edit template HTML dan Salin kode CSS di bawah ini ke grup kode CSS pada tema blog Anda. Kemudian tempelkan kode CSS di bawah ini, di atas kode ]]></b:skin>


/* Paralax Ads By thewebtrick.com  */
.twtparalax{position:relative;display:block;overflow:visible;width:100%;height:0;margin:auto;text-align:center;z-index:1}
.twtparalax > div{overflow:hidden;width:100%;height:100%;margin:0;position:absolute;top:0;left:0;clip:rect(auto auto auto auto)}
.twtparalax > div > div{width:calc(100% - 40px);height:100%;position:fixed;top:0;left:0;right:0;margin:0 auto;-moz-transform:translateZ(0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}
.twtparalax > div > div > div{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-align-content:center;align-content:center;-webkit-align-items:center;-ms-flex-align:center;width:100%;height:100%;position:absolute;left:0;right:0;top:37px;align-items:center;background:#fff}
.twtparalax > div > div > div > *{margin:auto}
.twtparalax > div > div > div > a{width:100%;height:100%}
.twtparalax img,.twtparalax iframe,.twtparalax ins{height:100%;border:0}
.clear{clear:both;display:block}
.twtparalax{width:100%;min-width:300px;min-height:600px;text-align:center}
.adParallax{width:100%;min-width:300px;min-height:600px;text-align:center;display:block; margin:10px 0px; padding:0px;}
.dark-mode.twtparalax, .dark-mode.adParallax{background-color:#1e1e1e}

Langkah Ketiga - Menambahkan Kode HTML

Cari kode <data:post.body/> kemudian salin kode HTML di bawah ini, dan tempelkan di bawah <data:post.body/>



<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
 <b:if cond='data:view.isPost'>
  <div class='twtparalax'>
   <div>
    <div>
      <div>
       <ins class='adsbygoogle adParallax' data-ad-client='ca-pub-XXXXXXXXXXXXXXX' data-ad-slot='XXXXXXXCC' style='display:block'/>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </div>
    </div>
  </div>
 <span class='clear'/>
</div>
<script> //<![CDATA[
function twtparalax(Ad1) {let paralax = document.getElementsByClassName ('twtparalax')[0]; if (paralax) {let Adsp = document.querySelectorAll ('.post-body p')[Ad1 - 1]; Adsp.parentNode .insertBefore (paralax, Adsp.nextSibling)}} twtparalax(3);/*]]>*/</script></b:if></b:if>

Keterangan :

Harap ganti bagian bertanda 'ca-pub-xxxxxxxxxxx' dan data-ad-slot ='xxxxxxxx:' dengan kode Adsense Anda, Anda juga dapat mengatur alat bantu sesuai kebutuhan Anda setelah berapa paragraf alat bantu akan ditampilkan. Harap perhatikan kode twtparalax(3); Angka 3 ini berarti iklan harus muncul setelah 3 paragraf jadi silakan ubah sesuai kebutuhan.

Langkah Terakhir - Simpan

Demo

Iklan Parallax Adsense akan muncul di perangkat hp mobile smartphone.
Iklan Parallax Adsense

Tutorial Blogger