Cara Membuat Iklan Parallax di Blogger Non AMP

Pada artikel ini saya akan membahas tentang cara membuat iklan parallax di blogger non amp. Sebenarnya iklan parallax ini di terapkan khusus blog AMP, namun masih banyak blog yang tidak menggunakan template amp, jadi iklan parallax non amp ini di buat bagi mereka yang tidak menggunakan blog amp.

Baca juga : Cara Memasang Auto Ads di Blogger

Iklan parallax ini bentuknya seperti background, mungkin iklan parallax ini bisa di sebut juga sebagai iklan background, iklan menempel di background, ataupun iklan background yang muncul saat di scroll, saya sendiri juga bingung menjelaskannya.

Iklan parallax ini berawal dari script amp-fx-flying-carpet namun Kang Adhy di blog Kompi Ajaib memodifikasi script amp-fx-flying-carpet agar bisa di gunakan pada iklan adsense. Di bawah ini bisa di lihat tampilan Iklan Parallax di blogger non amp, disini saya menggunakan template Evo Magz sebagai contoh.

Untuk menempatkan kode iklannya kalian harus menggunakan banner iklan ukuran 300×600. Untuk cara memasang iklan parallax di blogger non amp ini, silahkan ikuti langkah-langkah dari saya berikut ini.

Baca juga : Cara Menambah Kode Iklan AdSense Di Blog Lain

Cara Memasang Iklan Parallax di Template Blogger Non AMP

Langkah pertama masuk ke akun Blogger kalian.
Pilih menu Tema, kemudian klik Edit HTML.
Cari kode </head> kemudian masukan script di bawah ini sebelum 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: #fff;
}
.paralax_div > div > div > div > * {
  margin: 0;
  margin-top: -50px;
}
.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>

Selanjutnya cari kode <div class='post-body entry-content', kemudian masukan script dibawah ini setelah kode <div class='post-body entry-content'.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='paralax_div'>
  <div>
    <div>
      <div>
       <!--Masukan kode iklan yang sudah di Parse-->
      </div>
    </div>
  </div>
<span class='clear'/>
</div>
</b:if>

Pengaturan:

Ganti kode  dengan kode iklan yang sudah di parse.

Jika sudah selesai, silahkan klik Simpan tema.

Catatan: Jika tidak berhasil, silahkan coba cari script <div class='post-body entry-content' yang lain, dan silahkan coba sampai berhasil.

Baca juga : Cara Membuat Iklan AdSense Berada di Antara Tag Heading

Demikian tutorial dari saya mengenai cara membuat iklan parallax di blogger non amp. Jika ada pertanyaan mengenai iklan parallax ini atau mengenai cara memasangnya, silahkan kalian masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel di atas bermanfaat untuk kalian semua. Untuk tutorial yang lainnya mengenai teknik pemasangan iklan, silahkan tetap kunjungi blog Tutorial Umum.

blogger dashboard
blog editor
blogger indonesia
blogger login
blogger tutorial
blogspot sign in
instagram widget for blogger
blogger dashboard
blogger tutorial
mesothelioma info
mesothelioma survival rates
mesothelioma lawyer
mesothelioma lawyer new jersey
mesothelioma attorney
mesothelioma cancer
google key
google keyword suggestion tool
kw planner
google keyword tool free
google planner tools
google adwords keyword planner
google planner
keyword tool external
google keyword planner tools
google word planner
google key planner
high paying keyword
key plan
keyword generator online
keyword planner
keyword density
keyword checker
keyword suggestion
google keyword planner
keywordtool io
keyword check
keyword generator tool
keywordspy
keyword
daftar blog ke google
cara daftar di google adsense
daftar google adsense indonesia
cara bikin google adsense
create google adsense
membuat google adsense
cara mendaftar ke google adsense
cara daftar blog ke google
daftar adsense blog
daftar masuk google
daftar blog di google
mendaftar di google
cara mengaktifkan google adsense
daftar baru google
cara mendaftar di google adsense
cara daftar google adsense dari blogger
syarat daftar google adsense
cara masuk google adsense
pendaftaran google adsense
cara daftar google adsense di youtube
tutorial google adsense
cara mendaftar google adsense youtube
daftar google adsense youtube
adsense
adesene
cara daftar google
cara daftar adsense blog
cara diterima google adsense
mendaftar adsense
persyaratan google adsense
google adsense cara
cara daftar akun google adsense
cara daftar google adsense youtube
cara mudah daftar google adsense
cara ikut google adsense
adsense start
web adsense
google adsense blog
cara daftar ulang adsense
cara daftar google adsense indonesia
membuat akun adsense
daftar adsense lewat youtube
g adsense
cara daftar ke google adsense
adsense masuk
cara adsense blog
daftar youtube adsense
cara buat akun google adsense
syarat mendaftar google adsense
google daftar
cara mendapatkan google adsense
mendaftar google
app store android
android market app
clansmobile games
google android
game mobile
google android device
android 1
logo android
play store app
pubgplayer unknown battle ground
battlegrounds online
playerunknown's battleground
modmobile la
mobile mobile mobile mobile
mobile mobile mobile
of mobile
mobile mobile
mobile a
mobil usa
web game
game android
mobile games
game google gratis
permainan google gratis
donlot game terbaru
game online gratis
game online game online
game yang
game yang gratis
game tidak online
permainan tidak online
game web terbaru
gratisindo game
permainan yang baru
google game online gratis
permainan google
games co id
game web terbaru

Sudut Blogger

Cara Membuat Iklan Parallax di Blogger Non AMP

Cara Memasang Iklan Parallax di Template Blogger Non AMP

Share this