Di video ini saya tunjukkan cara membuat menu Dock yang menempel di bawah halaman website dengan efek transparansi dan blur yang dibuat dengan HTML, CSS dan JavaScript. Kamu bisa mengunduh source code nya di sini: https://github.com/habibieamrullah/HTML-and-JavaScript-Dock-Menu-Example Tonton video tutorialnya di sini:
Kategori: HTML5, CSS & JavaScript
Cara membuat website pemutar video online (CMS Sederhana)
Kamu perlu membuat website untuk menampilkan video-videomu? Dengan CMS (content management system) yang satu ini, khusus didesain untuk membuat website video online, kamu bisa membuatnya dengan sangat mudah. Ikuti petunjuk di tutorial video ini untuk tahu caranya. Dapatkan link download source codenya di sini: https://thirteenov.ciihuy.com/how-to-make-videos-website-with-ciihuy-online-videos-cms/
Bagaimana cara membuat situs online listing dan platform jual beli online
Program yang saya buat ini saya sebut dengan Delicifood, mulanya untuk dijadikan platform jual beli produk makanan dan minuman. Tapi ini sudah dikembangkan sehingga bisa dijadikan platform jual beli produk apa saja dengan sistem yang bisa dikustomisasi. Dengan membuat situs online listing seperti ini kamu bisa mempersilahkan semua orang untuk mendaftar dan menjual produk-produk mereka…
Cara membuat kuis soal pilihan ganda berbasis HTML5
Program yang saya buat ini adalah program kuis pilihan ganda sekaligus generator pembuat soal-soal dan jawabannya. Dapatkan source codenya di blog saya:https://thirteenov.ciihuy.com/how-to-make-your-own-multiple-answers-quiz-with-javascript/
Generator BarCode dan QRCode gratis berbasis JavaScript + Source Code
Ada dua library JavaScript yang saya andalkan untuk meng-generate QRCode dan BarCode, keduanya ini saya gabung jadi satu dalam sebuah aplikasi web. Kamu bisa coba aplikasi web ini untuk membuat qrcode dan barcode secara bersamaan: https://webapps.ciihuy.com/qrbarcodegenerator/ Cara kerjanya sangat sederhana, ada kolom teks yang bisa kamu isi tulisan apapun, atau nomor, atau link/url lalu kamu…
Cara menjalankan program HTML5 berbasis JavaScript sebagai App Android dengan menggunakan WebView
Orang yang kadung hobi dengan coding HTML5 dan JavaScript, begitu berbicara tentang pengembangan aplikasi mobile, pasti kepikiran bagaimana cara membuat app berbasis HTML5 untuk berbagai platform. Nah ini yang sering disebut hybrid app, yaitu membuat app yang coding nya kebanyakan dengan JavaScript saja, sedangkan nantinya web app tersebut di-embed atau dijalankan di komponen WebView yang…
Cara membuat program menulis catatan dengan JavaScript, HTML dan CSS
Untuk kamu yang baru-baru mulai mengenal pemrograman JavaScript dan ingin belajar JavaScript lebih lanjut, nih ada tutorial menarik dan basic yang tentunya mudah untuk kamu ikuti. Tutorial kali ini berkenaan dengan bagaimana cara membuat program menulis catatan atau yang dalam bahasa Inggris disebut Note Taking App. Program menulis catatan ini murni berbasis JavaScript… Jadi codingnya…
Cara membuat player mp3 berbasis HTML5 dengan menggunakan HowlerJS
Siapa yang tak kenal mp3 player? Kita bisa membuat mp3 player online berbasis HTML5. Yang ingin saya share satu ini adalah mp3 player yang bisa memutar file-file mp3 yang ada di server, lengkap dengan UI navigasi seperti seek bar, tombol play, pause, next, previous dan navigasi memilih file mp3 yang akan diputar. Source code mp3…
Cara meng-embed html dalam webView di XCode untuk membuat app iOS
Bagi orang yang sudah terlanjur hobi coding JavaScript dan HTML serta CSS, banyak jalan bagi mereka untuk membuat hybrid app, yaitu membuat app berbasis bahasa web untuk platform-platform Android dan iOS. Prinsipnya sederhana, jadi kita coding dengan JavaScript lalu kita kemas dan tampilkan dalam webView yang ada pada Android maupun iOS (meng-embed aplikasi web tersebut)….
Cara menambahkan efek blur dengan CSS
CSS dan HTML makin hari makin keren, sekarang kamu bisa menambahkan efek blur dengan CSS pada elemen HTML kamu. Misalnya kamu ingin sebuah blok yang tampil lebih menarik dan tidak terlalu membosankan, kamu bisa menambahkan efek blur ini. Cara menambahkan efek blur pada elemen HTML adalah menambahkan efek Backdrop Filter. Contoh cara menambahkan efek blur…
Cara menampilkan gambar dengan lebar yang rata tengah dengan HTML dan CSS
Anggap saja kita ingin menampilkan sebuah gambar pada halaman web. Terkadang masalah yang kita hadapi adalah adanya banyak gambar dengan ukuran berbeda-beda dimensi dan rationya. Jika kita tampilkan dengan cara yang sama, maka terlihat gambar-gambar itu tidak teratur; kasus ini sering terjadi jika kita ingin menampilkan sekumpulan thumbnail yang ukurannya harus sama dan teratur. Solusinya…
Cara membuat elemen HTML yang lebar 100% sempurna tanpa peduli padding dan margin elemen di atasnya
Sering kali kita perlu membuat elemen HTML yanglebarnya 100%. Tapi jika kita begitu saja mengatur width : 100%, problem yang terjadi adalah elemen yang kita inginkan itu lebarnya melebihi apa yang kita inginkan, karena terpengaruh padding dan margin elemen yang mencakupnya. Solusi masalah ini adalah menambahkan kode css box-sizing : border-box pada elemen yang kita…
Cara membuat kolom input HTML yang tidak lancip ujungnya (rounded)
Tren desain selalu berganti-ganti, begitu juga desain UI. Akhir-akhir ini yang lagi ngetrend adalah desain rounded, yaitu desain yang tidak menggunakan sudut-sudut tajam/lancip. Secara default, kalau kita membuat elemen-elemen HTML seperti kolom input data, ujungnya lancip. Supaya tidak lancip, alias supaya rounded, kita bisa menambahkan style pada elemen yang kita kehendaki, kita tambahkan “border-radius” yang…
Cara membuat Tombol Chat Via WhatsApp
Akhir-akhir ini siapa yang tidak mengenal dan menggunakan WhatsApp? Hampir semua orang memakai WA. Begitu pula orang-orang yang jualan online, sekarang rata-rata memakai WhatsApp untuk melayani pembeli. Nah, sekarang bukan lagi jamannya ribet, bikin toko online gak perlu seribet dulu, sekarang orang lebih suka simpel. Di sinilah saya ingin membagikan tutorial bagaimana cara membuat tombol…