Cara Terbaru Membuat Widget Jam Digital Sederhana di Blogger

Cara terbaru Membuat Widget Jam Digital Sederhana di Blogger

Cara Terbaru Membuat Widget Jam Digital Sederhana di Blogger - Cara membuat widget jam digital sederhana di blogger, ialah hal yang akan kita bahas malam ini.

Fungsi Widget Jam Digital di Blog

Widget jam digital ini, berfungsi untuk menampilkan waktu sebenarnya/realtime, dengan format jam:menit:detik pada blog. Kalian sendiri tidak perlu khawatir akan settingan jam ini. Karena, widget jam digital ini akan otomatis menampilkan waktu dimana kalian membuka blog tersebut.

Untuk pemasangannya, kalian ikuti tutorialnya berikut ini.

Membuat Widget Jam Digital Sederhana di Blogger terbaru

  • Login ke akun blogger kalian.
  • Kemudian, klik opsi Tema => Edit HTML => pastekan kode CSS ini sebelum kode ]]></b:skin> dan Simpan.
#realtime {
    font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-weight: 700;
    display: block;
    text-align: center;
    font-size: 30px;
    padding: 4rem 0;
}

#realtime span {
    display: inline-block;
    font-family: Avenir Next, Nunito, sans-serif;
    font-weight: 100;
    font-size: 8vw;
    position: relative;
    top: -2vw;
}

@media all and (max-width: 600px) {
    #realtime {
        font-size: 4rem;
        padding: 2rem 0;
    };
}

@media all and (max-width: 350px) {
 
    #realtime {
        font-size: 3rem;
        padding: 2rem 0;
    };
}
  • Selanjutnya, kalian buka opsi Tata Letak => Tambahkan Gadget => HTML/Javascipt => pastekan kode Javascript ini di bagian konten.
<time id="realtime"></time>
<script type='text/javascript'>
var currentTime = document.getElementById("realtime");
function zeropadder(n) {return (parseInt(n,10) < 10 ? '0' : '')+n;}
function updateTime(){
  var timeNow= new Date(),
  hh = timeNow.getHours(),
  mm = timeNow.getMinutes(),
  ss = timeNow.getSeconds(),
  formatAMPM = (hh >= 12?'PM':'AM');
  hh = hh % 12 || 12;
  currentTime.innerHTML = hh + ":" + zeropadder(mm) + ":" + zeropadder(ss) + " " + formatAMPM;
  setTimeout(updateTime,1000);}
updateTime();
</script>
  • Simpan perubahan dan cek hasilnya.

Akhir Kata 


Sekian artikel tentang cara terbaru membuat widget jam digital simple di blogger. Jika kalian menemui  kendala, tanyakan kendala tersebut di komentar. Dan jika kalian tidak keberatan, mohon untuk share artikel ini ke berbagai akun media sosial kalian. Terimakasih sudah mampir.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel