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ả!

Tham khảo

https://blog.choipanwendy.com/