Cara Membuat Slot Iklan Parallax Secara Manual di Blogger

2 komentar
Fernn.id - Pada kesempatan kali ini admin ingin sedikit berbagi tutorial seputar blogging yaitu Cara Membuat Iklan Paralax Manual di Blogger yang mungkin sedang kalian butuhkan dan cari tapi sampai saat ini belum berhasil kalian temukan tutorialnya.

Perlu diketahui jika iklan paralax saat ini sedang marak digunakan oleh situs-situs besar terutama situs berita, mengapa demikian? Hal ini dikarenakan iklan paralax mampu mendatangkan jumlah klik pada iklan tersebut.

Apakah jenis iklan ini berbahaya untuk akun adsense? menurut kami sendiri untuk saat ini tidak berpangaruh apapun, seandainya berbahaya, pasti situs-situs besar tersebut tidak akan menggunakannya. Tetapi berbeda lagi jika sewaktu-waktu ada perubahan kebijakan dari pihak Google Adsense yang tidak bisa diketahui kapan adanya perubahan tersebut.

Untuk jenis iklan ini sendiri, sampai saat ini belum ada atau belum disediakan oleh Google Adsense jadi jika kalian ingin membuatnya silahkan ikuti tutorial secara manual di artikel kali ini.

Apa itu Iklan Parallax?

Iklan Parallax atau yang biasa disebut dengan Paralaks scrolling web adalah suatu teknik yang dimana sebuah objek latar belakang bergerak lebih lambat apabila kita bandingkan dengan objek latar depan, terlihat seolah objek tersebut tidak bergerak ketika halaman di scroll.

Belum paham? jadi gini sob jenis iklan ini akan menjadi background halaman artikel yang posisinya akan tetap meskipun halaman artikel di scroll berulang-ulang oleh pengunjung atau pembaca.

Mau pasang jenis iklan ini? yuk simak langkah-langkah penerapannya berikut ini.

Cara Membuat Iklan Parallax di Blogger (Non AMP)

  1. Pastikan kalian sudah login ke Blogger.com
  2. Setelah masuk dashbord, silahkan pilih menu Template > Edit HTML
  3. Kemudian cari kode </head>
  4. Lalu salin kode CSS berikut ini, dan letakkan diatas kode (langkah no.3)
    <b:if cond='data:view.isPost and data:blog.isMobileRequest'>
    <style>
    @media (min-width:415px) {
        #banner-body {
           display:none!important;
        }
    }
    .banner-content {
        width: 100%;
        margin-bottom: 20px;
    }
    .banner-position {
        position: absolute;
        width: 90%;
    }
    .banner-display {
        display: inline-block;
        position: fixed;
        top: 0;
        left: 0;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0,0,0);
    }
    .banner-iframe {
        display: block;
        position: relative;
    }
    </style>
    </b:if>
  5. Lanjutkan untuk mencari kode
    <div class='post-body entry-content' atau <data:post.body/>
  6. Lalu salin dan letakkan kode html berikut ini tepat diatas kode (langkah no.5)
    <b:if cond='data:view.isPost and data:blog.isMobileRequest'>
      <div class='banner-content'>
        <div class='banner-position'>
          <div class='banner-display'>
            <div class='banner-iframe'>
              <a expr:href='data:post.url.canonical' expr:title='data:post.title'>
                <img src='https://1.bp.blogspot.com/-jWqKC5KjJD4/Xwgdw33YAbI/AAAAAAAAAw4/hsnICvEpw9Y0-5Q6v_-DItnzR9KMT1wngCLcBGAsYHQ/s600/images.png' width='100%'/>
              </a>
            </div>
          </div>
        </div>
      </div>
    </b:if>
  7. Salin juga javascript berikut ini, dan letakkan diatas kode </body>
    <b:if cond='data:view.isPost and data:blog.isMobileRequest == &quot;true&quot;'>
      <script>//<![CDATA[
        $(function() {
          var banner_content = document.querySelector('#banner-body');
          var banner_width = $(window).width() + 'px';
          var banner_height = $(window).height() + 'px';
          $('.banner-content').css({'height': banner_height});
          $('.banner-position').css({'height': banner_height,'clip': 'rect(0 '+ banner_width +' '+ banner_height +' -20px)'});
          $('.banner-display').css({'width': banner_width,'height': banner_height});
          $('.banner-iframe').css({'height': banner_height});
          if (banner_content) {
            $('.banner-content').appendTo(banner_content);
          } else {
            $('.banner-content').remove();
          }
        });
      //]]></script>
    </b:if>
  8. Save Template.
  9. Salin dan letakkan kode berikut ini pada artikel, pastikan gunakan metode penulisan HTML
    <div id="banner-body"></div>
  10. Publikasikan artikel.

Penutup

Jika anda masih belum paham dengan apa yang sudah kami sampaikan, silahkan tanyakan ke kolom komentar yang tersedia dibawah artikel ini. Pastikan agar sesuai dengan topik artikel agar bisa kami respons.

Mungkin sekian dahulu artikel dari Cara Membuat Slot Iklan Parallax Manual di Blogger, semoga bermanfaat.
Terimakasih
Fernand
Fernand
Hanya seorang blogger yang hobinya coding

Related Posts

2 komentar

  1. Bahaya gak buat akun adsennya?

    BalasHapus
    Balasan
    1. sampai saat ini pengguna paralax gak ada keluhan sih mas

      Hapus

Posting Komentar

Dapatkan artikel terbaru!