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.
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.
Terimakasih gan tutorialnya , memang sedang nyari cara menambahkan iklan paralax itu bagaimana . kunjungi web saya juga gan
Terima kasih artikelnya bermanfaat, sudah lama saya mencari cara oemasangan parallax otomatis. Apakah ada plugin yang bisa digunakn??
Alhamdulillah ketemu juga yang pasti buat blog saya dengan metode custom CSS. Terimakasih 🙏🏻
Bisa berkunjung blog kecil dan sederhana saya juga https://tulisanguru.com
Tapi kenapa malah gak fokus di tengah ya? Jadi pindah ke samping padahal di atur dari tema sudah di tengah
Coba kode iklannya dicustom untuk lebar/width-nya 300px
Informasi yang selama ini dicari akhirnya ketemu juga. Terima kasih petunjuknya min..
terimakasih banyak mas, saya selau menggunakan kode dari sini untuk project website saya.
Aman ga ni mas menggunakan iklan paralax?
Makasih mas infonya..
ini Paralax ads nya bakalan muncul untuk tampilan mobile aja kan gan?
terimakasih sangat bermanfaat
permisi mas,
cara ubah ukuran iklan paralax nya yg mana ya?
versi webnya kecil bgt
Terima kasih
mantep mas tutornya,, makasih
Thanks gan
Terima kasih mas tutorial nya, otw coba hehe!
apa ini support untuk AMP?
Terima kasih. Ini bener informasi bagus.
☺☺☺
Bang, untuk plugin Ad Inserter gimana cara setting iklan Paralax-nya ya?
Mantap mas, Akhirnya ketemu juga sama artikel yang bisa membantu buat iklan paralax ini, terima kasih atas bantuannya 🙂