Cara Membuat Widget Jam Digital Seo Friendly Simple pada Blog

Tutorial Lengkap Cara Membuat Widget Jam Digital Simple Cool pada Blog - Update again nih gan, admin mau share tutorial cara membuat widget jam untuk blog agan. Widget jam ini sangat simple dan keren gan untuk blog yang memiliki tema kalem dan santai. Jika agan lagi mencari widget jam yang seo friendly ya cuma disini gan, selain seo friendly dan simple.

Untuk memasang widget jam ini, harus menggunakan beberapa script yaitu script html, css, dan juga javascript. Selain itu widget ini juga tidak membuat loading blog agan menjadi lambat karena widget ini benar - benar seo friendly gan. Dari pada penasaran, akan admin jelaskan sekarang juga gan cekidot.

Tutorial Pemasangan

Pertama agan buka blogger dan template, lalu edit html. Setelah masuk agan tinggal copy script css dibawah ini tepat diatas kode </b:skin>

body {
    min-height: 100%;
    margin: 0;
    background: rgb(0,122,255);
    color: #fff;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#realtime {
    font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-weight: 100;
    display: block;
    text-align: center;
    font-size: 12vw;
    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;
    };
}

Kedua masih di edit html pada template, agan copy dan pasang script javascript dibawah ini tepat diatas kode </body>

<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 + "<span>:</span>" + zeropadder(mm) + "<span>:</span>" + zeropadder(ss) + " " + formatAMPM;
  setTimeout(updateTime,1000);
}
updateTime();
</script>

Ketiga agan masuk ke tata letak, lalu pilih add gadget. Agan tinggal copy dan pasang script html nya dibawah ini. Tinggal save dan lihat hasilnya gan.

<time id="realtime"></time>

Selesai, gimana gan ? gampang kan. Tunggu tutorial blogger lainnya dari blog advaster.net gan semoga tutorial tadi bermanfaat. Terimakasih