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:

17 nhận xét

Trần Quang Huy nói...

ngầu đó bác

Nặc danh nói...

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

Duy Phương nói...

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ó

Trịnh Công Sơn nói...

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

#Duy. nói...

Quen.quen

Nặc danh nói...

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

NIỆM STYLE Vlogs nói...

Bảo toàn làm mấy cái thủ thuật tào lao ko nhỉ kaka :v

Legsorins nói...

:viết mấy bài này, mốt quên còn :v lục lại mà dùng thôi

Nguyễn Chánh Đức nói...

Đơn giản nhưng mà đẹp ghê á <3

Đặng Hưng nói...

em đổi liên kết www.hungstar.tk thành https://hungstar-it.blogspot.com anh với nha :D

Tiểu Bảo Blog nói...

oke anh <3

Tiểu Bảo Blog nói...

haha

Trần Quang Huy nói...

nên ra bài thường xuyên bác à

Võ Thanh Phú nói...

- đẹp và gọn <3

Legsorins nói...

chúc 1 ngày vui vẻ và an lành nhé ông :3

Võ Thanh Phú nói...

buổi sáng vui vẻ nha

Đặng Hưng nói...

ngon lành cành đào

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!