Bài viết trước mình có hướng dẫn các bạn Cách tạo nút Download đẹp cho Blogger, ở bài viết tiếp theo này mình sẽ hướng dẫn các bạn cách tạo button download có đếm ngược thời gian, nghĩa là bạn có thể đặt khoảng thời gian đợi trong bao lâu thì người dùng mới có thể tải xuống.
Bước 1: Truy cập vào Blogger > Mẫu (Template) > Chỉnh sửa HTML (Edit HTML)
Bước 3: Tìm đến trước thẻ đóng </body> và chèn đoạn JS bên dưới vào.
Đơn giản vậy thôi là bạn đã có một button download đếm ngược thời gian tải xuống cực đẹp rồi. Nếu có bất kỳ ý kiến đóng góp hoặc thắc mắc nào cần hỗ trợ, các bạn để lại bình luận bên dưới bài viết này nhé.
Tạo button download đếm ngược thời gian
Demo button download đếm ngược thời gian tải xuống
Bước 2: Tìm đến trước thẻ đóng ]]></b:skin> và chèn đoạn CSS bên dưới vào.
/* CSS download countdown by binhpro.com */
.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}
.TargetLink{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 by binhpro.com */
.darkMode .downloadInfo{background-color:#252526; border:0}
.darkMode .downloadInfo .fileType{background-color:#1e1e1e)}
<script>
//<![CDATA[
// Download countdown timer by binhpro.com
var timeLeft = 10;
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.TargetLink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Vui lòng chờ... <span>'+timeLeft+'</span> giây',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
//]]>
</script>
Bạn có thể chỉnh lại thời gian chờ tải xuống ở dòng var timeLeft = 10
Sử dụng button download trong bài viết
Khi viết bài viết, bạn muốn chèn nút Downoad vào bài viết chì chuyển qua chế độ soạn thảo HTML và dán đoạn HTML sau vào nơi bạn muốn hiển thị. Bạn chỉnh lại thông tin cho phù hợp nhé.<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='TargetLink'>https://www.binhpro.com</div>
Chúc các bạn thành công!
