Parallax Scrolling Tutorial menggunakan CSS

Seperti yang anda ketahui, Parallax adalah efek visual dimana posisi objek pada website terlihat berbeda ketika kita melihat dari posisi yang berbeda. Parallax Scrolling membuat ilusi 2 objek yang saling berhadapan, tetapi bergerak dengan kecepatan yang berbeda. Efek ini dapat kita lihat dalam kehidupan sehari-hari , seperti saat kita melihat suatu benda yang dekat bergerak jauh lebih cepat daripada benda yang jauh, saat mengendarai mobil, kita dapat melihat pohon-pohon terlewati dengan cepat. Efek ini adalah gerak parallax. Read more

Cara Membuat Sticky Navigasi dengan CSS atau jQuery

Dalam web modern, banyak website menggunakan “Sticky” sebagai fitur yang diletakan di navigasi utama atau menu. Hal ini membuat stik navigasi utama dan tetap dapat terlihat oleh pengguna ketika menggulung (scroll) halaman kebawah sehingga membuatnya lebih mudah diakses. Read more

Membuat Tombol dengan Progres Button

Progress bar telah menjadi sangat populer akhir-akhir ini, dan ada banyak plugin yang dapat membantu Anda menambahkannya ke situs Anda. Tapi bagaimana jika membuat sendiri? Masalahnya adalah bahwa ada banyak penerapannya sudah ada, jadi dalam tutorial ini, kita akan membuat kode dengan sesuatu yang berbeda yaitu tombol yang telah dibangun dalam progres meter. Read more

Cara Termudah Membuat Responsive Headers

Dalam membuat header responsive dan cantik selalu membutuhkan proses yang rumit. Sampai sekarang kita perlu menggunakan float atau trik rumit lainnya bahkan kita harus menyesuaikan nilai-nilai pixel secara manual. Tapi sekarang tidak lagi! Read more

Shortcuts di Web Aplikasimu

Shorcuts adalah cara cepat untuk melakukan aksi dengan cara hanya menekan tombol-tombol kombinasi didalam aplikasi-aplikasi desktop seperti code editor, Photoshop atau pun pada aplikasi-aplikasi dekstop lainnya. Lalu apakah mungkin ini dapat dilakukan pada Web aplikasi kita, dimana dalam menjalankan web aplikasi itu sendiri kita harus menggunakan aplikasi dekstop berupa browser (IE, Mozila, Chrome, Safira, Opera). Itu sangat mungkin dilakukan, dalam artikel ini kita akan mencoba membuat shortcut pada aplikasi web dengan bantuan Mousetrap.js. Read more

Image Slider Responsive dengan Jquery & CSS3

Dalam kesempatan ini kita akan mencoba membuat image slider yang responsive dari Impressionist UI. Kita akan membuatnya dengan menggunakan plugin FlexSlider sebagai fungsi-fungsi javascriptnya dan CSS3 sebagai stylenya. Semoga artikel ini dapat menambah wawasan dan sebagai referensi kita. Read more

Sistem Grid (Bootstrap 4)

Sistem Grid memungkinkan kita untuk mengatur konten web secara benar. Membagi layar menjadi beberapa baris dan kolom adalah cara terbaik untuk membuat berbagai layar untuk setiap jenis website.

Sistem grid pada bootstrap mempunyai pembagian kolom hingga 12 pada setiap baris. Setiap lebar baris bervariasi sesuai dengan ukuran layar yang ditampilkan. Grid bootstrap responsive dan setiap baris akan menjadi baris baru pada breakpoint tertentu atau dapat ditampilkan secara rapih di area pandang yang berbeda. Read more

Bootstrap 4 Flexbox

CSS3 Flexible Box, atau Flexbox adalah sebuah mode layout baru yang berfungsi untuk meningkatkan penataan item pada suatu page yang juga dapat mengatur posisi dan keteraturan pada suatu container untuk mengakomodasi ukuran layout yang berbeda serta layout dengan device yang berbeda. Flexbox memiliki rule seperti model kotak yang memodifikasi lebar atau tinggi dari child item yang tersedia tanpa menggunakan floats.

Kebanyakan dari desainer dan developer menggunakan layout flexbox untuk dapat mengatur posisi elemen dengan mudah pada ukuran layout yang berberda dengan hanya menggunakan sedikit script. Ini dapat menghemat waktu dalam proses mendevelop.

