cách tạo đồng hồ đếm ngược download blogger

 Xin chào các bạn, nhân dịp này mình sẽ chia sẻ cách tạo đồng hồ đếm ngược lượt download Blogger 

Nếu bạn hiện đang quản lý một blog có chủ đề tải xuống, có thể nút tải xuống có đồng hồ đếm ngược này sẽ phù h ợp với your blog bạn.

What's the point? ôi đã chỉ định, chẳng hạn như 10 giây, trước khi liên kết tải xuống mở ra.

Bạn cũng có thể áp dụng tiện ích nút tải xuống này cùng với tập lệnh để đặt quảng cáo Adsense trước hoặc sau các thành ph ần nhất định nhằm hiển thị quảng cáo ở trên hoặc bên dưới nút tải xuống.

Cách tạo đồng hồ đếm ngược Tải xuống

truy cập blogger > chủ đề > chỉnh sửa html sao chép css bên dưới và and nó lên trên mã]]></b:skin>hoặc mã </style>

.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)} 

và cuối cùng sao chép đoạn javascript bên dưới và đặt nó lên trên đoạn mã</body>hoặc&lt;!--</body>--&gt;&lt;/body&gt;Nếu vậy thì đừng quên 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>

Hãy chỉnh lại phần mình đánh dấu số 10, 10 nghĩa là 10 giây link tải sẽ mở ra.

<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://www.mauthemeblog.com</div>

vậy là xong chúc mn thành công