Liên hệ quảng cáo
Liên hệ quảng cáo
profile card

Hướng dẫn thêm tiện ích đếm ngược ngày đến tết cho Blogspot

Cập nhật: 25/04/2019 Bởi Duy... - A- A+

Bài viết này mình sẽ hướng dẫn bạn thêm tiện ích đếm ngược ngày đến tết cho Blogspot mà không cần phải tạo một Blog mới và làm Template riếng. Thủ thuật này chèn trực tiếp và trong Theme của bạn luôn. Mời các bạn cùng tham khảo nhé!
Đọc thêm: Hiệu ứng tuyết rơi nhẹ nhàng trang trí Noel, mùa Đông cho Blogspot

Cách thêm tiện ích đếm ngược ngày đến tết cho Blogspot
Hình ảnh minh họa cho Tiện ích

Cách thực hiện

Bước 1. Mình cần chắc rằng Theme bạn có thư viện jquery. Nếu chưa chưa có bạn chèn đoạn mã này giữa cặp thẻ <head>...</head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Bước 2. Các bạn chèn đoạn script này trước thẻ đóng </body>
<script type='text/javascript'>
//<![CDATA[
// Countdown holiday
let timeout = null;
function makeTimer() {
// Edit Here
//---- let endTime = new Date("'02/03/2019 23:59:59 GMT+0700 (SE Asia Standard Time)"); ----
let endTime = new Date("'02/05/2019 23:59:59 GMT+0700 (SE Asia Standard Time)");
endTime = (Date.parse(endTime) / 1000);
let now = new Date();
now = (Date.parse(now) / 1000);
let timeLeft = endTime - now,
days = Math.floor(timeLeft / 86400),
hours = Math.floor((timeLeft - (days * 86400)) / 3600),
minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60),
seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours === 0 && minutes === 0 && seconds === 0) {
clearTimeout(timeout);
} else {
if (hours < "10") {
hours = "0" + hours;
}
if (minutes < "10") {
minutes = "0" + minutes;
}
if (seconds < "10") {
seconds = "0" + seconds;
}
$("#days").html(days + "<span>Ngày</span>");
$("#hours").html(hours + "<span>Giờ</span>");
$("#minutes").html(minutes + "<span>Phút</span>");
$("#seconds").html(seconds + "<span>Giây</span>");
timeout = setTimeout(makeTimer, 1000);
}
}
makeTimer();
//]]>
</script>
Vì làm tiện ích đếm ngược ngày đến tết lên đoạn JS trên đã đặt sẵn ngày rồi và mình không hướng dẫn sửa ngày phần này. Bạn nào biết có thể tự sửa ngày thành tiện ích đếm ngược tùy thích.

Bước 3. Các bạn thêm đoạn HTML dưới đây vào nơi bạn muốn hiển thị.
<div id='countdown'>
<div id='timer'>
<div id='days'></div>
<div id='hours'></div>
<div id='minutes'></div>
<div id='seconds'></div>
</div>
</div>

Bước 4. Các bạn viết CSS cho nó. Tùy theo sở thích của bạn và viết CSS cho nó nhé. CSS sẽ có dạng sau:
#countdown{}
#timer{}
#timer div{}
#timer span{}
#days,#hours,#minutes{}

Các bạn cũng có thể tham khảo đoạn CSS dưới đây của bên toishare.net
#countdown{float:left;width:100%;height:130px;box-sizing:border-box;margin-top:30px}
#timer{padding-top:0}
#timer div{width:65px;height:65px;line-height:45px;z-index:199;background:transparent;box-shadow:0 0 0 4px rgb(78, 50, 136);border-radius:50%;text-align:center;font-size:20px;font-weight:700;color:#fff;display:inline-block;float:left;margin:0 9px;color:rgb(78, 50, 136)}
#timer div:nth-child(1),{margin-left:0}
#timer div:last-child{margin-right:0}
#timer span{color:rgb(78, 50, 136);margin-bottom:20px;font-size:12px;display:block;transform:translate(0,-52%)}
#days,#hours,#minutes{color:#fb5182}
@media screen and (max-width: 440px) {
#timer div{width:50px!important;height:50px!important;line-height:35px!important;font-size:15px!important}
#timer span{font-size:8px;transform:translate(0,-52%)!important}
.title-countdown span{font-size:18px!important}
}
CSS sẽ chèn ở trước thẻ </b:skin> hoặc trong cặp thẻ <style>...</style>

Lời kết

Chỉ với một vài bước đơn giản thì bạn đã có một tiện ích đẹp làm tăng thêm không khí tết sắp đến trên Blog bạn rồi. Chúc các bạn thành công!
Source: toishare.net

@ngylduy, @688.in, @ngylduy, @ngylduy

Ngày ấy ɐnh ngỏ lời thương và yêu đậm sâu với ǝm, ǝm có tin ɐnh và nắm tay anh, mình cùng đi qua từng mùa đông rét buốt.
Nếu ngày ấy ɐnh là chàng trai mà ǝm ngày đêm ước ao, ..., thì giờ đây ɐnh đã có câu chuyện thật đẹp...

Tết Trung Thu rước đèn đi chơi em rước đèn đi khắp phố phường, lòng vui sướng với đèn trong tay em múa ca trong ánh trăng rằm. Trung thu là Tết thiếu nhi, mà sao người lớn cứ đi chơi nhiều đi nhiều nó lại làm liều, làm liều nó lại ra nhiều thiếu nhi.
Niệm StyleLớp Thủ Thuật123 ShareNhái BlogBlog VNITNgọc Ánh BlogMinh ĐứcHuyDC BlogBảo Trọng BlogLong An IT
Chong chóng

Subscribe to our Newsletter