Kabar gembira nya buat teman-teman yang telah terbiasa dengan flexbox, kini bootstrap 4 telah support dengan flexbox. Dalam tutorial ini, kita akan mencoba menerangkan bagaimana menggunakan bootstrap 4 dan cara mengaktifkan flexbox pada komponen grid di dalam bootstrap. Internet Explorer 9 tidak mendukung Flexbox, tetapi itu dapat ditambahkan pada bootstrap 4. Kamu hanya tinggal memasukan file _variable.scss yang terdapat pada folder scss.

Mengaktifkan Flexbox melalui _variables.scss

 Dengan menggunakan core file Sass di dalam paket Bootstrap 4, perhatikan variabel $enable-flex pada file _variables.scss. Secara default, variabel tersebut di set pada nilai false, jika Anda ubah menjadi true dan kemudian recompile, maka semua komponen grid akan beralih ke Flexbox dan Anda tidak membutuhkan penyesuaian pada sintaks HTML.

Mari kita coba sekarang. Disini kita akan menggunakan npm dan Grunt.js untuk recompile bootstrap.min.css, tetapi terserah pada Anda jika Anda memungkinkan menggunakan tools Sass compiler lainnya. Set variabel $enabeld-flex menjadi true dengan menggunakan command grunt sass (plugin grunt-contrib-sass) dalam terminal atau command prompt.

true-set

install-grunt-sass

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <h3>Item 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-lg-3">
            <h3>Item 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-lg-3">
            <h3>Item 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        </div>
        <div class="col-lg-3">
            <h3>Item 4</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
                <div class="col-lg-3">
            <h3>Item 5</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        </div>
        <div class="col-lg-3">
            <h3>Item 6</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-lg-3">
            <h3>Item 7</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        </div>
        <div class="col-lg-3">
            <h3>Item 8</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        
    </div>
</div>
Secara default, Anda akan mendapatkan tampilan seperti gambar berikut :
not-flex

Ketika kita mengaktifkan Flexbox, maka itu akan secara otomatis mengkonversi masing-masing kolom ke dalam flex item yang sesuai dengan tinggi kolom. Seluruh sistem grid (mixins dan class-class yang telah di buat), beralih dari floats menjadi display: flex;

Perhatikan gambar berikut :

flex-start

Adjusting Flexbox Layout

Dengan menggunakan properti flex-direction, kita dapat menentukan bagaimana item flex akan di tampilkan dalam container flexbox dengan mensetting direction axis pada container flex. Terdapat 2 direction yang dapat kita gunakan.

  1. Row – menampilkan item flex secara horizontal.
  2. Column – menampilkan item flex secara vertikal.

Perhatikan CSS dibawah ini, maka kita dapat menampilkan setiap item flexbox dari kiri ke kanan menempel disamping satu sama lain.

.row {
  -webkit-flex-direction: row;  /* Safari */
  flex-direction:  row;
}
Kita juga dapat menampilkan masing item dari kanan ke kiri, menempel di samping satu sama lain dengan menggunakan row-reverse. Perhatikan contoh di bawah ini.
.row {
  -webkit-flex-direction: row;  /* Safari */
  flex-direction:  row-reverse;
}
flex-reverse

Dengan menggunakan column kita dapat mengatur direction item flex menumpuk dalam kolom dari atas ke bawah.

.row {
  -webkit-flex-direction: row;  /* Safari */
  flex-direction:  column;
}
flex-column
Selain itu Anda juga dapat mengatur direction item flex dari bawah ke atas dengan menggunakan column-reverse.
.row {
  -webkit-flex-direction: row;  /* Safari */
  flex-direction:  column-reverse;
}
flex-column-reverse
Anda juga dapat mengontrol bagaimana setiap item flexbox muncul di dalam container dengan menggunakan properti order menggunakan nilai integer.
Nilai negatif integer akan menempatkan item di sudut kiri container, sedangkan saat memberikan nilai integer positif akan maka akan menempatkan item ke sudut kanan. Nilai default adalah 0.
Dengan menggunakan HTML yang sama seperti yang kita buat diatas, tambahkan class item-* bersama dengan class col-lg-* untuk masing-masing kolom.
<div class="container">
    <div class="row">
        <div class="col-lg-3 item-1">
            <h3>Item 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-lg-3 item-2">
            <h3>Item 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-lg-3 item-3">
            <h3>Item 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        </div>
        <div class="col-lg-3 item-4">
            <h3>Item 4</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
                <div class="col-lg-3 item-5">
            <h3>Item 5</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        </div>
        <div class="col-lg-3 item-6">
            <h3>Item 6</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-lg-3 item-7">
            <h3>Item 7</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        </div>
        <div class="col-lg-3 item-8">
            <h3>Item 8</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        
    </div>
