Cara Membuat Iklan Parallax Pada Blog Non AMP




Cara Membuat Iklan Parallax Pada Blog Non AMP
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

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 ==>

+ Follow
Join on this site

with Google Friend Connect