update

FLOATING ADS, HTML FLOATING ADS MODAL

Floating ads adalah jenis iklan yang muncul di bagian atas halaman atau bawah halaman dan akan menghilang atau setelah jangka waktu tertentu (biasanya 15-30 detik). Floating ads biasanya hanya muncul di halaman Website. Terkadang, Floating ads ini tidak menyediakan tombol tutup atau close. Namun, ada versi yang lebih canggih dapat hadir dalam berbagai bentuk atau ukuran yang menyertakan suara, animasi, dan komponen interaktif lainnya. Floating ads menggunakan berbagai teknologi, seperti kombinasi Flash dan HTML dinamis (DHTML), dan memiliki kemampuan untuk ditampilkan secara berbeda sesuai dengan kemampuan browser yang di gunakan pengguna itu sendiri.
Lalu apakah Floating ads ini hanya di peruntukkan oleh penyedia iklan yang akan di tampilkan pada website yang dimiliki oleh publiser sebagai partner dari penyedia iklan? Tentu saja tidak, mengapa?
  • Kita bisa membuatnya sendiri
  • Tidak harus penyedia iklan yang boleh membuat Floating ads

Manfaat Floating ads

Manfaat dari Floating ads ini cukup bagus untuk kita menampilkan berbagai kontent yang kita anggap sebagai promosi dari dalam website kita, seperti kita memiliki promo tertentu kita juga bisa menampilkannya dengan metode Floating ads, kita memiliki kontent yang ingin kita unggulkan juga bisa menggunakan metode Floating ads. Lalu bagaimana cara kita membuat Floating ads untuk prmosi pribadi tanpa melibatkan penyedia iklan dari luar? Mari kita bahas cara membuatnya.

CSS Floating ads

Untuk membangun sebuah Floating ads kita perlu membuat desainnya terlebih dahulu yaitu menggunakan css. yang nanti akan menentukan bentuk model dari Floating ads itu sendiri. /*agar posisi ada di tengah*/ .floating-ads { position:fixed; top:50%; left:50%; transform: translate(-50%, -50%); width:500px;/*sesuaikan*/ hright:auto; border-radius:8px; } .floating-ads > .head{padding:10px;background:blue;color:white;} .floating-ads > .container{padding:10px;background:#ededed;} .left{float:left;} .right{float:right;} .center{display:block;text-align:center;} ini css secara defaultnya untuk membuat Floating ads maka kita bisa menerapkannya dengan < div class="floating-ads"> < div class="head"> < h3 class="left">Promosi< /h3> < h3 class="right close">x< /h3> < /div> < div class="container"> < img src="ull gambar"> < p>Text promosi bisa disini link menuju promosi atau yang lainnya< /p> < /div> Ada beberapa cara untuk memnuculkan Floating ads yaitu menggunakan delay atau tanpa delay

Floating ads Tanpa Delay

/*agar posisi ada di tengah*/ .floating-ads { position:fixed; top:50%; left:50%; transform: translate(-50%, -50%); width:500px;/*sesuaikan*/ hright:auto; border-radius:8px; } .floating-ads > .head{padding:10px;background:blue;color:white;} .floating-ads > .container{padding:10px;background:#ededed;} .left{float:left;} .right{float:right;} .center{display:block;text-align:center;} < div class="floating-ads"> < div class="head"> < h3 class="left">Promosi< /h3> < h3 class="right close">x< /h3> < /div> < div class="container"> < img src="ull gambar"> < p>Text promosi bisa disini link menuju promosi atau yang lainnya< /p> < /div>

Floating ads dengan Delay

Untuk membuat Floating ads dengan Delay maka kita rubah css untuk Floating ads kemudian kita juga menggunakan javascript agar terlihat lebih interaktif Floating adsnya.
Maka css kita rubah agar tidak muncul pada saat halaman di buka tetapi akan kita munculkan dengan menunggu waktu yang kita tentukan. /*agar posisi ada di tengah*/ .floating-ads { position:fixed; top:200%;/*agar tidak terlihat sebelumm waktunya tiba*/ left:50%; transform: translate(-50%, -50%); width:500px;/*sesuaikan*/ hright:auto; border-radius:8px; } .floating-ads > .head{padding:10px;background:blue;color:white;} .floating-ads > .container{padding:10px;background:#ededed;} .left{float:left;} .right{float:right;} .center{display:block;text-align:center;} Untuk div tidak perlu kita rubah tetap seperti di bawah ini. < div class="floating-ads"> < div class="head"> < h3 class="left">Promosi< /h3> < h3 class="right close">x< /h3> < /div> < div class="container"> < img src="ull gambar"> < p>Text promosi bisa disini link menuju promosi atau yang lainnya< /p> < /div> Setelah kita membuat perubahan pada css Floating ads maka kita akan membuat perintah pada javascript atau bisa dengan Jquery, tapi saya lebih suka menggunakan Jquery.

Floating ads Jquery dengan tombol close

setTimeout(function(){ /*menarik floating ads dari bawah ketengan dengan perintah animate*/ $(".floating-ads").animate({top:"50%"},500); },3000);/*3detik setelah halaman terbuka*/ /*perintah tombol close untuk menyembunyikan floating ads*/ $(".close").click(function(){ $(".floating-ads").animate({top:"200%"},500); });

Floating ads Jquery tanpa tombol close

setTimeout(function(){ /*menarik floating ads dari bawah ketengan dengan perintah animate*/ $(".floating-ads").animate({top:"50%"},500); },3000);/*3detik setelah halaman terbuka floating ads muncul*/ setTimeout(function(){ /*menarik floating ads dari bawah ketengan dengan perintah animate*/ $(".floating-ads").animate({top:"50%"},500); },6000);/*setelah muncul 1 menit akan otomatis hilang dengan sendirinya*/ Floating ads ini juga kita bisa menampilkan timing yang berjalan seperti detik dan tanpa tombol close akan otomatis menghilang dengan sendirinya, Lalu bagaimana cara kita membuatnya dangan menampilkan detik yang berjalan dan automatis close, silahkan kunjungi halaman demo untuk melihat hasil dan script lengkapnya. yaitu pada floating box with delay in second. Sebelum menuju halaman demo jika ada pertanyaan bisa tinggalkan komen di bawah ini, berikan penilaian untuk menambah semangat untuk membuat artikel artikel yang bermanfaat untuk para pengunjung kami. Terima kasih sudah membaca artikel tentang Floating ads semoga bermanfaat.
Ditulis oleh: Admin

Tanggal: 02-09-2022 Pembaruan : 2 bulan lalu

 

Beri nilai


 
BAGIKAN :

Tinggalkan komentar

AUTO TRANSLATE WEBSITE, AUTOMATICALLY TRANSLATE WEB PAGES
CARA RISET KEYWORD GOOGLE, MENGGUNAKAN KEYWORD TOOLS GRATIS
MENGUBAH KECEPATAN CRAWLING GOOGLEBOT
LINK BUILDING STRATEGY, SEO LINK BUILDING UNTUK WEBSITE

Galeri