</div>
 Sekarang mari kita coba membuat item 1, 2, 3 tampil dalam urutan 3, 2, 1 dan item 6, 7, 8 menjadi urutan 7, 8, 6 dengan menggunakan properti order.
.item-1{
    order: -1;
}
.item-2{
    order: 0;
}
.item-3{
    order: -2;
}
.item-6{
    order: 2;
}
.item-7{
    order: 0;
}
.item-8{
    order: 1;
}
flex-order

Adjust Flex Item Alignment

Kita juga dapat meluruskan item flex sepanjang axis utama pada container flex dengan menggunakan properti justify-content.

Ada 3 value yang dapat kita gunakan :

  1. flex-startb – meluruskan item flex ke sisi kiri pada container flex.
  2. flex-end – meluruskan item flex ke sisi kanan pada container flex.
  3. center – meluruskan item flex ke tengah pada container flex.
.row {
  -webkit-justify-content: flex-start; /* Safari */
  justify-content:   flex-start;
}
.row {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content:   flex-end;
}
.row {
  -webkit-justify-content: center; /* Safari */
  justify-content:   center;
}
flex-items
flex-end
flex-center

Terbaru pada Bootstrap 4 ?

Semua orang sangat menyukai Bootstrap, itu yang membuatnya menjadi salah satu CSS framework terpopuler saat ini, designer dan programer web sangat antusias ketika Mark Otto dan Jacob Thornton mengembangkannya ke versi berikutnya, Bootstrap 4.

Pada tanggal 19 Agustus, Bootstrap 4 alpha telah di rilis dengan menghapus dukungan untuk IE8. Tentunya masih akan ada beberapa versi alpha sebelum akhirnya menjadi versi beta, tetapi ini cukup memberikan gambaran sekilas tentang apa yang dapat di kembangkan pada versi berikutnya.

Perkembangan Boostrap terbilang sangat cepat. Jika Anda masih ingat pada Bootstrap 1.0, dimana hanya ada sejumlah kecil fitur yang sangat terbatas pada grid, typography dan lists, dan belum menginjak pada Bootstrap 2.0, CSS framework ini telah menjadi framework responsive sepenuhnya.

Bootstrap 3.0 hadir dengan desain flat dan banyak fitur-fitur baru serta perbaikan pada beberapa bug yang ada. Sekarang pada Bootstrap 4, lebih banyak lagi fitur-fitur baru yang di tampilkan, dan tidak mendukung browser-browser yang jadul.

Berikut beberapa perubahan besar pada fitur-fitur  yang di lakukan pada Bootstrap 4.

Dari Less ke Sass

Salah satu perubahan terbesar pada Bootstrap 4 alpha adalah perubahan Less menjadi Sass. Bootstrap 3 menggunakan Less di awal rilisnya, meskipun pada versi perbaikannya telah menggunakan Sass. Alasan perubahan ini adalah bahwa Sass memiliki komunitas pengguna lebih besar serta memiliki kompilasi yang lebih cepat.

New Sass Customization Options

2

Pada Bootstrap 4 alpha semua pilihan variabel untuk transisi, gradien dll dipindahkan pada satu file dan dapat disesuaikan ke dalam variabel Sass.

Peningkatan pada Grid System

Pada Bootstrap 3 ada beberapa class class khusus untuk menargetkan sebuah elemen, yaitu pada ukuran layar yang berbeda dalam pixel. Tetapi pada Bootstrap 4 alpha, memiliki class -sm yang lebih kecil khusus untuk device mobile. Berikut gambar yang dapat membandingkan perbedaan-perbedaan yang ada.

8 (1)

 Tidak Support untuk IE8

