Nếu bạn muốn thêm nút tải xuống-download với số đếm ngược thời gian vào bài viết trên trang web blogger có đường dẫn tải xuống nhưng không biết cách thêm thì hãy làm theo các bước hướng dẫn sau đây.Khi truy cập nhiều blog/web bạn có thể gặp các trang web có nội dung tải xuống sẽ bắt đầu sau 10-15 giây. Bạn phải đợi số giây như vậy trước khi xuất hiện link tệp bạn muốn tải xuống.
Loại tập lệnh này sử dụng tiện ích đồng hồ đếm ngược tải xuống do đó bạn cần đợi để tải xuống tệp được yêu cầu.Các blogger sử dụng hẹn giờ tải xuống để họ có thể kéo dài thời gian trên blog của khách truy cập và kiếm tiền từ những quảng cáo đi kèm.
Demo
Thêm nút tải xuống hẹn giờ đếm ngược trong bài đăng
Bước 1: Tìm kiếm ]]> và sao chép mã css bên dưới và dán mã đó ngay trên mã ]]>
.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}
.downloadInfo .fileLink{cursor:pointer}
.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 adjusts the class if it is different or removes this section */
.darkMode .downloadInfo{background-color:#252526; border:0}
.darkMode .downloadInfo .fileType{background-color:#1e1e1e)}
Bước 2: Sao chép đoạn javascript bên dưới và đặt nó ngay phía trên thẻ
<script>
/*<![CDATA[*/
var timeLeft = 15; //Set the time here
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='Please Wait <span>'+timeLeft+'</span> Sec.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
/*]]>*/
</script>
Cách thêm nút đồng hồ đếm ngược vào bài viết của blogger
Tại bên soạn thảo HTML của bài viết bạn dùng code sau:
<div class="downloadInfo"> <span class="fileType" data-text="zip"></span> <div class="fileName"> <span class="textd">file_name.zip</span> <span class="fileSize"> Dung lượng KB</span> </div> <a class="fileLink" aria-label="Download"><i class="icon download"></i></a> </div> <div class="targetLink">Link cần đến</div>
Leave a comment