Dalam merancang dan mendesain suatu halaman web tentu saja kita ingin membuat tampilan pada halaman web yang dibuat menjadi lebih menarik dan enak dipandang serta tentu saja mudah digunakan (user friendly).
Salah satu yang sangat umum untuk ditambahkan dalam suatu halaman web adalah dengan adanya fitur penunjuk waktu berupa jam digital maupun jam analog. Banyak cara yang dapat digunakan untuk menambahkan fitur jam dalam halaman web kita, namun apakah sudah memiliki tampilan yang menarik dan memiliki kesan yang berbeda?
Disini saya akan memberikan sedikit tutorial tentang membuat suatu Jam Digital Keren dengan menggunakan JQuery dan beberapa Java Script serta CSS untuk memperindah tampilannya.
Langsung saja untuk pembuatan jam kerennya kita bisa mengguanakan aplikasi text editing seperti Notepad++ atau Sublime Text, nah di sini saya menggunakan Sublime Text karena dirasa sangat nyaman dalam penggunaan nya dan pengeditan setiap Source Code nya.
Setelah aplikasi text editingnya dibuka, pertama-tama kita akan membuat file HTML nya dengan judul "JamDigital.html" dan untuk Source Code nya seperti di bawah ini :
JamDigital.html
Setelah menyimpan file HTML JamDigital.html, selanjutnya kita akan membuat file CSS nya dengan judul "Style.css" untuk memperindah tampilan dan desain antarmuka halaman web nya dengan Source Code seperti di bawah ini :
Style.css
Untuk File Java Script nya dibuat dengan judul "script.js" dan berisikan Source Code seperti di bawah ini :
script.js
Untuk Desain tampilan Jam Digitalnya menggunakan CSS dengan judul filenya "jquery.Clock.css" dan berisikan Source Code seperti di bawah ini :
jquery.Clock.css
Dan terdapat juga file Java Script untuk jam digitanya dibuat dengan judul "jquery.Clock.js" dan berisikan Source Code seperti di bawah ini :
jquery.Clock.js
Download beberapa file PNG untuk desain tampilan pada jam digitalnya pada link berikut: DOWNLOAD
Setelah semua file HTML, Java Script dan CSS telah kita buat, letakkan lah semua file tersebut ke delam satu folder yang sama, dan ekstrak hasil Download file IMG.rar yang berisikan file PNG di dalam nya dan susun seperti gambar di bawah ini :
lalu jalankanlah atau buka file "JamDigital.html" maka akan tampil browser yang menampilkan Jam Digital keren yang telah dibuat sebelumnya seperti gambar di bawah ini
Demikian lah Tutorial singkat dan Sederhana tentang membuat suatu Widget Jam Digital Keren menggunakan JQuery, Java Script dan CSS, semoga dapat bermanfaat dan membantu teman-teman untuk memperindah desain dari halaman web nya :)
Selamat Mencoba dan Berkreasi >.<
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
untuk Source Code dapat di unduh pada link berikut : DOWNLOAD
untuk Live Demo Jam Digital Keren nya dapat dilihat link berikut : DEMO
Posting Komentar