 |
| Cách tạo Tiện ích ưu đãi với Đồng hồ đếm ngược cho Blogger |
Tạo Đồng hồ đếm ngược cho các sự kiện, ưu đãi, bán hàng và giảm giá sắp tới trên trang web của bạn bằng cách sử dụng HTML, CSS và JavaScript.
Xin chào! Chào mừng bạn đến với Vietech
Trang web của bạn có bán sản phẩm không? Nếu có, thì bạn có thể tạo Đồng hồ đếm ngược để giảm giá, ưu đãi và bán hàng trong một khoảng thời gian giới hạn. Bạn có thể hiển thị thời gian còn lại của giảm giá hoặc ưu đãi. Ngoài ra, khi sự kiện kết thúc, họ sẽ thấy thông báo 'Ưu đãi đã kết thúc!'.
Trong bài viết này, tôi sẽ chia sẻ cách tạo Đồng hồ đếm ngược bằng HTML, CSS và JS cho Trang web Blogger của bạn.
Không nhất thiết nó chỉ được tạo ra cho các ưu đãi hoặc giảm giá, bạn có thể sử dụng nó cho các mục đích hoặc sự kiện khác.
Trước khi bắt đầu, chúng ta hãy xem Demo của nó.
Làm thế nào để tạo Đồng hồ đếm ngược?
Tạo Đồng hồ đếm ngược cho Trang web Blogger của bạn sẽ không yêu cầu nhiều kiến thức về HTML, CSS hay JS vì tôi đã thiết kế sẵn cho bạn. Điều bạn cần làm là dán các mã sau vào bài đăng, trang hoặc bất kỳ nơi nào khác thông qua chế độ xem HTML.
Bước 1: Trước hết Đăng nhập vào tài khoản của bạn > Bảng điều khiển Blogger.
Bước 2: Trên Blogger Dashboard, nhấp vào Pages hoặc Post .
Bước 3: Tạo một trang mới hoặc đăng bằng cách nhấp vào biểu tượng hoặc nhấp vào trang hiện có hoặc đăng để thêm mã vào đó.
Bước 4: Chuyển sang chế độ xem HTML.
Bước 5: Dán các mã sau vào nơi bạn muốn thêm Đồng hồ đếm ngược.
Nếu mẫu của bạn có tính năng chế độ tối và nếu bạn muốn có màu khác khi ở chế độ tối, thì bạn có thể tùy chỉnh mã theo nhu cầu của mình. Mỗi mẫu có thể có một lớp chế độ tối khác nhau, vì vậy hãy điều chỉnh nó, bạn có thể thay thế lớp được đánh dấu bằng lớp chế độ tối mẫu của bạn.
Mã Code
<style>
/* Countdown Discount by Fineshop Design */
.cdCont{position:relative;background:#f7f3f6;padding:55px 20px 30px;border-radius:10px;text-align:center;color:#08102b;font-family:inherit}
.cdCont[data-disc]:not([data-disc=''])::before{content:attr(data-disc);display:block;font-weight:700;font-size:13px;width:50px;height:50px;padding:10px 0 10px;background:#f5e2f1;border-radius:5px 5px 50px 50px;position:absolute;top:-5px;right:50px}
.cdCont .cdH{margin:0 0 20px;font-size:1.3rem;font-weight:700}
.cdCont .cdD{font-size:15px}
.cdCont .cdHeadA .cdD{margin-bottom:25px}
.cdCont .cDown{width:100%;font-size:20px;text-align:center;font-weight:400;margin:20px 0}
.cdCont .cdBox{display:inline-block;width:55px;height:55px;margin:3px;padding-top:4px;background:#fff;border-radius:10px}
.cdCont .unit{display:block;font-size:10px;margin-top:-4px;opacity:.8}
.cdCont .btn{display:inline-flex;align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:30px;line-height:20px;color:#fffdfc;background:#204ecf;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100px}
.cdCont.ended[data-disc]::before, .cdCont.ended .cdHeadB, .cdCont:not(.ended) .cdHeadA, .cdCont.ended .cdTmr{display:none}
.darkMode .cdCont{background:#252526;color:#fffdfc}
.darkMode .cdCont[data-disc]::before{background:#2d2d30}
.darkMode .cdCont .cdBox{background-color:#1e1e1e}
</style>
<!--[ Countdown Discount by Fineshop Design ]-->
<div data-disc='-30%' class='cdCont'>
<div class='cdHeadB'>
<div class='cdH'>Are you fast enough?</div>
<div class='cdD'>Grab a massive discount of 30%, be fast, because the discount is available only for limited time.</div>
</div>
<div class='cdHeadA'>
<div class='cdH'>Oops! Offer Ended.</div>
<div class='cdD'>You are so late reaching here.</div>
</div>
<div class='cdTmr'>
<div class='cDown'>
<div class='cdBox'>
<span class='days'>00</span>
<span class='unit'>Days</span>
</div>
<div class='cdBox'>
<span class='hours'>00</span>
<span class='unit'>Hours</span>
</div>
<div class='cdBox'>
<span class='minutes'>00</span>
<span class='unit'>Minutes</span>
</div>
<div class='cdBox'>
<span class='seconds'>00</span>
<span class='unit'>Seconds</span>
</div>
</div>
<a class='btn' href='#'>Buy Now!</a>
</div>
</div>
<script>
/*<![CDATA[*/
/* Countdown Discount Script by Fineshop Design */
const dayElm = document.querySelector('.cdBox .days'),
hourElm = document.querySelector('.cdBox .hours'),
minuteElm = document.querySelector('.cdBox .minutes'),
secondElm = document.querySelector('.cdBox .seconds'),
cdCont = document.querySelector('.cdCont'),
endDate = new Date('January 1 2000 00:00:00 GMT+05:30');
let eventEnded = !1;
const updateTimer = () => {
let e = new Date;
var t = endDate.getTime() - e.getTime();
t <= 1e3 && (eventEnded = !0);
var n = 36e5,
o = Math.floor(t / 864e5),
a = Math.floor(t % 864e5 / n),
n = Math.floor(t % n / 6e4),
t = Math.floor(t % 6e4 / 1e3);
dayElm.innerText = o < 10 ? '0' + o :o, hourElm.innerText = a < 10 ? '0' + a :a, minuteElm.innerText = n < 10 ? '0' + n :n, secondElm.innerText = t < 10 ? '0' + t :t
};
setInterval(() => {
eventEnded ? (cdCont.classList.add('ended')) : updateTimer()
}, 1e3);
/*]]>*/
</script>
Tôi khuyên bạn nên thêm mã CSS vào phần đầu của mẫu của bạn.
Bước 6: Thay đổi các phần được đánh dấu theo mong muốn của bạn và Xuất bản Trang hoặc Bài đăng của bạn.
Thay thế January 1 2000 00:00:00 GMT+05:30 bằng Ngày và Giờ tùy chỉnh của bạn.
Đã xong!Tóm lại
Đây là tất cả về cách tạo Tiện ích Ưu đãi với Đồng hồ đếm ngược bằng HTML, CSS và JavaScript cho Trang web Blogger của bạn. Tôi hy vọng bạn thích bài viết này. Xin vui lòng chia sẻ bài viết này. Và nếu bạn đang gặp vấn đề trong bất kỳ phần nào hoặc bạn có bất kỳ câu hỏi nào, hãy hỏi chúng tôi trong hộp bình luận . Cảm ơn bạn!
Tham khảo: Fineshopdesign