MASFENDI
No Result
View All Result
MASFENDI
No Result
View All Result
MASFENDI
No Result
View All Result

Cara Membuat Iklan Parallax Adsense di WordPress Dengan Mudah

Fendi by Fendi
Juni 22, 2019
in Blogger, WordPress
0
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

Cara Pasang Iklan Parallax Adsense di WordPress | Pada kesempatan kali ini saya akan membahas mengenai cara memasang iklan parallax adsense di dalam post WordPress. Pasti pernah melihat iklan disalam postingan artikel yang terlbelah kan. Pada saat saya membagikan tutorial ini saya menggunakan Jannah Theme sebagai tema yang saya gunakan.

Sebelum terlalu jauh membahas, sebaiknya kamu perlu mengetahui apa yang dimaksud dengan iklan parallax. Untuk pengertiannya bisa kamu simak dibawah ini.

Daftar isi show
1 Apa itu Iklan Parallax?
2 Bagaimana Cara Memasang Iklan Parallax di WordPress atau Blog?

Apa itu Iklan Parallax?

Iklan Parallax merupakan iklan yang tampil atau muncul didalam postingan (seperti background) sebuah konten atau artikel yang terbelah.

Bagaimana Cara Memasang Iklan Parallax di WordPress atau Blog?

Untuk cara pemasangannya bisa kamu ikuti beberapa langkah dibawah ini. Kamu harus mengikuti langkah berikut dengan teliti dan cermat agar tidak ada langkah yang terlewat sehingga hasilnya akan sempurna 🙂

Pertama kamu harus copy kode CSS dibawah ini kemudian paste didalam Menu Custom CSS di Panel Theme.

.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;
  }
}

Kedua copy kode CSS dibawah ini kemudian paste didalam Menu Advertisment di Panel Theme.

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

KODE IKLAN ADSENSE

    </div>
    </div>
  </div>
<span class="clear"/>
</div>

Jangan lupa ganti KODE IKLAN ADSENSE dengan kode dibawah ini.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- #Adsense Parallax MASFENDI -->
<ins class="adsbygoogle"
style="display:inline-block;width:360px;height:600px"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Ganti kode data-ad-client=”ca-pub-XXXXXXXXXXXXXXXX” dan data-ad-slot=”XXXXXXXXXX” sesuai dengan kode Adsense yang kamu miliki.

Jika semua langkah sudah selesai dengan baik, silakan kamu cek tampilan iklan parallax adsense ini pada tampilan mobile. Apakah pemasangan berjalan dengan baik atau masih ada kekeliruan yang terjadi. Jika masih bingung bisa tinggalkan komentar dibawah.

1 / 5 ( 1 vote )
Previous Post

Fitur Baru WhatsApp: Untuk Mengurangi Potensi Salah Kirim Foto?

Next Post

Download Template Blog Mirip IDNTheme

Next Post

Download Template Blog Mirip IDNTheme

No Result
View All Result

Pos-pos Terbaru

  • Arti Istilah Kode Gateway J&T Express
  • Cara Alami dan Ampuh Basmi Serangga di Rumah
  • Produk Kecantikan Terbaru Desember 2019 yang Patut Kamu Coba!
  • Ragam Wayang Indonesia
  • Harga Tiket Nonton MotoGP Mandalika 2021 di atas Bukit

Komentar Terbaru

  • Fendi pada Review Kerjasama Blogpartner.id Dapat Voucher Belanja Blibli.com
  • Hermi hidayati pada Review Kerjasama Blogpartner.id Dapat Voucher Belanja Blibli.com
  • zahran pada Download Skin atau Livery Bus Simulator Terbaru 2019
  • Fendi pada Cara Kerja dan Prinsip Motor 4 Tak dan 2 Tak
  • Doni pada Cara Kerja dan Prinsip Motor 4 Tak dan 2 Tak

Arsip

  • Oktober 2020
  • Desember 2019
  • November 2019
  • September 2019
  • Agustus 2019
  • Juli 2019
  • Juni 2019
  • Mei 2019
  • April 2019
  • Maret 2019
  • Februari 2019
  • Januari 2019
  • Desember 2018
  • November 2018
  • Oktober 2018
  • September 2018
  • Agustus 2018
  • Juli 2018

Kategori

  • Adsense
  • Android
  • Asian Games
  • Asuransi
  • Beasiswa
  • Blogger
  • Finance
  • Game
  • INFO
  • Inspirasi
  • Internet
  • Jogja
  • Kampus
  • Kesehatan
  • Kontes SEO
  • Mahasiswa
  • News
  • NUSAPEDIA
  • Otomotif
  • PPSMB UGM
  • Resep
  • Sejarah
  • Teknik
  • Tekno
  • Template
  • Travel
  • UGM
  • UNS
  • WordPress

Meta

  • Masuk
  • Feed entri
  • Feed komentar
  • WordPress.org
  • About
  • Advertise
  • Daftar Artikel Review MASFENDI
  • Disclaimer
  • DMCA Compliance Statement
  • Kerjasama
  • Kontak
  • Parse HTML to XML Online
  • Privacy Policy
  • Promo

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • About
  • Advertise
  • Daftar Artikel Review MASFENDI
  • Disclaimer
  • DMCA Compliance Statement
  • Kerjasama
  • Kontak
  • Parse HTML to XML Online
  • Privacy Policy
  • Promo

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

Sesi telah kadaluarsa

Silakan masuk log lagi. Laman login akan dibuka di jendela baru. Setelah berhasil login, Anda dapat menutupnya dan kembali ke laman ini.

>