Widget Jam Digital Sederhana Untuk Blogger atau Website

Widget Jam Digital Sederhana Untuk Blogger atau Website - dalam tutorial ini saya akan share, bagaimana cara memasang widget jam digital sederhana di blog blogger. Ini adalah bagian sederhana dari blogger.

Bagian ini tidak penting bagi blog anda. Ini adalah keindahan sebuah blog. Anda menggunakan trik ini di setiap website seperti wordpress atau blogger.

Sekarang mulai: Klik Template> Edit HTML Kemudian tekan "Ctrl + F" dan cari </ style> salin masa lalu di bawah kode CSS sebelum </ style> Tag.

CSS

#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) {

 ... YOUR HTML CODE HERE ... 

    #realtime {
        font-size: 3rem;
        padding: 2rem 0;
    };
}

Sekarang Save Template dan klik Layout, Kemudian tambahkan Widget HTML / Javascript baru dan copy paste kode dibawah ini.

Javascript

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

Sekarang segarkan halaman Anda dan lihat perubahannya. Jika Anda menemukan masalah maka informasikan kepada saya di bagian komentar dan tetap sharing posting kami. Terima kasih...

Share this post