countdown timer widget for website

countdown timer widget for website adalah hitungan mundur yang berubah setiap detik seperti halnya detik pada jam menggunakan Javascript codeLalu bagaimana kita membuatnya biasanya para kreator menuliskan scriptnya menggunakan plugin atau tool yang sudah siap pakai yang di siapkan oleh penyedia templete seperti wordpress, blogspot dan lainnya.Bagaimana jika kita menggunakan script sendiri tanpa menggunakan plugin dari pihak ketiga? caranya juga cukup sederhana dan mudah di pelajari dan di pahami dan juga sangat simple karena tidak terlalu panjang scriptnya.Cara kerja countdown timer widget for website Dengan memahami cara kerja countdown timer widget for website ini kita akan lebih mudah membuata berbagai jenis script yang mirip dengan countdown timer widget for website, mari kita buat perintah scriptnya. Script countdown timer widget for website < div class="countdown">30s< /div> Dengan tag di atas maka kita akan menurunkan angka dari 30 menuju 0 secara berurutan menggunakan Javascript code, untuk perintah scriptnya adalah $(docucment).ready(function(){ var angka = $(".countdown").html().replace("s",""); var kurangi = parseInt(angka - 1); setInterval(function(){ $(".countdown").html(kurangi); },1000); }); Maka dengan adanya angka 1000 ini memerintahkan akan berjalan dengan sendirinya setiap detik, namun ini akan terus menurun meskipun angka sudan di bawah 0 atau Minus, Lalu bagai mana agar angka terkecil adalah 0 / nol, maka kita lakukan pengecekan terlebih dahulu dengan merubah scrip diatas menjadi. $(docucment).ready(function(){ var angka = $(".countdown").html().replace("s",""); var kurangi = parseInt(angka - 1); setInterval(function(){ if(angka > 0){ $(".countdown").html(kurangi+"s"); }else{ $(".countdown").html("0s"); } },1000); }); Dengan script ini maka kita akan menurunkan angka dari 30 menuju 0 secara berurutan. Terimakasih sudah membaca artikel countdown timer widget for website, Semoga bermanfaat

slide up

SLIDE UP, CARA MEMBUAT EFEK SHOW DAN HIDE JQUERY
slide up, Cara Membuat Efek Show dan Hide jQuery adalah cara kita membuat sebuah tampilan yang bisa di tampilkan dan bisa di sembunyikan pada saat di klik oleh pengunjung. Dialan penerapannta maka kita harus terlebih dahulu membuat bagan atau kerangka, disini saya contohkan kita akan membuat sebuah bentuk seperti pada gambar di atas.Karena ini kita menggunakan css dan javascript maka kita terlebih dahulu membuat css yang nani akan kita terapkan yaitu Dengan kode < div class="model-box"> < div class="model-box-hed"> < h3>Title box< /h3> < i class="open-content fa fa-plus-square" aria-hidden="true">< /i> < /div> < div class="model-box-main"> Masukkan konten yang akan di tampilkan berada di dalaman sini < /div> < /div> Sekarang kita membuat css untuk memberikan warna sesuai keingingan kita Dengan kode css .model-box{border:1px solid blue; border-radius:5px;padding:0px;} .model-box-head{background:green; color:white;padding:10px;} .model-box-head > h3{float:left;} .model-box-head > i{float:right;} .model-box-main{height:300px;padding:10px;} Sekarang kita sudah membuat style untuk model-box kemudian kita akan membuat efeknya dengan menggunakan javascript atau dengan jQuery, tetapi disini saya menggunakan jQuery ya agar scriptnya tidak terlalu panjang dan simple. Script untuk slide up, Cara Membuat Efek Show dan Hide jQuery ini bisa kita buat dengan mentargetkan salah satu class pada i yang ada di dalam class model-box-head yaitu class open-content sebagai triger pada saat di klik, untuk penerapannya adalah Dengan kode jquery $(".open-content").click(function(){ /*menguji class fa terlebih dahulu*/ var me = $(this).hasClass("fa-minus-square");/*artinya apakah ini memiliki class fa-minus-square*/ /*jika tidak berarti kindisinya masih fa-plus-sqaure*/ if(me !=true){ /*maka kita ganti plus menjadi minus*/ $(this).removeClass("fa-minus-square");/*hilangkan class fa-minus-square*/ $(this).addClass("fa-plus-square");/*diganti dengan class fa-plus-square*/ /*kita mencari class main pada box tersebut dengan perintah parent()*/ $(this).parent().parent().find(".model-box-main").slideUp();/*artika di menyembunyikan content dari class model-box-main*/ }else{/*kita kembalikan semula*/ /*maka kita ganti plus menjadi plus*/ $(this).removeClass("fa-plus-square");/*hilangkan class fa-plus-square*/ $(this).addClass("fa-minus-square");/*diganti dengan class fa-minus-square*/ /*kita mencari class main pada box tersebut dengan perintah parent()*/ $(this).parent().parent().find(".model-box-main").slideDown(); /*artika di buka kembali content dari class model-box-main*/ } }); Maka kita sudah bisa bagaimana slide up, Cara Membuat Efek Show dan Hide jQuery, manfaat dari mobel box ini kita bisa memberikan kontent lebih banyak tanpa harus banyak memakan tempat tampilan pun juga lebih rapih. Terima kasih sudah membaca artikel slide up, Cara Membuat Efek Show dan Hide jQuery Semoga bermanfaat.