Bootstrap 4 alpha telah menghapus dukungan pada IE 8. Salah satu masalah terbesar pada IE8 adalah ketidak cocokan dengan CSS media queries, padahal itu justru yang memainkan peran sangat penting dalam menerapkan desain responsive pada framework.

Ini lah yang membuat pusing para developer ketika di hadapkan keharusan untuk membuat situs yang harus bekerja sempurna pada browser lama. Maka jika anda membutuhkan dukungan pada IE8, maka tetaplah menggunakan Boostrap 3.

Menghapus Glyphicons Font

Bootstrap 3 hadir dengan lebih dari selusin komponen glyphicons yang dapat digunakan untuk tujuan yang berbeda. Namun tidak ada pernyataan yang jelas tentang hal ini pada versi ini.

Support untuk Opt pada Flexbox

Flexbox pada dasarnya adalah layout fleksible yang simpel pada CSS.  Ini memberikan keselarasan konten dalam elemen induk vertikal dengan kolom tinggi pada layout grid-based. Anda dapat mempelajari lebih lanjut tentang flexbox pada situsnya.

Ada beberapa langkah untuk mengaktifkan Flexbox mode pada Bootstrap 4 alpha.

  • Buka file scss dan cari variabel $enable-flex.
  • Ubah nilai nya dari false menjadi true.
  • Recompile dan semua komponen grid akan masuk kedalam Flexbox mode.

 

Komponen Cards

Cards merupakan komponen baru pada Bootstrap 4 alpha yang dapat digunakan untuk menampilkan informasi sebagai page atau  container. Ini telah menggantikan fitur wells, panels dan thumbnails. Mendukung berbagai jenis konten seperti link, teksm gambar, header, footer dan banyak lagi dengan berbagai warna background.

5-e1441177195135

Dari Normalize.css ke Reboot.css

Jika Anda telah menggunakan Bootstrap 3, Anda akan melihat bahwa itu menggunakan Normalize.css sebagai CSS reset sedangkan pada Bootstrap 4 alpha menggunakan file Reboot.css.

Perbaikan pada Auto-Placement of Tooltips dan Popovers

Tooltips dan popovers banyak membantu developer ketika hadir dengan kemudahan. Berkat Tether, third party library itu telah meningkat.

Jika Anda ingin menggunakannya, Anda dapat menambahkan tether.min.js sebelum bootstrap.js

Peningkatan Media Queries

Pada bootstrap 3, media queries menggunakan pixel untuk mengontrol layout responsive. Pada bootstrap 4 alpha itu telah diganti ke em.

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }
// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }
// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }
// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

Class baru ‘Inverse’ untuk tables

Bootstrap 4 alpha memiliki class baru dengan prefix -inverse yang dapat memberikan sebuah background tabel itu sendiri.

<table class="table table-inverse">

<thead>
<tr>
<th>Label 1</th>
<th>Label 2</th>
<th>Label 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
</tbody>

Untuk memaksimalkan kekuatan Bootstrap 4 alpha, setiap Plugin telah rewritten di ES6 yang kini hadir dengan dukungan UMD, metode dan banyak lagi.

Cara Membuat Jam Digital dengan Jquery dan CSS

Dalam membuat jam digital kita membutuhkan 3 file yaitu halaman html sebagai page index, file CSS untuk mengatur tampilan dan java script untuk mengatur jamnya. Oh ya ada 2 file tambahan sebagai plugin yaitu jquery dan moment. Tanpa berlama-lama  kita mulai dengan halaman baru di text editor kita beri nama index.html kemudian masukan script berikut:

<!DOCTYPE html>
<html>
   <head>
      <title>
         Tutorial: Membuat Jam Digital dengan Jquery dan CSS
      </title>
      <!--memanggil file css -->
      <link href="css/style.css" rel="stylesheet" />
   </head>
   <body>
      <div id="clock" class="light">
         <div class="display">
            <div class="weekdays"></div>
            <div class="ampm"></div>
            <div class="alarm"></div>
            <div class="digits"></div>
         </div>
      </div>
   <!-- memanggil javascript -->
   <script src="js/jquery.min.js"></script>
   <script src="js/moment.min.js"></script>
   <script src="js/script.js"></script>
   </body>
</html>

