Nút download đếm ngược thời gian chờ hiện link tải trên blogspot

Hôm nay www.net281.com sẽ hướng dẫn các bạn thêm code để tạo nút download đếm ngược thời gian chờ hiện link tải nhé !

Ngoài ra bộ code này có thể thay thế cho chuyển tiếp từ website này sang website khác, mình sẽ nói rõ ở Bước 2.

Bộ code này chủ yếu dành cho blogger - blogspot.

Bước 1 : Thêm code CSS
 

Thêm đoạn code css dưới đây vào trước thẻ đóng ]]></b:skin>
 

/*---- nut download dem nguoc ----*/
.post-body a.button{display:inline-block;height:34px;background-color:#1f72c5;font-size:14px;color:#ffffff;font-weight:400;line-height34px;text-align:center;text-decoration:none;cursor:pointer;padding:0 20px;margin:0 6px 8px 0}
.post-body a.colored-button{color:#fff}
.post-body a.button:hover{background-color:#f47500;color:#fff}
.post-body a.colored-button:hover{background-color:#f47500!important;color:#fff!important}
ascolor {color: red;font-size: 1.4em}
astext {font-weight: bold;font-family: var(--font-body-alt)}
/*---- end nut download dem nguoc ----*/

Bước 2 : Thêm code JS

Thêm đoạn code javascript dưới đây vào trước thẻ đóng </body>

<!-- download button --> 

<script src='https://cdn.jsdelivr.net/gh/thietkeblogspot/js/contact-buttons-widget.min.js'/>

 <script type='text/javascript'> 

 //<![CDATA[ 

 var downloadButton = document.getElementById("download"); 

 var counter = 20; 

 var newElement = document.createElement("p"); 

 newElement.innerHTML = ""; 

 var id; 

 downloadButton.parentNode.replaceChild(newElement, downloadButton); 

 function startDownload() { 

 this.style.display = 'none'; 

 id = setInterval(function() { 

 counter--; 

 if (counter < 0) { 

 newElement.parentNode.replaceChild(downloadButton, newElement); 

 clearInterval(id) 

 } else { 

 newElement.innerHTML = "<astext>Link tải sẽ hiển thị sau <ascolor>" + counter.toString() + " </ascolor>giây nữa.<br/>Thanks for waiting !</astext>"

 }

 }, 1000) };

 var clickbtn = document.getElementById("btn"); 

 clickbtn.onclick = startDownload;

 //]]> 

</script>

<!-- end download button -->

Trong đó : var counter = 20; là số giây đếm ngược. bạn có thể thay đổi tuỳ ý.

Ngoài ra nếu chuyển tiếp từ website A sang website A+ hoặc B thì thay chỗ "Link tải sẽ hiển thị sau" thành bất cứ thứ gì bạn thích nhé !

Bước 3 : Thêm code nút download

Thêm đoạn code dưới đây vào bài viết hoặc vị trí bất kỳ muốn hiển thị nút download.

<div class="separator" style="clear: both; text-align: center;"> 

<center><a class="button" href="link download" id="download" target="_blank" rel='nofollow'><i class="icon download"></i> click here to download </a>

    <a class="button" id="btn"><i class="icon download"></i>Download</a></center>

</div>

link download các bạn thay = link của bạn nhé ! hoặc thay bằng bất kỳ link chuyển tiếp nào mà bạn muốn !

Bạn cũng có thể thay thế click here to download và Download thành từ ngữ mà bạn muốn miêu tả nhé !.

Download hoặc Chuyển tiếp qua www.net281.com DEMO

CẢM ƠN CÁC BẠN ĐÃ THEO DÕI BÀI VIẾT !