Tutorial Membuat Widget Jam Digital Keren dengan JQuery, Java Script dan CSS pada Halaman Web

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgudvGNtNZUE9jZQSzu6mrT4Ivp2byupIglUhCL4SpZwfmLXa9fYRaGIAZcgCxn8KNBbCT6Bx-kxwS_BfKPD1UTR9j9CZGmhWuxsEGr5LRKRSmkrNUL7k_Fsg3sdLasdbqSuUJ5vecSD9uL/s1600/Capture+-+Copy.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgudvGNtNZUE9jZQSzu6mrT4Ivp2byupIglUhCL4SpZwfmLXa9fYRaGIAZcgCxn8KNBbCT6Bx-kxwS_BfKPD1UTR9j9CZGmhWuxsEGr5LRKRSmkrNUL7k_Fsg3sdLasdbqSuUJ5vecSD9uL/s640/Capture+-+Copy.PNG" width="640" /></a></div> <br /> 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).<br /> <br /> 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?<br /> <br /> Disini saya akan memberikan sedikit tutorial tentang membuat suatu Jam Digital Keren dengan menggunakan JQuery dan beberapa Java Script serta CSS untuk memperindah tampilannya.<br /> <br /> Langsung saja untuk pembuatan jam kerennya kita bisa mengguanakan aplikasi text editing seperti <a href="https://notepad-plus-plus.org/download/v7.2.2.html"><b>Notepad++</b></a> atau <a href="https://www.sublimetext.com/3"><b>Sublime Text</b></a>, nah di sini saya menggunakan Sublime Text karena dirasa sangat nyaman dalam penggunaan nya dan pengeditan setiap Source Code nya.<br /> <br /> 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 :<br /> <br /> <b>JamDigital.html</b><script src="//pastebin.com/embed_js/qMEajcde"></script><br /> <br /> <br /> 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 :<br /> <br /> <b>Style.css</b><br /> <script src="//pastebin.com/embed_js/zeMwqNnR"></script> <br /> <br /> <br /> Untuk File Java Script nya dibuat dengan judul "script.js" dan berisikan Source Code seperti di bawah ini :<br /> <br /> <b>script.js</b><br /> <script src="//pastebin.com/embed_js/T8y6xZCq"></script> <br /> <br /> Untuk Desain tampilan Jam Digitalnya menggunakan CSS dengan judul filenya "jquery.Clock.css" dan berisikan Source Code seperti di bawah ini :<br /> <br /> <b>jquery.Clock.css</b><br /> <br /> <script src="//pastebin.com/embed_js/qwb85ky1"></script> <br /> Dan terdapat juga file Java Script untuk jam digitanya dibuat dengan judul "jquery.Clock.js" dan berisikan Source Code seperti di bawah ini :<br /> <b><br /></b> <b>jquery.Clock.js</b><br /> <script src="//pastebin.com/embed_js/zfbutsmc"></script> <b><br /></b> <b><br /></b>Download beberapa file PNG untuk desain tampilan pada jam digitalnya pada link berikut: <u><a href="https://drive.google.com/file/d/0B8dEFFQO8efEcnk2ZUlhTThfTWs/view?usp=sharing">DOWNLOAD</a></u><br /> <br /> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh_oaIK4188zZt13Y0CX3hjz1Uti6g_cbJs-gCZo0FkKSN1HTaRTw619-gqWP_bfTiAKy5rHajGmYv9uKXyz389YVFQucPpRCPUKRnEA3jjjvFvca93RGhR4iY_UMQM7AabhCURnbaqJw2/s1600/zzzz.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh_oaIK4188zZt13Y0CX3hjz1Uti6g_cbJs-gCZo0FkKSN1HTaRTw619-gqWP_bfTiAKy5rHajGmYv9uKXyz389YVFQucPpRCPUKRnEA3jjjvFvca93RGhR4iY_UMQM7AabhCURnbaqJw2/s400/zzzz.PNG" width="400" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> 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 :</div> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhau976V-iEoUvGBN0XO7HXtrBQqhE4JWVxRN2Z3PTwA3QAi7NW4_MymfAbyCNg4PNS8_ZGMfYpo3ukUxTtteZgssMDqAX8pEZGaSNjlpfgLPQIGYMcoCxB94gof4GFrDFw1Z7kYlDjN5g0/s1600/zz.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhau976V-iEoUvGBN0XO7HXtrBQqhE4JWVxRN2Z3PTwA3QAi7NW4_MymfAbyCNg4PNS8_ZGMfYpo3ukUxTtteZgssMDqAX8pEZGaSNjlpfgLPQIGYMcoCxB94gof4GFrDFw1Z7kYlDjN5g0/s400/zz.PNG" width="400" /></a></div> <br /> <br /> <br /> 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<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSzEB8DCL7kNTUIVTI1Wzu7xmAQKNeKE4X6UMy7_sf73HpTPpMW7g-EaT_iKrH1zROSDsNjZr1i80eZhrgZ1x13acW7wn2vW9U2IveN0ysxsuGwQsE91NcG8kNTyCUhU5nzcvKiB9uFkNg/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSzEB8DCL7kNTUIVTI1Wzu7xmAQKNeKE4X6UMy7_sf73HpTPpMW7g-EaT_iKrH1zROSDsNjZr1i80eZhrgZ1x13acW7wn2vW9U2IveN0ysxsuGwQsE91NcG8kNTyCUhU5nzcvKiB9uFkNg/s640/Capture.PNG" width="640" /></a></div> <br /> 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 :)<br /> <br /> Selamat Mencoba dan Berkreasi >.<<br /> <br /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -<br /> <br /> untuk Source Code dapat di unduh pada link berikut : <a href="https://drive.google.com/file/d/0B8dEFFQO8efEUVFuSHpiR3lWRlk/view?usp=sharing">DOWNLOAD</a><br /> <br /> untuk Live Demo Jam Digital Keren nya dapat dilihat link berikut : <a href="http://demojamdigitalkerenjquery.esy.es/" target="_blank">DEMO</a><br /> <b><br /></b> <b><br /></b>

HTML Java Script JQuery Tutorial Membuat Widget Jam Digital Keren dengan JQuery, Java Script dan CSS pada Halaman Web

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 ditambah…

Baca selengkapnya »