Script untuk Menampilkan Iklan Melayang dengan Tombol Tutup Untuk Shopee Affiliate
Saat ini, iklan melayang telah Teknik Share Link Shoppe Affiliate yang paling populer di website/blog. Iklan melayang biasanya ditampilkan di bagian tengah atau bawah halaman website dan dapat membantu meningkatkan penghasilan Shopee Affiliate kamu. Dalam artikel ini, kita akan membahas bagaimana membuat iklan melayang yang dapat menjawab pertanyaanmu Trik Share Link Shoppe Affiliate.
Pada dasarnya, script ini akan menampilkan iklan melayang pada halaman website atau blog dan menyediakan tombol tutup untuk pengguna yang ingin menghapus iklan tersebut lalu akan di arahkan ke link shopee affiliate anda. Script ini sangat mudah dipahami dan dapat digunakan oleh pemula yang ingin menambahkan iklan melayang pada website atau blog mereka untuk keperluan share shopee affiliate mereka.
Pertama-tama, mari kita lihat struktur HTML dari iklan banner ini. Script ini memerlukan sebuah div dengan id 'iklan' yang berisi sebuah tag anchor dengan link menuju iklan dan sebuah tag img yang menampilkan gambar iklan. Selain itu, div ini juga memiliki sebuah tombol dengan id 'tutup-iklan' yang akan digunakan untuk menutup iklan.
<div id='iklan'> <a href='MASUKKAN LINK SHOPEE/LINK IKLAN LAINNYA DISINI'> <img alt='Iklan' src='MASUKKAN GAMBAR IKLAN DISINI'/> </a> <button id='tutup-iklan'>Tutup</button> </div>Setelah kita memiliki struktur HTML iklan banner, langkah selanjutnya adalah menambahkan script untuk menampilkan iklan dan tombol tutup. Dalam script ini, kita menggunakan dua fungsi yaitu 'tampilkanIklan()' dan 'sembunyikanIklan()'. Fungsi 'tampilkanIklan()' digunakan untuk menampilkan iklan banner dan tombol tutup, sedangkan fungsi 'sembunyikanIklan()' digunakan untuk menyembunyikan iklan dan tombol tutup.
<script> // Fungsi untuk menampilkan iklan dan tombol tutup function tampilkanIklan() { document.getElementById("iklan").style.display = "block"; } // Fungsi untuk menyembunyikan iklan dan tombol tutup function sembunyikanIklan() { document.getElementById("iklan").style.display = "none"; } // Panggil fungsi tampilkanIklan untuk menampilkan iklan dan tombol tutup saat halaman dimuat tampilkanIklan(); </script>Terakhir, kita perlu menambahkan event
Fungsi logika script di atas adalah sebagai berikut:
Ketika si pengunjung membuka website atau blog kita, maka akan tampil sebuah iklan melayang di tengah layar ponsi si pengunjung. Yang juga dilengkapi tombol "Close" yang fungsinya adalah ketika si pengunjung klik tombol close, maka si pengunjung akan dibawa menuju halaman,lin,atau url yang sudah kita siapkan. dan setelah si pengunjung kembali dari halaman baru yang sudah di alihkan tadi, makan semua tampilan pertama saat pengunjung buka blog kita tadi akan hilang. Namun fungsi akan kembali ke dalam keadaan semula apabila website atau blog kita di refresh atau di muat ulang.
Pada script di atas kita belum menambahkah desain tampilan untuk iklan melayang kita. untuk menambahkannya simak dibawah ini. ikuti langkah di bawah ini untuk hasil yang sempurna:
Buka blog kalian lalu Klik Tema=>Edit HTML=>Klik CTRL A=>CTRL F=>Ketik "<head>
Setelah ketemu <head>, pastekan Script ini <style> #iklan { display: none; position: fixed; top: 60%; left: 5%; transform: translate(-5%, -50%); z-index: 9999; } #iklan img { max-width: 100%; height: auto; } #tutup-iklan { position: absolute; top: 0; right: 0; } .container { position: relative; } .container img { float: left; margin-right: 10px; } .container #tombol { position: absolute; top: 0; left: 0; } </style>
Pastekan tepat dibawah <head>.
Langkah ke ke 2. klik CTRL+A=>CTRL+F=>ketikkan </body>jiak sudah ketemu, pastekan script ini tepat di atasnya
<div id='iklan'> <a href='MASUKKAN LINK SHOPEE/LINK IKLAN LAINNYA DISINI'> <img alt='Iklan' src='MASUKKAN GAMBAR IKLAN DISINI'/> </a> <button id='tutup-iklan'>Tutup</button> </div> <script> // Fungsi untuk menampilkan iklan dan tombol tutup function tampilkanIklan() { document.getElementById("iklan").style.display = "block"; } // Fungsi untuk menyembunyikan iklan dan tombol tutup function sembunyikanIklan() { document.getElementById("iklan").style.display = "none"; } // Tambahkan event listener ke tombol tutup untuk menutup iklan dan membuka link iklan document.getElementById("tutup-iklan").addEventListener("click", function() { window.open("https://rdy.to/c/GEfQJ", "_blank"); sembunyikanIklan(); }); // Panggil fungsi tampilkanIklan untuk menampilkan iklan dan tombol tutup saat halaman dimuat tampilkanIklan(); </script>
Setelah cara di atas sudah dengan benar di lakukan silahkan buka blog mu, dan lihatlah bahwa script sudah menjalanjkan fungsinya dengan baik. sekian tutorial ini saya buat semoga membantu kita semua.
Dapatkan Tips Menarik Setiap Harinya!
- Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
- Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
- Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense