Trang chủ
Blogger
html

Cách tạo Winget Time đẹp cho Blogspot

6 minute read

Hôm nay CodehayVN sẽ hướng dẫn các bạn cách để tạo Widget Time trên Blogspot.Winget Time là một khung đồng hồ số, tăng thêm tính năng và thu hút người đọc trên website của bạn.



Cách thêm tiện ích đồng hồ trên Blogger

Bước 1: Trước hết, Đăng nhập vào Trang tổng quan Blogger của bạn.

Bước 2: Trên Trang tổng quan Blogger, nhấp vào Bố cục .

Bước 3  Sau đó Click vào Thêm Tiện ích.

Bước 4  Sau khi Chọn Html/JavaScript.

Bước 5  Sau đó sao chép và dán mã cho sẵn bên dưới.

SKiểu 1 Với Giờ Phút Giây và Định dạng AM/PM

<span id="stm-clockstyle1"></span>
<script type="text/javascript">
//<![CDATA[
function showTime(){var a_p = "";var today = new Date();var curr_hour = today.getHours();var curr_minute = today.getMinutes();var curr_second = today.getSeconds();if (curr_hour < 12){a_p = "AM"}else{a_p = "PM"}if (curr_hour == 0){curr_hour = 12}if (curr_hour > 12){curr_hour = curr_hour - 12}curr_hour = checkTime(curr_hour);curr_minute = checkTime(curr_minute);curr_second = checkTime(curr_second);document.getElementById('stm-clockstyle1').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p}function checkTime(i){if (i < 10){i = "0" + i}return i}setInterval(showTime,500);
//]]>
</script>

Kiểu 2 Với Định dạng Giờ phút và AM/PM :-

<span id="stm-clockstyle2"></span>
<script type="text/javascript">
//<![CDATA[
var a_p = "";var d = new Date();var curr_hour = d.getHours();if (curr_hour < 12){a_p = "AM"}else{a_p = "PM"}if (curr_hour == 0){curr_hour = 12}if (curr_hour > 12){curr_hour = curr_hour - 12}var curr_min = d.getMinutes();curr_min = curr_min + "";if (curr_min.length == 1){curr_min = "0" + curr_min}document.getElementById('stm-clockstyle2').innerHTML=curr_hour + ":" + curr_min + " " + a_p;
//]]>
</script>

Kiểu 3 Với Định dạng Giờ và Phút: -

<span id="stm-clockstyle3"></span>
<script type="text/javascript">
//<![CDATA[
var d = new Date();var curr_hour = d.getHours();var curr_min = d.getMinutes();curr_min = curr_min + "";if (curr_min.length == 1){curr_min = "0" + curr_min}document.getElementById('stm-clockstyle3').innerHTML=curr_hour + ":" + curr_min;
//]]>
</script>

Kiểu 4 Với Định dạng Ngày, Tháng, Năm: -

<span id="stm-clockstyle4"></span>
<script type='text/javascript'>
//<![CDATA[
var fullbulan = ['January','February','March','April','May','June','July','August','September','October','November','December'];var myDays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];var tanggal = new Date();var hari = tanggal.getDate();var bulan = tanggal.getMonth();var thisDay = tanggal.getDay(),thisDay = myDays[thisDay];var tahun = tanggal.getYear();var year = (tahun < 1000) ? tahun + 1900:tahun;document.getElementById('stm-clockstyle4').innerHTML=thisDay + ',' + hari + ' ' + fullbulan[bulan] + ' ' + year;
//]]>
</script>

Kiểu 5 Với Định dạng Ngày Tháng và Năm: -

<span id="stm-clockstyle5"></span>
<script type='text/javascript'>
//<![CDATA[
var fullbulan = ['January','February','March','April','May','June','July','August','September','October','November','December'];var tanggal = new Date();var hari = tanggal.getDate();var bulan = tanggal.getMonth();var tahun = tanggal.getYear();var year = (tahun < 1000) ? tahun + 1900:tahun;document.getElementById('stm-clockstyle5').innerHTML=hari + " " + fullbulan[bulan] + " " + year;
//]]>
</script>

Kiểu 6 Với Giờ Phút Giây và Ngày Tháng và Năm: -

<center><script>var myVar=setInterval(function(){myTimer()},1000); function myTimer() {var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("h").innerHTML=t;}</script>
<span id="h"></span>
<script type="text/javascript">
n=new Date();if(n.getTimezoneOffset()==0)t=n.getTime()+(7*60*60*1000);else t=n.getTime();n.setTime(t);var dn=new Array("Chủ nhật","Thứ 2","Thứ 3","Thứ 4","Thứ 5","Thứ 6","Thứ 7");d=n.getDay();m=n.getMonth()+1;y=n.getFullYear()
document.write(dn[d]+", "+(n.getDate()<10?"0":"")+n.getDate()+"/"+(m<10?"0":"")+m+"/"+y)
</script></center>
<style>
#h {font-weight:400;
    display: block;
    font-size: 30px;
    margin: 0 0 5px;
    letter-spacing: 5px;
}
</style>
Demo
Thứ 7, 21/06/2025

Bước 6 : Cuối cùng,lưu lại và xem kết quả.

Kết luận 

Trong bài đăng này,CodehayVN đã chia sẻ hướng dẫn về Cách tạo Winget Time đẹp cho Blogspot. Mình hy vọng hướng dẫn này có thể hữu ích cho tất cả các Blogger Chuyên nghiệp và Người mới bắt đầu. Cảm ơn bạn đã ghé thăm trang web của chúng tôi.

Đăng nhận xét