Bạn muốn yêu cầu phần mềm, khóa học hay kiến thức gì hãy liên hệ ngay Hợp tác cùng phát triển nhé !

Tạo nút Download có đếm thời gian

Tạo nút Download có đếm thời gian

Hello xin chào các bạn, hôm nay mình rảnh nên mình sẽ quyết định share cho các bạn tạo một nút download có đếm thời gian nha. Khi người dùng tải xuống nút download sẽ đếm ngược 10s, tùy theo sự điều chỉnh của bạn. Bạn cũng có tăng thời gian giữ chân người dùng trên website nhờ cách làm này.

Hình minh họa

Trước khi vào bài viết đừng quên nhấn vào cái chuông để đọc những bài viết mới nhất nhé. Cùng theo dõi bài viết nào

Hướng dẫn

Bước 1: Truy cập Blogger ➤ Chủ đề ➤ Chỉnh sửa HTML, dán đoạn css bên dưới lên trên]]><b:skin>

.downloadInfo{max-width:500px;background-color:#fefefe; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%); border:1px solid #eceff1;border-radius:5px; padding:15px;margin-top:20px;margin-bottom:20px; display:flex;align-items:center; line-height:1.8em;font-size:14px}
.downloadInfo a, .downloadInfo .fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:50px;height:50px; padding:10px; background:#f1f1f0;border-radius:10px}
.downloadInfo a{background-color:#f09800;color:#fefefe; margin:0;padding:10px 12px;border-radius:3px; width:auto;height:auto; line-height:20px;font-size:13px}
.downloadInfo a:after{content:attr(aria-label)}
.downloadInfo .fileType:before{content:attr(data-text)}
.downloadInfo .fileName{flex-grow:1; width:calc(100% - 150px);padding:0 15px}
.downloadInfo .fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.downloadInfo .fileSize{line-height:1.4em;font-size:12px;opacity:.8}
.icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}
.icon{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.wcTargetLink{display:none}
@media screen and (max-width:480px){
.downloadInfo{padding:12px}
.downloadInfo a{width:50px;height:50px;border-radius:10px}
.downloadInfo a:after{display:none}
.downloadInfo a .icon{margin:0}}
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .downloadInfo{background-color:#252526; border:0}
.darkMode .downloadInfo .fileType{background-color:#1e1e1e)}

Bước 2: Dán đoạn javascript bên dưới vào trên <body> hoặc & lt;! - </body> - & gt; & lt; / body & gt; và nhấn Lưu.

<script>
//<![CDATA[
// dwonload countdown timer by wendy code
var timeLeft = 10; //atur waktunya di sini
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.wcTargetLink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Harap Tunggu <span>'+timeLeft+'</span> Detik.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
//]]>
</script>

Thay 10 thành số giây bạn muốn.

Cách sử dụng

Hãy thay đổi https://blog.choipanwendy.com thành địa chỉ blog của bạn, bạn cũng có thể điều chỉnh loại file tên file kích cỡ của file ,...

<div class='downloadInfo'>
<span class='fileType' data-text='zip'></span>
<div class='fileName'>
<span class='textd'>file_name.zip</span>
<span class='fileSize'>200kb</span>
</div>
<a class='fileLink' aria-label='Download'><i class='icon download'></i></a>
</div>
<div class='wcTargetLink'>https://blog.choipanwendy.com</div>

Lời kết

Trên đây là toàn bộ cách tạo nút download có đếm thời gian, nếu có thắc mắc gì hãy comment xuống dưới. Chíc các bạn ngày làm việc hiệu quả!

About the Author

Founder và CEO tại Minh CRISTIANO Blog. Tại đây, mình sẽ chia sẻ một số kiến thức học tập, các phần mềm liên quan & các thông báo quan trọng của blog.

Đăng nhận xét

MỘT SỐ LƯU Ý KHI BÌNH LUẬN
- Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem Nội quy)

- Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

- Để bình luận kèm hình ảnh, bạn hãy vào trang Upload ảnh sau đó kéo thả để upload hình ảnh lên.

- Không spam trong khung bình luận, hạn chế viết tắt..
Cookie Consent
Chúng tôi cung cấp cookie trên trang web này để phân tích lưu lượng truy cập, ghi nhớ tùy chọn của bạn và tối ưu hóa trải nghiệm của bạn.
Xem chi tiết
Oops!
Có vẻ như đã xảy ra sự cố với kết nối internet của bạn. Vui lòng kết nối với internet và tiếp tục trải nghiệm của bạn.
AdBlock Detected!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng plugin chặn quảng cáo trong trình duyệt của mình.
Doanh thu chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý blog này, chúng tôi yêu cầu bạn đưa blog của chúng tôi vào danh sách bỏ chặn trong plugin chặn quảng cáo của bạn.
Site is Blocked
Xin lỗi ! Blog này không khả dụng ở quốc gia của bạn.