Cara Membuat Iklan Parallax di Tengah Postingan Blogger
Penawaran Terbatas! Paket Data 25GB Hanya Rp 90.000
Dapatkan kuota besar 25GB untuk semua nomor AS, Loop, dan simPATI hanya dengan Rp 90.000, berlaku selama 30 hari! Internet lancar tanpa khawatir kehabisan kuota, cocok untuk streaming, gaming, dan browsing sepuasnya!
Aktifkan sekarang dan nikmati kebebasan internet!
Read More Beli PaketHallo semua! Pada kesempatan kali ini Armaila akan membagikan panduan lengkap tentang cara membuat iklan parallax di tengah postingan Blogger. Tutorial ini sangat bermanfaat bagi Anda yang ingin menampilkan iklan dengan efek parallax untuk meningkatkan interaksi pengguna, terutama bagi pengunjung yang menggunakan perangkat mobile.
Armaila pribadi pernah mencoba memasang iklan parallax di blog ini, dan hasilnya cukup memuaskan. Jadi, Armaila putuskan untuk berbagi tutorial ini kepada kalian, siapa tahu ada yang membutuhkan. Jika Anda ingin melihat demonya, Anda bisa mengklik tombol di bawah ini:
Iklan parallax ini dirancang khusus untuk tampilan mobile, dan tidak akan muncul pada versi desktop. Mengapa? Karena jenis iklan parallax ini memang lebih optimal saat digunakan pada tampilan mobile. Efek parallax memberikan pengalaman yang lebih dinamis, di mana konten latar belakang bergerak lebih lambat dibandingkan dengan konten utama.
Tutorial ini juga terinspirasi dari blog Kompiajaib.com yang sudah terlebih dahulu membuat panduan tentang iklan parallax. Namun, pada beberapa tutorial lain yang sudah beredar, iklan parallax hanya muncul di atas postingan, bukan di tengah-tengah paragraf seperti yang diinginkan banyak pengguna.
Nah, di tutorial ini Armaila akan memberikan cara yang lebih efektif untuk membuat iklan parallax benar-benar muncul di tengah postingan. Dengan begitu, iklan akan lebih relevan dan mendapatkan perhatian lebih dari pengunjung. Tutorial ini menggunakan JavaScript murni tanpa menggunakan jQuery, jadi tidak akan memperlambat loading blog Anda.
Langkah-Langkah Membuat Iklan Parallax di Blogger
Mari kita mulai! Pastikan Anda mengikuti setiap langkah dengan cermat agar iklan parallax dapat tampil sempurna di blog Anda.
1. Buat Unit Iklan di Google AdSense
Langkah pertama adalah membuat unit iklan di Google AdSense. Berikut adalah langkah-langkahnya:
- Login ke akun Google AdSense Anda.
- Pilih opsi Iklan Display.
- Buat unit iklan dalam bentuk vertikal, dan pilih ukuran Responsive.
- Catat kode data-ad-client dan data-ad-slot dari unit iklan yang telah Anda buat. Ini akan digunakan nanti saat menambahkan iklan ke dalam template.
2. Masuk ke Blogger dan Edit HTML Template
Setelah Anda memiliki unit iklan, langkah selanjutnya adalah mengintegrasikannya ke dalam template blog Anda. Ikuti langkah-langkah berikut:
- Login ke Blogger.
- Pilih blog yang ingin Anda pasangi iklan parallax.
- Buka menu Tema, lalu pilih opsi Edit HTML.
- Di dalam editor HTML, cari kode `]]>
3. Tambahkan Kode CSS untuk Efek Parallax
Untuk menciptakan efek parallax pada iklan, Anda perlu menambahkan kode CSS. Salin kode berikut dan letakkan di atas kode `]]>
` atau ``.
/* Iklan Parallax oleh Wendy Code */
.wendyparalax {
position: relative;
display: block;
overflow: visible;
width: 100%;
height: 0;
margin: auto;
text-align: center;
z-index: 1;
}
.wendyparalax > div {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
position: absolute;
top: 0;
left: 0;
clip: rect(auto auto auto auto);
}
.wendyparalax > div > div {
width: calc(100% - 40px);
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
transform: translateZ(0);
}
.wendyparalax > div > div > div {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
height: 100%;
width: 100%;
}
.clear {
clear: both;
display: block;
}
.wendyparalax {
width: 100%;
min-width: 300px;
min-height: 600px;
text-align: center;
}
.adParallax {
width: 100%;
min-width: 300px;
min-height: 600px;
margin: 10px 0;
}
4. Tambahkan Kode Iklan Parallax ke Dalam Postingan
Setelah menambahkan CSS, sekarang saatnya menambahkan kode HTML dan JavaScript agar iklan parallax bisa muncul di tengah postingan. Letakkan kode berikut tepat di bawah `
Jangan lupa untuk mengganti kode `ca-pub-8802465226xxxxxx` dan `data-ad-slot='290125xxxx'` dengan kode milik Anda. Anda juga bisa mengatur di paragraf keberapa iklan akan muncul dengan mengubah angka `wendyparalax(4);`. Angka 4 berarti iklan akan muncul setelah paragraf ke-4, dan Anda bisa menyesuaikannya dengan kebutuhan Anda.
5. Pastikan Menggunakan Tag <p> Saat Menulis Artikel
Catatan penting, pastikan setiap paragraf dalam artikel Anda menggunakan tag HTML <p>. Ini penting agar JavaScript dapat menempatkan iklan parallax di tempat yang Anda inginkan. Jika Anda tidak menggunakan tag <p>, iklan mungkin tidak muncul di lokasi yang diharapkan.
6. Simpan dan Cek Hasilnya
Setelah semuanya selesai, klik Simpan, dan lihat hasilnya. Anda bisa membuka blog Anda melalui perangkat mobile untuk memastikan iklan parallax tampil sesuai harapan.
Kesimpulan
Itulah panduan lengkap tentang cara membuat iklan parallax di tengah postingan Blogger. Dengan mengikuti langkah-langkah di atas, Anda dapat menampilkan iklan yang lebih menarik dan interaktif, terutama untuk pengunjung mobile. Selain itu, penggunaan JavaScript murni tanpa jQuery juga memastikan performa blog Anda tetap cepat dan ringan.
Jika Anda merasa panduan ini bermanfaat, jangan ragu untuk membagikannya kepada teman-teman atau rekan sesama blogger. Semoga berhasil dan semoga iklan parallax di blog Anda dapat meningkatkan engagement dan pendapatan dari Google AdSense!
