Tutorial

  • Android
  • Blogger
  • Canon
  • Epson
  • Komputer
  • Laptop
  • MedSos
  • ByPass FRP Tools
  • Berbagi Tutorial in Google News
  • Berbagi Tutorial on Facebook
  • Berbagi Tutorial on Instagram
  • Berbagi Tutorial on Twitter
  • Berbagi Tutorial on Youtube
  • Berbagi Tutorial on Tumbrl
  • Berbagi Tutorial on Wix
  • Berbagi Tutorial on Linkdin
  • Berbagi Tutorial on KASKUS
  • Berbagi Tutorial on MEDIUM
  • List Blog Partner
  • Open Backlink DoFollow
  • Tutorial Cara Pasang Iklan AdSense Parallax Blog Non-AMP

    Iklan Parallax AdSense merupakan jenis iklan yang ditampilkan melayang di latar belakang Konten Postingan. Iklan Parallax akan muncul ketika pembaca pengguna Mobile Android sudah menscrol halaman setengah dari keseluruhan konten, pada umumnya iklan parallax tampil dengan ukuran banner persegi panjang vertikal ukuran 300px x 600px.

    Agar anda tidak penasaran dengan tampilan Iklan Prallax, berikut ini adalah tampilan Iklan Parallax dalam konten postingan Igniel.com platform Blogger dengan template Non-AMP.





    Cara Pasang Iklan AdSense Parallax Blogger Non-AMP

    1. Buka Dasboard Blogger, Pilih menu Tema kemudian pilih EDIT HTML

    2. Cari dan temukan kode </head> tempelkan kode berikut ini di atasnya. Gunakan fitur pencarian dengan menekan tombol CTRL + F

     
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    /*<![CDATA[*/
    .paralax_div {
      position: relative;
      overflow: visible;
      width: 300px;
      height: 250px;
      margin-right: 20px;
      display: inline-block;
      float: left;
      z-index: 9999;
    }
    .paralax_div > div {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0;
      position: absolute;
      top: 0;
      left: 0;
      clip: rect(auto auto auto auto);
    }
    .paralax_div > div > div {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      margin: 0 auto;
      -moz-transform: translateZ(0);
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
    }
    .paralax_div > div > div > div {
      width: 100%;
      height: 100vh;
      position: absolute;
      left: 50%;
      top: 0;
      border: none;
      -moz-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-align-content: center;
      align-content: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      background: #ddd;
    }
    .paralax_div > div > div > div > * {
      margin: 0;
      margin-top: 0;
    }
    .paralax_div > div > div > div > a {
      width: 100%;
      height: 100vh;
    }
    .paralax_div img,.paralax_div iframe,.paralax_div ins {
      height: 600px;
      width: 300px;
    }
    .clear {
      clear: both;
      display: block
    }
    
    @media screen and (max-width:640px) {
      .paralax_div {
        width: 100%;
        height: 250px;
        margin: 0 auto;
        float: none;
      }
      .paralax_div > div > div > div {
        left: 50%;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
      }
      .paralax_div > div > div {
        width: 100%;
        left:0;
        text-align: center;
      }
      .paralax_div img {
        margin: 0 auto;
        width:auto;
        max-width:100%;
        height:auto;
      }
    }
    @media screen and (max-width:320px) {
      .paralax_div iframe,.parallax_banner ins {
        margin: 0 auto;
        width:100%;
        height:600px;
      }
    }
    /*]]>*/
    </style>
    </b:if>
    


    3. Cari dan temukan kode<div class='post-body entry-content'... tempelkan Source Kode Iklan Parallax berikut ini di atasnya. Biasanya kode ini terdapat lebih dari satu, silahkan lakukan uji coba penempatan.

     
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class="paralax_div">
      <div>
        <div>
          <div>
           <-------Tempelkan Kode Iklan AdSense di Sini-------->
          </div>
        </div>
      </div>
    <span class="clear"/>
    </div>
    </b:if>
    


    4. Buat Unit Iklan Display di Dasboard AdSense anda dengan ukuran banner 300px x 600px atau jenis iklan persegi panjang verital responsive. Kemudian tempelkan kode iklan pada area penempatan source kode iklan AdSense.

    5. Klick Simpan Tema untuk menerapkan

    6. Buka salah satu halaman postingan anda setelah beberapa menit kedepan, karena biasanya unit iklan adsense yang baru tidak langsung bisa ditampilkan butuh waktu beberapa menit dihitung dari mulai pembuatan unit iklan.

    Demikianlah Tutorial Cara Membuat dan Memasang Iklan AdSense Parallax di Blog dengan Template Non-AMP. Dengan pemasangan jenis iklan ini yang jarang diterapkan oleh blogger pada umumnya diharapkan dapat meningkatkan penghasilan klick iklan AdSense.
    Ingin berlangganan Notifikasi Update Postingan Terbaru? Silahkan Gabung Berbagi Tutorial Online WhatsApp Grup atau Follow Berbagi Tutorial On Google News
    Artikel Terkait: