tao-nut-download-co-em-thoi-gian-cho-blogger

 Xin chào các bạn, lâu rồi mình không qua blog này để viết bài nên hôm nay sẽ chia sẻ cho các bạn tạo nút download có đếm thời gian. Nếu blog bạn là blog chia sẻ file, template blogspot thì đây là một thủ thuật tuyệt vời.

Cách Hoạt Động Của Nút Download Có Đếm Thời Gian

Khi khách truy cập ấn vào nút Download, nó sẽ chạy Javascript và khách truy cập phải đợi trong một khoảng thời gian (Tùy vào người quản trị web thiết lập) mới đi đến link download. 

Nó cũng giống như safelink nhưng sẽ không chuyển qua trang mới. Bạn đừng lo, nó sẽ không làm ảnh hưởng đến tốc độ load của blog đâu.

Demo (Chọn 1 trong các bài viết sau nhé)

Demo

Cách Tạo Nút Download Có Đếm Thời Gian Cho Blogger

Để tạo nút download có đếm thời gian rất đơn giản, các bạn hãy làm theo các bước sau đây.

1. Truy cập vào Blogger.com.

2. Chọn Chủ đề và vào Chỉnh sửa HTML.

3. Thêm CSS Cho Nút Download.

Để thêm CSS, hãy tìm đến thẻ ]]></b:skin> và dán vào trên thẻ đó.

/* Download Button */
:root {
--download-info-color: #fefefe;
--download-info-color-type: #f1f1f0;
--download-info-color-a: #f09800;
--darkmode-download-info-color: #252526;
--darkmode-filetype-color: #1e1e1e;
}
.downloadInfo{max-width:500px;background-color: var(--download-info-color); 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: var(--download-info-color-type);border-radius:10px}
.downloadInfo a{background-color: var(--download-info-color-a);color: var(--download-info-color); 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}
.theTargetLink{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 nếu blog bạn không hỗ trợ thì xóa cũng được */
.darkMode .downloadInfo{background-color: var(--darkmode-download-info-color); border:0}
.darkMode .downloadInfo .fileType{background-color: var(--darkmode-filetype-color)} 

Ngoài ra, bạn có thể thêm ở trên thẻ </head>, hãy thêm như sau nhé.

  <style>
    <!--[ Thay Thành CSS ]-->
  </style>
</head>

4. Thêm JavaScript để nút download có thể đếm.

Để cho nút download đếm thời gian được thì bạn không thể thiếu JavaScript, hãy thêm JavaScript này vào trên thẻ </body>.

<script type='text/javascript'>
var timeLeft = 10; // set the time here /** time in seconds **/
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.theTargetLink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Please wait <span>'+timeLeft+'</span> Seconds',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
</script>

Thay thế 10 thành thời gian cần chờ

5. Ấn Lưu chủ đề để hoàn thành.

Làm Thế Nào Để Sử Dụng Nút Download Có Đếm Thời Gian

Sau khi hoàn tất các bước trên, việc còn lại để sử dụng rất đơn giản. Khi đăng bài và chèn nút download, các bạn chỉ cần chuyển qua Chỉnh sửa HTML và copy HTML nút download dán vào nơi cần đặt.

<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='theTargetLink'>link download</div>

Thay thế các phần được bôi đen thành của các bạn.

Kết Luận

Vậy là mình đã hướng dẫn cho các bạn cách Tạo Nút Download Có Đếm Thời Gian Cho Blogger rồi, đừng quên để lại bình luận phía dưới nếu có vấn đề gì nhá. Pái Pai.