multiple popup in same page

Multiple popup in same page Adalah Sebuah perintah Bagaimana kita membuat popup window pada suatu halaman website, Banyak Jenis popup yang bisa kita gunakan, dengan membuat triger onClick atau dengan otomatis, atau bahkan bisa dengan multy halaman kita membuat dalam satu perintah popup. Onclick Multiple popup in same page Dengan perintah Onclick kita bisa menampilkan popup dengan cara $(".button").click(function(){ window.open("url1","","width=400, height=300"); window.open("url2","","width=400, height=300"); }); Kemudian kita mrmbuat sebuah button untuk memanggil Multiple popup in same page < button class="button">open popup< /button> Timeout Multiple popup in same page Selain dengan Onclick kita juga bisa melakukan atau membuat popup dengan menggunakan delay atau Timeout setTimeout(function(){ window.open("url1","","width=400, height=300"); window.open("url2","","width=400, height=300"); },3000); maka Dengan perintah SetTimeout popup akan muncul dengan sendirinya setetlah loading halaman untuk mengatur delay kita bis merubah angka pada 3000/3detik atau bisa di ubah sesuai keinginan kita. Interval Multiple popup in same page Selain dengan Onclick dan Timeout kita juga bisa melakukan atau membuat popup dengan menggunakan repaet atau Interval yang arinya akan membuka popup di dalam setiap waktu yang kita tentukan. setInterval(function(){ window.open("url1","","width=400, height=300"); window.open("url2","","width=400, height=300"); },3000); maka Dengan perintah SetInterval popup akan muncul dengan sendirinya setiap 3000/3detik atau bisa di ubah sesuai keinginan kita. Cara Membuat Multiple popup in same page 1 Buatlah sebuah file dengan namafile.html 2 copy script di atas kedalam namafile.html 3 Buka namafile.html menggunakan browser anda Untuk full script otomatis popup dengan menggunakan interval dan Timeout kita bisa menggunakan script di bawah ini. setInterval(function(){ setTimeout(function(){window.open("url1","","width=400, height=300");},1000); setTimeout(function(){window.open("url2","","width=400, height=300");},2000); },60000);/*1 minutes*/ Kemudian save file namafile.html Notes Ganti url1 dan url2 denga url yang di tuju Jika ada pertanyaan silahkan tinggalkan komentar di bawah ini Terimakasih sudah membaca artikel Multiple popup in same page Semoga artikel Multiple popup in same page memberi ilmu bermanfaat bagi visitor kami, penilaian dan komentar akan menambah semangat sitename untuk terus menulis dan membagkan artikel artikel yang bermanfaat lainnya.

onbeforeunload javascript

Dalam website kita banyak mengenal script, baik itu html javascript css php dan lainnya, banyak nama script banyak pula fungsi setiap scciptnya. dalam kasus ini kita bahas mengenai aski lain pada tombol close onbeforeunload, script ini digunakan untuk memberikan jeda pada pengunjung untuk tidak langsung meninggalkan halaman pada saat pengunjung memilih kembali atau close halaman kita.tentu saja akan menambah waktu berkunjung di halaman kita meskipun tidak seberapa tetapu bisa membantu menambah waktu berkunjung untuk beberapa detik, tetapi jika kita arahkan menuju halaman lain maka kita juga akan mendapatkan view yang lebih dari script ini. untuk membuat script dasarnya adalah $(window).bind('beforeunload', function(){ alert("pesan anda disini"); return false; }); ini contoh jika kita ingin membuat pesan sebelum di tinggalkan oleh pengunjung.tetapi kita juga bisa mengarahkan untuk menuju halaman yang lain agar pengunjung tidak langsung begitu saja. yaitu dengan cara mengganti text alert("pesan anda disini"); dengan window.open("alamatartikellain","","width=300, height=200");. $(window).bind('beforeunload', function(){ window.open("alamatartikellain","","width=300, height=200"); return false; }); perintih ini pada saat pengunjung akan meninggalkan halaman kita maka akan muncul pilihan tetap meninggalkan atau tetap di halaman yg sama, jika pengunjung memilih meninggalkan maka pengunjung akan di arahkan untuk membuka artikel kita yang lain di jendela baru yaitu akan membuka artikel sesuai yang kita targetkan dengan window.open("alamatartikellain","","width=300, height=200");. dan jika pengunjung memilih tetap maka halaman tidak akan tertutup dan pengunjung akan tetap di halaman yang saya dan juga tidak membuka artikel yang lain.caranya cukup mudah, dan script ini bisa kita terapka untuk menurunkan bounce rate.

javascript remove class

JS TOGGLECLASS, JAVASCRIPT CLASS METHOD
Didalam website tentu banyak sekali tag html yang memiliki berbagai atribut baik itu class atau id, dengan tujuan agar mudah di panggil atau juga untuk memudahkan melakukan custom style yang kita terapkan melalui file css.kemudian bagaimana agar kita bisa merubah class dari elemen html itu pada saat website sudah berjalan atau ingin melakukan perubahan class pada suatu elemen dengan menggunakan javascript.tentu kita harus membuat scriptnya, yang harus kita pahami adalah class ini di peroleh dari file css yang kita terapkan pada elemen html.disini saya contohkan dengan membuat div dengan perintah atau style tersembunyi dengan kata lain pada css yaitu hidden.Contoh sederhana:contoh perintah css: .hidden{display:none;} lalu akan kita terapkan untuk menyembunyikan gambar contohnya: maka gambarpun tidak akan muncul pada halaman kita sebelum kita hilangkan class hidden tersebut.maka kita membuat perintah javascript untuk menghilangkan class hidden pada div yang memiliki class gambar tersebut. sebelumnya kita perhatikan pada disitu terdapat 2 class yaitu gambar dan hidden dengan keadaan tersembunyi karena ada class hidden dengan perintah yang ada di css yaitu .hidden{display:none;} : yang artinya tidak di tampilkan.untuk menghilangkan class hidden pada class gambar cukup mudah yaitu: $(".gambar").removeClass("hidden"); atau jika ingin menampilkan gamabarnya delay atau di kasih tenggang waktu maka setTimeout(function(){ $(".gambar").removeClass("hidden"); },3000); maka gambar akan muncul setelah 3 detik setelah halaman terbuka. ini juga bisa kita gunakan untuk melakukan lazy load yang kita buat menggunakan css css lazy load cukup mudah dan sederhana semoga bermanfaat.

image lazy loading

Dalam sebuah website kita banyak menggunakan berbagai macam script dan jenisnya atau kita juga sering menggabungkan 2 script sekaligus untuk membuat sebuah tampilan yang sesuai keinginan, seperti kasus ini kita akan menggabungkan dua script untuk berjalan beriringan dalam sebuah website yaitu kita menggunakan javascript dan CSS.kali ini kita akan membahas bagaimana cara menentukan lama loading lazy load atau untuk menjaga First Conteentfull Paint yang kita buat menggunakan file css.untuk yang belum tau cara membuat lazy load dengan css bisa kuntjungin css lazy load.dengan penggunaan css lazy load maka setiap element tag html yang ada di dalam website memiliki class .lazy-load. nah untuk menghentikan animasy dan menampilkan kontent website yang sesungguhnya maka kita bisa menggunakan javascript dengan cara javascript remove class, nah untuk menghentikan lazy load maka kita akan memanggil semua elent yang memiliki dan tidak memiliki class lazy load yaitu dengan cara:kita menggunakan jquery setTimeout(function(){$("*").removeClass("lazy-load");},15000);perintah ini menunjukkan 15000 atau 15 detik untuk menjalankan lazy load pada saat awal membuka halaman website, kita bisa merubah angka itu sesuai keinginan sendiri yang di rasa cukup menarik bagi kalian masing - masing.

FLOATING ADS, HTML FLOATING ADS MODAL
PHP FUNCTION, CARA MEMBUAT FUNGSI (FUNCTION) DENGAN PHP

Galeri