Skip to main content

Cara Membuat Iklan Paralax dibawah artikel untuk blog non AMP di Tengah layar HP dan Komputer



Pada kesempatan ini kita akan mencoba memasang iklan parallax pada blog.
Apa itu  Iklan 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 sehingga terlihat bahwa objek tersebut tidak bergerak atau diam di tempat ketika sebuah halaman di gulir atau di scroll ke bawah maupun ke atas.

CARA MEMBUAT IKLAN PARALLAX

1. Buka blogg anda > Tema > edit HTML cari kode </head>, untuk memudahkan dalam mencarinya tekan Ctrl + F pada keyboard Laptop atau Komputer anda.

2. Paste kan script dibawah ini tepat di atas kode </head> tadi. 
 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
  position: relative;
  overflow: vi
 sible;
  width: 300px;
  height: 250px;
  margin: 0 auto 20px;
  display: block;
  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 kode dibawah ini


<data:post.body/>
 

4. Paste kan kode dibawah ini tepat dibawah kode no 3 tadi.


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="paralax_div">

  <div>

    <div>

      <div>

        <img src="https://4.bp.blogspot.com/-JpV04y4MQwM/WTITSODPw-I/AAAAAAAArd4/KKuyWD3QGuADLhqSj2Oif781jK4xrnNjQCLcB/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" />

      </div>

    </div>

  </div>

<span class="clear"/>

</div>

</b:if>
 

5. Ganti kode yang diblok warna kuning diatas dengan script iklan adsense anda dengan jenis spanduk tegak berukuran 600 x 300 px.

6. Save template dan lihat hasilnya. 

Berikut demo tampilan iklan Parallax

Sumber artikel: KOMPI AJAIB
                        CARA MANUAL
                        MASIHTERJAGA
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.


Tambahkan aplikasi DesaiNesia di smartphone tanpa install, buka DesaiNesia dengan browser Chrome di smartphone lalu klik ikon titik 3 di pojok kanan atas pada browser, kemudian pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi DesaiNesia dari layar utama smartphone Anda.
Buka Komentar
Tutup Komentar

Install aplikasi DesaiNesia

Tambahkan aplikasi DesaiNesia di smartphone tanpa install, buka DesaiNesia dengan browser Chrome di smartphone lalu klik ikon 3 titikdi browser kemudian pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi DesaiNesia dari layar utama smartphone Anda.