Kemudian kita buat file CSS yang akan membantu kita dalam mempercantik tampilanya. Sebelumnya buatlah folder css masukan file ini kedalam folder tersebut tujuannya agar terlihat rapih. Berikut ini adalah script CSS nya :

*{
 margin:0;
 padding:0;
}
html{
 background:url('./img/bg.jpg') #dbe4e6;
 overflow:hidden;
}
body{
 font:15px/1.3 Arial, sans-serif;
 color: #4f4f4f;
 z-index:1;
}
a, a:visited {
 outline:none;
 color:#389dc1;
}
a:hover{
 text-decoration:none;
}
section, footer, header, aside{
 display: block;
}
#clock{
 width:370px;
 padding:40px;
 margin:200px auto 60px;
 position:relative;
}
#clock:after{
 content:'';
 position:absolute;
 width:400px;
 height:20px;
 border-radius:100%;
 left:50%;
 margin-left:-200px;
 bottom:2px;
 z-index:-1;
}
#clock .display{
 text-align:center;
 padding: 40px 20px 20px;
 border-radius:6px;
 position:relative;
 height: 54px;
}
#clock.light{
 background-color:#272e38;
 color:#272e38;
}
#clock.light:after{
 box-shadow:0 4px 10px rgba(0,0,0,0.15);
}
#clock.light .digits div span{
 background-color:#272e38;
 border-color:#272e38; 
}
#clock.light .digits div.dots:before,
#clock.light .digits div.dots:after{
 background-color:#272e38;
}
#clock.light .alarm{
 background:url('./img/alarm_light.jpg');
}
#clock.light .display{
 background-color:#B0E0E6;
 box-shadow:0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa;
}
#clock .digits div{
 text-align:left;
 position:relative;
 width: 28px;
 height:50px;
 display:inline-block;
 margin:0 4px;
}
#clock .digits div span{
 opacity:0;
 position:absolute;
 -webkit-transition:0.25s;
 -moz-transition:0.25s;
 transition:0.25s;
}
#clock .digits div span:before,
#clock .digits div span:after{
 content:'';
 position:absolute;
 width:0;
 height:0;
 border:5px solid transparent;
}
#clock .digits .d1{ height:5px;width:16px;top:0;left:6px;}
#clock .digits .d1:before{ border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;}
#clock .digits .d1:after{ border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;}
#clock .digits .d2{ height:5px;width:16px;top:24px;left:6px;}
#clock .digits .d2:before{ border-width:3px 4px 2px;border-right-color:inherit;left:-8px;}
#clock .digits .d2:after{ border-width:3px 4px 2px;border-left-color:inherit;right:-8px;}
#clock .digits .d3{ height:5px;width:16px;top:48px;left:6px;}
#clock .digits .d3:before{ border-width:5px 5px 0 0;border-right-color:inherit;left:-5px;}
#clock .digits .d3:after{ border-width:5px 0 0 5px;border-left-color:inherit;right:-5px;}
#clock .digits .d4{ width:5px;height:14px;top:7px;left:0;}
#clock .digits .d4:before{ border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}
#clock .digits .d4:after{ border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}
#clock .digits .d5{ width:5px;height:14px;top:7px;right:0;}
#clock .digits .d5:before{ border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}
#clock .digits .d5:after{ border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}
#clock .digits .d6{ width:5px;height:14px;top:32px;left:0;}
#clock .digits .d6:before{ border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}
#clock .digits .d6:after{ border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}
#clock .digits .d7{ width:5px;height:14px;top:32px;right:0;}
#clock .digits .d7:before{ border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}
#clock .digits .d7:after{ border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}
/* 1 */
#clock .digits div.one .d5,
#clock .digits div.one .d7{
 opacity:1;
}
/* 2 */
#clock .digits div.two .d1,
#clock .digits div.two .d5,
#clock .digits div.two .d2,
#clock .digits div.two .d6,
#clock .digits div.two .d3{
 opacity:1;
}
/* 3 */
#clock .digits div.three .d1,
#clock .digits div.three .d5,
#clock .digits div.three .d2,
#clock .digits div.three .d7,
#clock .digits div.three .d3{
 opacity:1;
}
/* 4 */
#clock .digits div.four .d5,
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d7{
 opacity:1;
}
/* 5 */
#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d4,
#clock .digits div.five .d3,
#clock .digits div.five .d7{
 opacity:1;
}
/* 6 */
#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d4,
#clock .digits div.six .d3,
#clock .digits div.six .d6,
#clock .digits div.six .d7{
 opacity:1;
}
/* 7 */
#clock .digits div.seven .d1,
#clock .digits div.seven .d5,
#clock .digits div.seven .d7{
 opacity:1;
}
/* 8 */
#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7{
 opacity:1;
}
/* 9 */
#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7{
 opacity:1;
}
/* 0 */
#clock .digits div.zero .d1,
#clock .digits div.zero .d3,
#clock .digits div.zero .d4,
#clock .digits div.zero .d5,
#clock .digits div.zero .d6,
#clock .digits div.zero .d7{
 opacity:1;
}
#clock .digits div.dots{
 width:5px;
}
#clock .digits div.dots:before,
#clock .digits div.dots:after{
 width:5px;
 height:5px;
 content:'';
 position:absolute;
 left:0;
 top:14px;
}
#clock .digits div.dots:after{
 top:34px;
}
#clock .weekdays{
 font-size:12px;
 position:absolute;
 width:100%;
 top:10px;
 left:0;
 text-align:center;
 color: #00008B;
}
#clock .weekdays span{
 opacity:0.2;
 padding:0 10px;
}
#clock .weekdays span.active{
 opacity:1;
}
#clock .ampm{
 position:absolute;
 bottom:20px;
 right:20px;
 font-size:12px;
}

