floating ads

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.

css model box

Bagi kita pengelola website tentu saja sudah tidak asing lagi dengan yang namanya css. namun terkadang kita ingin membuat sebuah style box atau elemen dengan bermacam macam warna tetapi kita harus membuat script sendiri untk setiap elemen tersebut. Disini akan kita bahas bahagaimana kita membuat 1 nama class tetapi dengan berbagai warna, untuk pembuatannyapun cukup mudah dan sederhana, bagi yang belum menggunakan bisa mencoba script css ini untuk menambah tampilan pada website kalian. untuk pertama kita buat terlebih daulu bentuk boxnya yaitu kita akan membuat elemen div terlebih dahulu dengan css .mybox{height:200px;boreder:1px solid; margin:5px;padding:10px;} ini script untuk bentuk dari box yang akan kita tampilkan dengan bentuk kotak kosong hanya dengan border saja. sedangkan untuk menampilkan elemen mybox tersebut kita cukup memanggil dengan text dalam box kemudian kita akan memberikan warnanya dengan membuat class untuk memanggil warna backgroundnya. .bg-red{background:red; color:white;} .bg-green{background:green; color:white;} .bg-blue{background:blue; color:white;} .bg-yellow{background:yellow; color:white;} .bg-orenge{background:orange; color:white;} Kemudian div yang tadi kita berikan 2 class agar memiliki warna untuk backgroundnya. < div class="mybox bg-red">class mybox bg-red< /div> < div class="mybox bg-green">class mybox bg-green< /div> < div class="mybox bg-blue">class mybox bg-blue< /div> < div class="mybox bg-orange">class mybox bg-orange< /div> maka disini kita membuat 1 class yaitu mybox dengan menggunakan beberapa background color yaitu dengan memanggil class bg-namawarna. Semoga bermanfaat.

FLOATING BOX, MEMBUAT FLOATING BOX PADA WEBSITE
PHP FUNCTION, CARA MEMBUAT FUNGSI (FUNCTION) DENGAN PHP
CSS MULTIPLE COLUMNS, MEMBUAT TULISAN KORAN
MULTIPLE POPUP IN SAME PAGE, JQUERY SCRIPT

Galeri