Skip to content Skip to sidebar Skip to footer

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
Abu Haqqi
Abu Haqqi Blogger

Post a Comment for "Cara Membuat Iklan Paralax dibawah artikel untuk blog non AMP di Tengah layar HP dan Komputer"

Berlangganan via Email