Cara Membuat Iklan Parallax Pada Blog Non AMP Cara Membuat Iklan Parallax Pada Blog Non AMP - mizipediacom mizipediacom: Cara Membuat Iklan Parallax Pada Blog Non AMP

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Membuat Iklan Parallax Pada Blog Non AMP

Monday, October 16, 2017



Cara Membuat Iklan Parallax Pada Blog Non AMP

Mungkin ada sebagian dari anda yang masih ingat dengan cara membuat iklan parallax pada blog AMP?? Nah disi kita bisa membuat iklan parallax pada blog AMP dengan sangat mudah yaitu dengan bantuan js amp-fx-flying-carpet.

Ini saya rasa tentu saja hal tersebut tidak akan bekerja pada blog non AMP karena itu ini khusus untuk blog dengan template Amp. Di bawah ini contoh template AMP.


Lantas bagaimana caranya jika kita ingin membuat iklan parallax pada blog non AMP??

Ada juga beberapa dari mereka khusunya rekan blogger yang menanyakan hal ini (iklan parallax pada blog non AMP) kepada saya, yang akhirnya saya mencoba untuk membuat di blog non AMP dan berhasil membuatnya, seperti pada halaman berikut:

Untuk iklan parallax ini dapat digunakan untuk banner image, iklan dengan iframe, atau juga untuk adsense.

Apabila anda memang tertarik untuk mencoba nya, maka silahkan anda bisa mengikuti penjelasan di bawah ini cara penerapannya, dan jika anda ingin melihat demonya bisa anda klik tombol di bawah ini.


Cara Membuat Iklan Parallax Pada Blog Non AMP

1. Pertama , pastikan anda sudah masuk di dasbhor andasendiri
2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Anda Temukan kode dibawah ini :
<div class='post-body entry-content' ........
4. Kemudian simpan kode HTML di bawah ini tepat di atas kode di atas
<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>
Jika Anda menggunakan untuk iklan banner (banner dengan tinggi 600px dan lebar 300px), silahkan ganti  anda bisa ganti url image pada kode di atas. Bila Anda menggunakan untuk iklan dengan iframe atau adsense (iklan 300x600), maka silahkan anda ganti tag <img> di atas dengan kode iklan Anda.
5. Dan Silahkan anda simpan kode di bawah ini letakan 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: 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: auto;
  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>

Mungkin sampai disini dulu penjelasan yang singkat pada malam ini, semoga bisa bermanfaat untuk 
anda, semoga berhasil dan selamat mencoba
Lihat Juga