4.1/5 (10)

Kali ini saya akan membahas tutorial bagaimana cara memasang iklan parallax di tampilan mobile Template Newspaper, Tutorial ini khusus untuk template Newspaper namun bisa juga di template lainnya yang mempunyai fitur yang dapat membedakan CSS dan kode html untuk tampilan mobile dan tampilan dekstop.

Pertama masukan kode css dibawah ini, jika anda menggunakan plugin Mobile dari Tagdiv anda dapat meletakannya pada custom code mobile theme

Baca juga  Cara Withdraw Paypal, Indodax dan Lainnya ke akun OVO
.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: 650px;
    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:650px;
  }
}

jika anda tidak menggunakan plugin mobile theme bawaan template anda dapat meletakan code pada bagian theme panel >> Misc >> Costum Code. Lalu pastekan kode CSS diatas pada tampilan Phone dan Ipad seperti gambar dibawah ini.

Setelah memasukan kode CSS anda dapat memasukan kode iklan pada artikel dengan menambahkan kode html di theme panel >> Ads atau jika menggunakan Plugins Mobile Theme masukan pada bagian ads kode dibawah ini.

<div class="paralax_div" style="center">
  <div>
    <div>
      <div>

IKLAN ADSENSE

    </div>
    </div>
  </div>
<span class="clear"/>
</div>
Baca juga  Cara Menghilangkan Auto Ads Adsense dibawah Footer

Setelah itu anda dapat mengecek iklan pada artikel anda di tampilan mobile, jika berhasil iklan parallax akan muncul seperti yang ada di blog kami ini. Demikianlah tutorial iklan parallax dari kami dengan menggunakan kode HTML dan CSS diatas.

Mohon beri rating

LEAVE A REPLY

Please enter your comment!
Please enter your name here

11 + 14 =