Form merupakan salah satu elemen yang umum kita temui pada sebuah website atau blog seperti yang biasa digunakan untuk bagian kotak pencarian, fitur komentar, atau wijet berlangganan artikel via email. Elemen form umum pula digunakan pada halaman login, formulir kontak, serta jajak pendapat atau survei online.
Jika elemen form berbentuk kotak pencarian, maka pengguna akan dengan mudah menelusuri semua informasi yang ada pada halaman website tersebut, cukup dengan mengetikkan kata kunci pada kotak isian yang disediakan.
Jika elemen form berbentuk fitur komentar, maka pengguna akan dapat memberikan tanggapan, pertanyaan, atau pesan apa pun terkait dengan informasi tertentu yang disajikan website bersangkutan.
Elemen form memang digunakan untuk memungkinkan terjadinya interaksi antara website dengan para penggunanya. Melalui elemen ini, website tersebut akan dapat menerima informasi yang dikirimkan pengguna ke server tempat ia berada dengan melibatkan bahasa pemrograman web yang dijalankan di sisi server seperti PHP, ASP, dan JSP.
Tampilkan postingan dengan label css. Tampilkan semua postingan
Tampilkan postingan dengan label css. Tampilkan semua postingan
Cara Memodifikasi Tampilan Modal Twitter Bootstrap 3
Artikel ini merupakan lanjutan dari tulisan saya sebelumnya tentang cara menggunakan komponen modal Twitter Bootstrap 3. Bagi Anda yang belum membacanya, dengan senang hati saya persilakan untuk menyempatkan waktu sejenak menyimak tulisan tersebut.
Selesai membaca, silakan kembali ke artikel ini untuk mengikuti uraian tentang bagaimana memodifikasi tampilan modal dari salah satu front-end framework yang sedang populer ini, serta dapatkan ucapan terima kasih dari hati saya yang paling dalam. :)
Saya akan mengawali uraian mengenai cara memodifikasi modal Bootstrap 3 ini dengan membuat sebuah file CSS dengan nama "custom.css". Selanjutnnya, simpan file tersebut pada berkas mybootstrap/css.
Kita akan menggunakan file custom.css ini untuk mendefinisikan properti-properti CSS yang akan menimpa properti-properti pada file bootstrap.min.css yang bertanggung jawab dalam mengatur tampilan modal.
Kita sebenarnya dapat menambahkan langsung properti-properti ini ke file bootstrap.min.css. Namun dengan memisahkannya pada file berbeda akan memudahkan kita ketika akan memberikan suntingan-suntingan lain, tanpa harus "merusak" file CSS bawaan Bootstrap tersebut.
Selain itu, kita pun dapat dengan mudah mengembalikan tampilan modal ke wajah aslinya, cukup dengan menghapus isi dari atau file custom.css itu sendiri.
Selesai membaca, silakan kembali ke artikel ini untuk mengikuti uraian tentang bagaimana memodifikasi tampilan modal dari salah satu front-end framework yang sedang populer ini, serta dapatkan ucapan terima kasih dari hati saya yang paling dalam. :)
Saya akan mengawali uraian mengenai cara memodifikasi modal Bootstrap 3 ini dengan membuat sebuah file CSS dengan nama "custom.css". Selanjutnnya, simpan file tersebut pada berkas mybootstrap/css.
Kita akan menggunakan file custom.css ini untuk mendefinisikan properti-properti CSS yang akan menimpa properti-properti pada file bootstrap.min.css yang bertanggung jawab dalam mengatur tampilan modal.
Kita sebenarnya dapat menambahkan langsung properti-properti ini ke file bootstrap.min.css. Namun dengan memisahkannya pada file berbeda akan memudahkan kita ketika akan memberikan suntingan-suntingan lain, tanpa harus "merusak" file CSS bawaan Bootstrap tersebut.
Selain itu, kita pun dapat dengan mudah mengembalikan tampilan modal ke wajah aslinya, cukup dengan menghapus isi dari atau file custom.css itu sendiri.
Cara Menggunakan Modal Twitter Bootstrap 3
Twitter Bootstrap dapat dikatakan sebagai framework CSS yang paling populer dan banyak digunakan saat ini. Kehadirannya bukan hanya memanjakan para desainer, tapi juga meringankan pekerjaan para pengembang web (web developer) dalam membuat rancangan awal proyek yang akan disodorkan kepada klien mereka.
Sebutan framework CSS bagi Twitter Bootstrap mungkin kurang tepat, karena selain dilengkapi komponen-komponen CSS, ia dilengkapi pula dengan komponen-komponen Javascript seperti carousel, popover, dan modal.
Melalui artikel ini, saya akan menjelaskan secara sekilas bagaimana menggunakan komponen Javascript Twitter Bootstrap (versi 3.1.1) yang disebut terakhir; modal.
Sebutan framework CSS bagi Twitter Bootstrap mungkin kurang tepat, karena selain dilengkapi komponen-komponen CSS, ia dilengkapi pula dengan komponen-komponen Javascript seperti carousel, popover, dan modal.
Melalui artikel ini, saya akan menjelaskan secara sekilas bagaimana menggunakan komponen Javascript Twitter Bootstrap (versi 3.1.1) yang disebut terakhir; modal.
HTML dan CSS: Dua Teknologi yang Wajib Diakrabi Calon Desainer Web
Dibandingkan dengan teknologi-teknologi lain yang ada di belakang web (baca: www, World Wide Web), HTML dan CSS mungkin yang paling mudah dipelajari. HTML bukanlah bahasa pemrograman seperti halnya PHP, JSP, atau Javascript, tetapi ia merupakan bahasa tanda (Hypertext markup language) yang digunakan untuk membuat struktur dokumen web itu sendiri.
Apabila HTML berurusan dengan apa yang akan ingin kita tampilkan pada sebuah halaman web, CSS (kependekan dari Cascading Style Sheet) berurusan dengan bagaimana halaman web tersebut akan dipresentasikan.
Jika diibaratkan dengan surat kabar, HTML digunakan untuk menyusun berita, artikel, serta fitur-fitur lain (seperti banner iklan), CSS digunakan untuk mengatur tata-letak isi surat kabar bersangkutan. Yang pertama adalah tugas redaktur, ada pun yang kedua jatah para layouter.
Apabila HTML berurusan dengan apa yang akan ingin kita tampilkan pada sebuah halaman web, CSS (kependekan dari Cascading Style Sheet) berurusan dengan bagaimana halaman web tersebut akan dipresentasikan.
Jika diibaratkan dengan surat kabar, HTML digunakan untuk menyusun berita, artikel, serta fitur-fitur lain (seperti banner iklan), CSS digunakan untuk mengatur tata-letak isi surat kabar bersangkutan. Yang pertama adalah tugas redaktur, ada pun yang kedua jatah para layouter.
Menjadi Desainer Web "Dadakan" dengan Twitter Bootstrap
Twitter Bootstrap merupakan salah satu framework populer saat ini yang banyak digunakan untuk mendesain tampilan antar muka (interface) aplikasi-aplikasi berbasis web atau mobile, termasuk untuk mempercantik halaman blog, dengan model desain responsif. Dengan model desain responsif ini, kita dapat membuat aplikasi yang tampilannya dapat mengikuti ukuran device yang digunakan.
Puluhan komponen CSS dan jQuery (seperti: breadcrumb, progress bar, carousel, dropdown menu, dan modal) yang disertakan pada paket framework ini benar-benar memanjakan siapa pun yang ingin membuat atau menyunting sisi tampilan aplikasinya dengan desain modern dan elegan. Tidak salah jika dikatakan bahwa kehadiran Twitter Bootstrap ini membuat setiap orang menjadi desainer web "dadakan". :)
Selain mudah digunakan, dokumentasi framework yang dibuat menggunakan HTML, CSS, SASS, LESS, dan Javascript ini terbilang cukup lengkap. Contoh-contoh yang disajikan pun mudah diikuti, bahkan bisa di-salin-tempel untuk langsung digunakan pada proyek-proyek yang sedang kita kerjakan.
Puluhan komponen CSS dan jQuery (seperti: breadcrumb, progress bar, carousel, dropdown menu, dan modal) yang disertakan pada paket framework ini benar-benar memanjakan siapa pun yang ingin membuat atau menyunting sisi tampilan aplikasinya dengan desain modern dan elegan. Tidak salah jika dikatakan bahwa kehadiran Twitter Bootstrap ini membuat setiap orang menjadi desainer web "dadakan". :)
Selain mudah digunakan, dokumentasi framework yang dibuat menggunakan HTML, CSS, SASS, LESS, dan Javascript ini terbilang cukup lengkap. Contoh-contoh yang disajikan pun mudah diikuti, bahkan bisa di-salin-tempel untuk langsung digunakan pada proyek-proyek yang sedang kita kerjakan.
Mendesain Templat Wordpress lebih Cepat dengan WP Framework
Posted by
Yuda
17 April 2014
Labels:
css
,
html
,
html5blank
,
javascript
,
twitter bootstrap
,
wordpress
Saat ini, para pembuat (desainer) templat Wordpress semakin dipermudah dengan bermunculannya berbagai framework Wordpress yang umumnya berlisensi MIT. Dengan lisensi ini, framework-framework tersebut dapat dimodifikasi, didistribusikan, dan bahkan dijual tanpa perlu khawatir akan pelanggaran hak cipta, selama pernyataan lisensi tersebut disertakan.
Berbeda dengan templat yang sudah jadi, yang biasa kita unduh dari situs-situs penyedia templat gratis atau berbayar, framework-framework ini umumnya dirilis dengan tampilan minimal, dalam arti tidak begitu wah jika diperhatikan dari sisi desainnya, karena memang tujuan awal pembuatannya adalah menyediakan kerangka acuan saja. Adapun untuk sisi desainnya, diserahkan sebebas-bebasnya kepada kita yang akan memermak atau bahkan "menghancurkannya". :)
Salah satu framework templat Wordpress yang saya sukai dan sering gunakan adalah HTML5Blank, buah karya Todd Motto. Sesuai nama yang diberikan si pembuatnya, HTML5Blank menggunakan tipe dokumen (document type) HTML 5, tidak jauh berbeda dengan Twenty Fourteen, templat bawaan Wordpress seperti disebutkan sebelumnya.
Berbeda dengan templat yang sudah jadi, yang biasa kita unduh dari situs-situs penyedia templat gratis atau berbayar, framework-framework ini umumnya dirilis dengan tampilan minimal, dalam arti tidak begitu wah jika diperhatikan dari sisi desainnya, karena memang tujuan awal pembuatannya adalah menyediakan kerangka acuan saja. Adapun untuk sisi desainnya, diserahkan sebebas-bebasnya kepada kita yang akan memermak atau bahkan "menghancurkannya". :)
Salah satu framework templat Wordpress yang saya sukai dan sering gunakan adalah HTML5Blank, buah karya Todd Motto. Sesuai nama yang diberikan si pembuatnya, HTML5Blank menggunakan tipe dokumen (document type) HTML 5, tidak jauh berbeda dengan Twenty Fourteen, templat bawaan Wordpress seperti disebutkan sebelumnya.