Widget đồng hồ số đơn giản cho Blogger/Website

Trong bài này mình sẽ hướng dẫn các bạn tạo một widget đồng hồ số đơn giản với Blogger, còn các website khác thì cũng áp dụng đoạn code này được luôn nha :))

Widget đồng hồ số đơn giản cho Blogger/Website

Bước 1: Copy đoạn code bên dưới và thêm vào ô chứa code của blog bạn:

<style>

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

#realtime {
font-size: 3rem;
padding: 2rem 0;
};
}
</style>
<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>

* Lưu ý: Ở phần mình tô màu (PM và AM) bạn có thể chỉnh nó tùy ý (vd: PM= tối ; AM=sáng) hoặc có thể xóa đi cũng được.