File diatas kita simpan file dengan nama style.css setelah itu kita buat folder lagi dengan nama js masukan file jquery.min.js dan moment.min.js kedalam folder tersebut. Dan buatlah file baru dengan nama script.js. masukan script berikut ini :

$(function(){
 // Cache some selectors
 var clock = $('#clock'),
 alarm = clock.find('.alarm'),
 ampm = clock.find('.ampm');
 // Map digits to their names (this will be an array)
 var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
 // This object will hold the digit elements
 var digits = {};
 // Positions for the hours, minutes, and seconds
 var positions = [
 'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
 ];
 // Generate the digits with the needed markup,
 // and add them to the clock
 var digit_holder = clock.find('.digits');
 $.each(positions, function(){
 if(this == ':'){
 digit_holder.append('<div class="dots">');
 }else{
 var pos = $('<div>');
 for(var i=1; i<8; i++){
 pos.append('<span class="d' + i + '">');
 }
 // Set the digits as key:value pairs in the digits object
 digits[this] = pos;
 // Add the digit elements to the page
 digit_holder.append(pos);
 }
 });
 // Add the weekday names
 var weekday_names = 'Senin Selasa Rabu Kamis Jumat Sabtu Minggu'.split(' '),
 weekday_holder = clock.find('.weekdays');
 $.each(weekday_names, function(){
 weekday_holder.append('<span>' + this + '</span>');
 });
 var weekdays = clock.find('.weekdays span');
 // Run a timer every second and update the clock
 (function update_time(){
 // Use moment.js to output the current time as a string
 // hh is for the hours in 12-hour format,
 // mm - minutes, ss-seconds (all with leading zeroes),
 // d is for day of week and A is for AM/PM
 var now = moment().format("hhmmssdA");
 digits.h1.attr('class', digit_to_name[now[0]]);
 digits.h2.attr('class', digit_to_name[now[1]]);
 digits.m1.attr('class', digit_to_name[now[2]]);
 digits.m2.attr('class', digit_to_name[now[3]]);
 digits.s1.attr('class', digit_to_name[now[4]]);
 digits.s2.attr('class', digit_to_name[now[5]]);
 // The library returns Sunday as the first day of the week.
 // Stupid, I know. Lets shift all the days one position down, 
 // and make Sunday last
 var dow = now[6];
 dow--; 
 // Sunday!
 if(dow < 0){
 // Make it last
 dow = 6;
 }
 // Mark the active day of the week
 weekdays.removeClass('active').eq(dow).addClass('active');
 // Set the am/pm text:
 ampm.text(now[7]+now[8]);
 // Schedule this function to be run again in 1 sec
 setTimeout(update_time, 1000);
 })();
 // Switch the theme
});