agung wisudhatama April 29, 2022 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Jam digital modern di zaman sekarang ini bisa dikatakan menjadi sebuah kewajiban. Tidak seperti tahun-tahun sebelumnya yang masih menggunakan jam analog sebagai pengingat waktu.

Pergeseran trend dan juga kecanggihan teknologi memaksa orang untuk berinovasi lebih jauh dan mendalam menciptakan sebuah teknologi baru untuk mempermudah aktivitas orang-orang dan salah satunya adalah jam digital modern ini.

Bilamana dalam artikel saya sebelumnya saya membuat artikel tentang jam juga. Tentunya dalam artikel sebuah cursor yang diikuti jam. Artikel menarik yang patut kalian coba.

Baca Juga : Membuat Cursor Diikuti Widget Jam Analog dengan Kode Javascript

Maka sekarang saya akan memberikan sedikit trik cara membuat jam digital modern dengan menggunakan CSS3. Perpaduan keindahan dan bahasa pemrograman handal menciptakan sebuah karya yang berestetika tinggi. Betul nggak? :D

Dimana dalam visualisasi jam ini akan terdapat tiga kotak yang terdiri dari Jam, Menit dan Detik dan ketiganya ini berjalan sesuai dengan format waktu yang ada di komputer kita yang sudah terotomatisasi dari system Windows. Hebat bukan?

Baca Juga : Mengganti Logo Cursor Default Menjadi Komet Berekor dan Ikon Medsos

Sekarang kita mulai saja membuat format waktu atau jam digital modern dengan cara-cara yang sudah disebutkan dibawah ini secara tuntas dan jelas. Bila kalian kurang mengerti bisa mengirimkan komentar di kolom paling bawah.

Membuat Jam Digital Modern dengan CSS3

Silakan masuk ke Tema kemudian ke Sesuaikan : Edit HTML dan cari kode ]]></b:skin>. Setelah ketemu itu kode tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut.

.clock{
    width: 350px;
    height: 75px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 60%;
    left: 48%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.clock div{
    position: relative;
    background-color: #FF1493;
    height: 100%;
    width: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Open Sans',sans-serif;
    font-size: 35px;
    color: #fff;
    border-radius: 15px;
    box-shadow: 5px 5px 3px 0px rgba(230,113,113,0.75);
}
.clock span{
    font-weight: bolder;
    font-size: 25px;
    color: #E9967A;
}

Cari lagi kode </body> dan tempelkan kode dibawah ini diatas kode </body> ini. Jangan lupa naruhnya supaya tidak terjadi galat/kerusakan template.

<script type='text/javascript'>
//<![CDATA[  
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var seconds = document.getElementById("seconds");
var clock = setInterval(
    function time(){
      var date_now = new Date();
      var hr = date_now.getHours();
      var min = date_now.getMinutes();
      var sec = date_now.getSeconds();      
      if(hr < 10){
          hr = "0" + hr;
      } 
      if(min < 10){
          min = "0" + min;
      } 
      if(sec < 10){
          sec = "0" + sec;
      }
      hour.textContent = hr;
      minute.textContent = min;
      seconds.textContent = sec;
    },1000
);  
//]]>
</script>

Setelah itu barulah kita tampilkan jam dengan membubuhkan sedikit kode di Tata Letak blog kita. Tempel di Tambah HTML/Javascript dan taruh disitu ya kodenya.

<div class="separator" style="clear: both;"><img border="0" data-original-height="200" data-original-width="200" src="https://blogger.googleusercontent.com/img/a/AVvXsEiL-Fhlq8gbWyqdcwR-W8ZRrnO1NjkspyeFnDW3i1ZcQ6jHkYY1AkyfpoBirsiXqqCT30Ud7s8bnWcQ4m-dfIioY0_kMLoWyVwE-uCxlqj5ZyLyURd6q18KZRRgtPS_BnlKm_Ruf_AI6nRKM7vmgGI5dWDMDNKbu-OJfIDYeQzNwiulx7rE3FGNIgueAw"/></div></center><br/><br/>
<div style="background-color:#FF1493;border-radius:15px;padding:3px 3px 3px 3px;margin:3px 53px 3px 53px;"><center><a href="https://alifacode.blogspot.com/2022/03/modifikasi-spoiler-show-hidden-dengan.html" target="_blank"><font color="#fff"><strong>KEMBALI KE TUTORIAL</strong></font></a></center></div><br/><br/><br/>
<div class="clock">
        <div id="hour">00</div>
        <span>:</span>
        <div id="minute">00</div>
        <span>:</span>
        <div id="seconds">00</div>
</div>

Akhir dari kerjaan kita adalah menyimpan tugas yang sudah kita kerjakan tadi. Lihat. Sudah jadi khan tampilan Jam Digital Modern dengan CSS3. Terima kasih ya yang sudah mampir kesini di artikel Membuat Jam Digital Modern dengan CSS3. Sekian dan terima kasih. Sekarang kamu tidak harus melihat jam di tangan kamu khan atau di HP android kamu. Tapi bisa juga lihat di blog kamu juga. Salam.

Result

Bagikan ke teman-teman kamu

Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Membuat Jam Digital Modern dengan CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.