logo ilmugrafis
Home Tutorials News Artikel Fonts Download Gallery Kontak
Google Powered Search
 
ilmu grafis » JQUERY

Membuat Cool Clock (Jam Analog)

Publish: 4 Juli 2013 | Author & Copyright: Johan | Status: FREE tutorial jQuery

Mempercantik tampilan website dengan jam analog bukanlah menjadi hal yang rumit karena terdapat plugins jquery bernama CoolClock. Baiklah, bagaimana membuat / menampilkan Cool Clock (jam analog) tersebut di website kita. Berikut langkah - langkahnya :

Download dulu bahan materi dari Tutorial Cool Clock ini di www.randomibis.com/coolclock
Terdapat 3 file yang harus kalian download yaitu : coolclock.js, moreskins.js dan excanvas.js tempatkan di tempat yang sama dengan file website php / html mu.

1. Setelah itu buat file baru di aplikasi dreamweaver / notepad

Berikut ini contoh penggunaannya :

<html>
<head>
<title>CoolClock Demo</title>

<script src="jquery.js"></script>
<script src="excanvas.js"></script>
<script src="coolclock.js"></script>
<script src="moreskins.js"></script>

</head>
<body>

<canvas style="width: 400px; height: 400px;" height="400" width="400" id="_coolclock_auto_id_0" class="CoolClock:chunkySwiss"></canvas>

</body>
</html>

Penjelasan Script :

<script src="jquery.js"></script>
<script src="excanvas.js"></script>
<script src="coolclock.js"></script>
<script src="moreskins.js"></script>
Fungsinya untuk memanggil jquery dari coolclock

<canvas style="width: 400px; height: 400px;" height="400" width="400" id="_coolclock_auto_id_0" class="CoolClock:chunkySwiss"></canvas>
Fungsinya :

#width = mengatur Lebaran dari clock, sedangkan height mengatur ketinggian clock
#id = fungsinya untuk memanggil fungsi jquery coolClock disini chunkySwiss saya beri _coolclock_auto_id_0, jika dalam website nantinya ada 2 atau lebih Clock maka berikan tingkatan id. Contoh : _coolclock_auto_id_1, _coolclock_auto_id_2, dst.
#class = perintah untuk tampilan coolClock yang diinginkan.
Anda bisa mencoba berkreasi dengan class yang lain seperti swissRail, chunkySwiss, chunkySwissOnBlack, fancy, machine, classic, dll. Silahkan dilihat di moreskin.js
Catatan : Perlu diketahui bahwa plugin CoolClock memanfaatkan tag canvas dari HTML5 untuk menampilkan jam analog di browser jadi kurang bagus dan kadang tidak berjalan dengan baik ketika dibuka dengan browser Internet Explorer. Untuk itu kami menyarankan untuk menggunakan browser Chrome, Firefox, atau Opera yang telah mendukung penuh HTML 5.

Preview Screenshot Hasilnya :
coolclock jquery
Untuk melihat tampilan yang sebenarnya dan source codenya,
download now
Silahkan Klik Disini

Demikian cara membuat Cool Clock dengan menggunakan jQuery. Sampai jumpa di tutorial jQuery yang lainnya. Semoga Bermanfaat.

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
android apk IlmuGrafiscom Apk | rss Subscribe ilmuGrafis.com via Email


author

Info dan Kontak Penulis

Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai komputer grafis terutama program photoshop dan coreldraw. Saat ini bekerja sebagai designer grafis di salah satu perusahaan swasta di Surabaya.
Motto : Berikan yang terbaik, untuk mendapatkan yang terbaik!

Penulis dapat dihubungi via:
Twitter: @johanfelisitas
Google+ : johan felisitas
Facebook : facebook.com/tomuramaster
Email : johan.felisitas[at]gmail[dot]com



Rekomendasi Resmi ilmuGrafis
Metode Belajar Cepat dan Mudah dengan Video Tutorial dan Desain Grafis Source
Dipersembahkan oleh ilmuGrafis Store
HTML CSS
Website HTML CSS

Video Tutorial Cara Pembuatan Website dengan HTML Fundamental dan CSS Style
PHP 1
Pemrograman PHP

Video Tutorial Cara Membuat dan Memprogram Website Dinamis dengan PHP
DREAMWEAVER
Webdesain Dreamweaver

CD Tutorial ini berisi tips dan trik desain website dengan Dreamweaver dan Photoshop
joomla premium templateJoomla Template
Joomla Premium Template Koleksi template premium untuk CMS Joomla 1.5 , 2.5 dan 3.0
Flash Animation
FLASH CS4 Animasi

Membahas cara menguasai Adobe Flash CS4 dalam pembuatan animasi dan website
webmaster collection
Webmaster Collection

Webmaster Collection terdapat Ribuan jenis dan type Template Web Professional


ARTsense Dumetschool
Advertisement

Aturan dan Kebijakan di website ilmugrafis

  • Semua Konten di ilmuGrafis.com bertujuan sebagai media pendidikan dan pembelajaran, oleh karena itu dimohon tidak menyalahgunakan informasi dan pengetahuan yang diperoleh untuk hal - hal yang merugikan diri sendiri maupun orang lain
  • Kami melakukan segala upaya untuk memastikan bahwa informasi di ilmuGrafis.com tersaji seakurat dan sebaik mungkin. Anda bisa melaporkan jika ada konten ataupun informasi yang tidak berkenan di Kontak
  • Jika anda ingin memposting ulang atau mengcopy konten yang ada di ilmuGrafis.com maka silahkan membaca terlebih dahulu Terms Of Use

SearchKategori

PHOTOSHOP
Photoshop Dasar
Photoshop Teks Effect
Photoshop Photo Efek
Photoshop Alternatif
Photoshop Plugins

CORELDRAW
CorelDRAW Dasar
CorelDRAW Logo
CorelDRAW Bebas
CorelDRAW Tools

PHOTOGRAPHY
Lightroom

VECTORIZE
Adobe Illustrator

ANIMATION
Flash
Swishmax

3D MODELING
3dsMAX
AutoCAD
Cinema 4D
Maya

VIDEO EDITING
Adobe Premiere
After Effect
Pinnacle

WEB DEVELOPER
Dreamweaver
jQuery
Fireworks

PUBLISHING
Freehand
InDesign
Ms. Paint
Ms. Visio

FREEWARE
Gimp
Inkscape

DESIGN
News
Artikel

PERKAKAS
Fonts
Software
Templates

INSPIRATION
Gallery
Papercraft

EXHIBITION
Liga Grafis
Hall Of Fame

EXTRA
Hiburan
Bursa Kerja
Jasa Grafis
Donasi

Peta Situs Term of Use web edukasi - ilmugrafis.com Indonesia
© 2008 - 2014 ilmuGrafis.com Design and Development by IG Team.
All other trademarks are the property of their respective owners.
kembali ke atas / back to top