Nhận xét mới

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.
tao dong ho xem gio cho blogspot don gian

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.
Share:

Add Comment

17 nhận xét:

  1. sao tạo đc cái khung chứa code kia

    Trả lờiXóa
    Trả lời
    1. anh bôi đen toàn bộ code rồi ấn vô cái hình ở trên thanh công cụ có hình giống dấu => " <= nháy đó là có

      Xóa
    2. còn dựa vào css nữa chứ , css của nó đẹp có sẵn rồi mà

      Xóa
  2. Chỉnh thêm css đi, nhìn chả chuyên nghiệp tí nào

    Trả lờiXóa
  3. Bảo toàn làm mấy cái thủ thuật tào lao ko nhỉ kaka :v

    Trả lờiXóa
    Trả lời
    1. :viết mấy bài này, mốt quên còn :v lục lại mà dùng thôi

      Xóa
  4. Đơn giản nhưng mà đẹp ghê á <3

    Trả lờiXóa
  5. em đổi liên kết www.hungstar.tk thành https://hungstar-it.blogspot.com anh với nha :D

    Trả lờiXóa
  6. nên ra bài thường xuyên bác à

    Trả lờiXóa
  7. chúc 1 ngày vui vẻ và an lành nhé ông :3

    Trả lờiXóa

Liên hệ đặt quảng cáoTheo dõi để cập nhật bài viết sớm nhất Theo dõi ngay!