Cara Memasang Iklan Parallax Google AdSense di Blogger




Cara Memasang Iklan Parallax Google AdSense di Blogger
Cara Memasang Iklan Parallax Google AdSense di BloggerBerjumpa lagi dengan saya mizipediacom, nah sebelumnya saya ingin berbagi cara Memasang iklan parallax adsense di blog. Jika anda ingin memasang iklan parallax di postingan blog anda, maka bisa anda baca dulu penjelasan di bawah ini.

Dengan menggunakan iklan parallax kita dapat lebih menghemat ruangan yang ada pada blog. Apa kah anda sudah tau apa itu iklan parallax, mungkin bagi anda baru saja terjun kedunia blogger tentu saja belum mengetahui apa itu iklan parallax. Baik saya akan menjelaskan sedikit mengenai iklan parallax. Apa itu parallax? Parallax atau paralaks scrolling web design merupakan suatu teknik khusus dimana sebuah objek yang berada pada latar belakang bergerak lebih lambat dibandingkan dengan objek yang berada di latar depan, yang sehingga terlihat bahwa objek tersebut tidak bergerak atau diam di tempat ketika sebuah halaman di gulir atau di scroll ke bawah maupun ke atas.

Nah, jadi ketika Anda menggunakan iklan dengan efek parallax, iklan tersebut akan tetap diam di tempat meski Anda menggesernya atau scroll ke atas maupun ke bawah. Ini berlaku untuk menampilkan iklan banner maupun iklan adsense yang memiliki ukuran besar namun hanya di tampilkan sebagian saja. Contohnya, iklan sebenarnya berukuran 300 x 600 piksel namun Anda bisa membuatnya menjadi 300 x 250 piksel saja, jadi pada saat iklan tersebut di scroll maka akan terlihat mulai dari bawah sampai atas jika Anda menggulirnya atau scroll ke bawah begitu juga sebaliknya.
Untuk anda yang ingin mengatur ukuran dan posisi atau letak iklannya, jika ingin berada di tengah-tengah artikel atau postingan bisa anda edit-edit sendiri. Penjelasan di atas sudah cukup sekiranya, barangkali Anda tertarik untuk membuat iklan parallax di blog silahkan ikuti langkah-langkahnya di bawah ini.

Cara  Pasang Iklan Parallax Google AdSense di Blogger

  1. Pertama sekali pastikan anda sudah masuk pada dasbhor akun blogger anda sendiri
  2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Anda temukan kode </head> dengan cara cepat menekan tombol CTRL+F. Jika sudah ketemu kode yang bewarna merah, salin kode di bawah ini dan tempel di atas kode </head>
    <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: 99;
    }
    .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;
    }
    .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>
  4. Kemudian anda cari kode seperti di bawah ini, biasanya ada 1 sampai 4 kode yang kita jumpai, anda bisa pilih yang ke 2 atau coba satu per satu
    <div class='post-body entry-content'
  5. Bila kode di atas sudah anda temukan, maka silahkan anda Copy kode di bawah ini dan Paste di atas kode pada langkah nomor 4 di atas.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class="paralax_div">
      <div>
        <div>
          <div>
            <img src="https://2.bp.blogspot.com/-VosLv_dKHbI/W2a7DnKEacI/AAAAAAAAD4c/fGZb5e50xtQ0asTtK_3-Y8VEreoXYDubwCLcBGAs/s1600/Banner%2B6%2B300x600%2Byellow%2Bmizipediacom.png" alt="banner" title="banner" width="300" height="600" />
          </div>
        </div>
      </div>
    <span class="clear"/>
    </div>
    </b:if>
  6. Jika sudah anda bisa klik Save Template
Note: Pada bagian kode di bawah ini bisa anda ganti dengan kode iklan adsense anda.

<imgsrc="https://2.bp.blogspot.com/-VosLv_dKHbI/W2a7DnKEacI/AAAAAAAAD4c/fGZb5e50xtQ0asTtK_3-Y8VEreoXYDubwCLcBGAs/s1600/Banner%2B6%2B300x600%2Byellow%2Bmizipediacom.png"alt="banner"title="banner" width="300"

Mungkin penjelasan singkat saya pada sore ini hanya sampai disini saja. selamat mencoba dan semoga bisa membantu anda.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect