Pembahasan kali ini ingin sedikit membahas CSS, Kali ini kita akan coba membuat membuat sebuah popup atau modals (jika menggunakan bootstrap). Untuk membuat popup saya hanya menggunakan CSS biasa tanpa memakai framework CSS seperti bootstrap dan lain-lain. Kode ini bisa di terapkan pada blogspot ataupun wordpress. KODE Pertama buat file baru dengan nama index.html
Kedua, buat file baru dengan nama popup.css .
Demo Mungkin cukup sekian dulu untuk pembahasan kali ini. Mohon maaf jika banyak salah dalam penyampaian materi-nya hehehe :D Pada artikel sebelumnya saya sudah menjelaskan cara menampilkan file hidden .htaccess di cpanel. Lain cerita dengan artikel sebelumnya, pada artikel kali ini yang saya akan coba bahas adalah cara membuat modal pop up about keren dengan css animasi dan js. Bicara tentang about, yang dimana kita telah ketahui jika diartikan kedalam bahasa indonesia yaitu "Tentang" atau bisa juga berupa sebuah informasi mengenai seseorang ataupun tentang website itu sendiri. Kenapa harus ada about? Karena peran about ini sangatlah penting didalam sebuah website, blog dan lain-lain. Gunanya untuk memudahkan para pengunjung, dikala mereka ingin tahu siapakah dan apa tujuan dari website ini yang sebenarnya. Bagaimana menurut kalian, sudah pahamkan arti dari about? Kalau sudah mari kita lanjutkan kepembahasan intinya. Modal box about yang akan kita bahas kali ini yaitu menggunakan bantuan CSS dan disini saya sedikit mencampurnya dengan taburan JAVASCRIPT ditambah dengan animasi, agar terlihat bagus dan mempesona. Bagaimana Cara Membuatnya? Oke tanpa berlama-lama lagi langsung saja kita praktekan saat ini juga. Langkah yang pertama yaitu, buatlah sebuah file style.css lalu salin kode css berikut:
Langkah selanjutnya adalah, kalian buat file html nya dan salin kode berikut ini:
Kalau sudah selesai, lanjut dengan membuat file javascript. contoh: modal.js lalu salin kode dibawah dan tempel di dalam modal.js tersebut:
Jika kalian sudah selesai membuat semua file nya dengan mengikuti langkah-langkah yang telah saya jelaskan diatas, waktunya kalian akses dan lihat hasilnya. Apakah berkerja atau tidak! Apabila terjadi eror atau kesalahan, mungkin kalian tidak sepenuhnya mengikuti langkah diatas ataupun ada kode yang terhapus atau bisa juga kurang. Karena kode-kode tersebut sudah saya coba sebelum saya postingkan dan hasilnya work. Adapun saya lampirkan untuk live demonya, agar kalian dapat melihatnya dengan langsung: Live Demo Explore dengan cara kalian masing-masing dan edit sebaik mungkin, agar terlihat lebih elegan dan menarik. Mungkin saya rasa cukup untuk pembahasan kali ini, apabila ada pertanyaan silahkan tinggalkan komentar kalian. Itulah modal popup keren. Mudah-mudahan artikel ini bermanfaat dan menambah pengetahuan kalian. Akhir kata saya ucapkan terimakasih dan sampai bertemu kembali pada artikel selanjutnya. |