TẠO ĐỒNG HỒ XEM GIỜ CHO BLOGSPOT ĐƠN GIẢN

Xin chào các bạn đã quay lại Tiểu Bảo Blog, hôm nay mình sẽ hướng dẫn các bạn tạo một cái đồng hồ xem giờ ngay trên blogspot, dù đã có rất nhiều người hướng dẫn rồi nhưng mình cũng sẽ hướng dẫn cho các bạn hi vọng các bạn sẽ thích mẫu đồng hồ trên blogspot này do mình hướng dẫn.

CÁC BƯỚC THỰC HIỆN

Bước 1: Vào trang chủ blogger, chỉnh sửa HTML tìm kiếm thẻ ]]></b:skin>  và dán đoạn code phía dưới ở trước nó.

#realtime {
    font-family: 'Roboto', sans-serif;
    display: block;
    text-align: center;
    font-size: 30px;
    padding: 1rem 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;
    };
}

Bước 2: Vào bố cục, tạo tiện ích HTML/javascript mới và dán toạn bộ code dưới vào.

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

Bước 3: Lưu template.

LỜI KẾT

Vậy là xong một cái đồng hồ cho blogspot dù khá đơn giản nên không đẹp lắm các bạn thông cảm nhé, các bạn có thể thay font khác cho chữ số để nhìn đẹp mắt hơn, Bài viết đến đây là hết rồi hẹn gặp lại các bạn ở bài viết sau.