Tạo button Download có đếm số (countdown) chuẩn responsive cho Blogger

Anh Trai Nắng
15

Tìm kiếm trên Google thì có rất nhiều trang chia sẻ cách tạo Button DemoDownload rất nhiều nhưng hầu như không có ai chia sẻ Button Download có đếm số (countdown) cả. Nay mình lang thang tìm được Button Download đẹp này nên share lại cho các bạn tiện sử dụng.

Tạo button Download có đếm số (countdown) chuẩn responsive cho Blogger
Button Download có đếm số cho Blogspot.

Cái hay của Button này là khi các bạn click vào nút TẢI VỀ là nó sẽ hiển thị đếm số ngược (countdown) và tự động chuyển đến link download của bạn khi hết thời gian đếm số. Sử dụng ở mọi Template.

Không dài dòng nữa bây giờ mình tiến hành chia sẻ code blogspot cho các bạn luôn

(getButton) #text=(Xem Demo) #icon=(link) #color=(#2339bd)

Button Download Countdown Responsive Blogspot

Code CSS

/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#0090b8;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#000000;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:linear-gradient(to bottom right, DarkCyan, MediumSpringGreen);color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}

Code Javascript

<script type="text/javascript">
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=6,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> File Is Downloading Please Wait "+l.toString()+" Sec....",t.style.display="none")},1e3)}
//]]>
</script>

Code HTML chèn vào bài viết

<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info"><i aria-hidden="true" class="fas fa-file-download"></i>
<b>File Download</b> <i aria-hidden="true" class="fas fa-chevron-circle-right"></i></div>
<button id="btnx" onclick="generate()" target="_blank"><i aria-hidden="true" class="fa fa-cloud-download"></i> <b>TẢI VỀ</b></button> <a href="link-download" id="downloadx" style="display: none;" target="_blank">Downloading</a><div style="text-align: left;">
File Size: x MB. No ADS</div></div></div></div>

Lời kết

Với 3 đoạn code không quá khó trên thì việc tạo một button Download có đếm số (countdown) chuẩn responsive cho các Blogger là hết sức dễ dàng đúng không nào. Chúc các bạn thành công, nếu có thắc mắc hay đóng góp gì thì comment ở dưới nhé!

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

15 Nhận xét

  1. Đoạn css kia mình mod màu mà ta :v

    Trả lờiXóa
  2. Anh zai qua thăm Blog em nhé 😂😂😂
    www.tranthangit.tk

    Trả lờiXóa
  3. ad ơi lm sau vs 1 code java mà sử dụng đc nhiều button trong 1 bài đăng v

    Trả lờiXóa
    Trả lời
    1. javascript thì bạn phải chèn trong template chứ, chèn trên thẻ /head

      Xóa
  4. chèn như thế nào mới đung v ad

    Trả lờiXóa
  5. Anh ơi, Update thêm cái mũi tên ở cái File Download khi bấm vào nó có nội dung chi tiết của File đi ạ, em cảm ơn

    Trả lờiXóa
    Trả lời
    1. cái này thêm title vào chỗ icon là ok à, để rãnh mình thêm vào nhé, dạo này hơi bận nhiều việc

      Xóa
Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu