Demo – Button Download (Countdown) Cho Blogspot

Đây là bản demo trực tiếp cho tính năng Button Download có countdown mà bạn có thể tích hợp vào Blogspot.

Nhấn nút bên dưới để trải nghiệm thử. File mẫu sẽ tự động tải xuống sau 10 giây chờ nhé.

Dummy PDF file

Re-download

TruongDevs
File Size 13KB

Nếu không tự động tải xuống, hãy nhấp vào tải xuống lại. Và nếu liên kết bị hỏng, vui lòng báo cáo qua trang liên hệ của blog này.

// CSS Ready
function loadCSS(url, before, media) {
“use strict”;
var elem = window.document.createElement(“link”);
var ref = before || window.document.getElementsByTagName(“script”)[0];
elem.rel = “stylesheet”;
elem.href = url;
elem.media = “only x”;
ref.parentNode.insertBefore(elem, ref);
setTimeout(function() {
elem.media = media || “all”;
});
}
loadCSS(“https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”);

//<![CDATA[
function generate() {
var countdown, downloadElem = document.getElementById(“downloadx”),
buttonElem = document.getElementById(“btnx”),
downloadLink = document.getElementById(“downloadx”).href,
timer = 10,
displayElem = document.createElement(“span”);
downloadElem.parentNode.replaceChild(displayElem, downloadElem);
countdown = setInterval(function() {
if (–timer < 0) {
displayElem.parentNode.replaceChild(downloadElem, displayElem);
clearInterval(countdown);
window.location.replace(downloadLink);
downloadElem.style.display = “inline”;
} else {
displayElem.innerHTML = “ Tập tin sẽ sẵn sàng sau ” + timer.toString() + ” giây…”;
buttonElem.style.display = “none”;
}
}, 1000);
}
//]]>

/* Download Counter Box */
#btnx {
cursor: pointer;
padding: 10px 20px;
border: 0;
border-radius: 3px;
background: #fff;
color: #2e7ade;
float: right;
text-transform: capitalize;
font-weight: 500;
transition: all 0.5s;
}

#btnx:hover,
#downloadx:hover {
background: #82b5ff;
color: #fff;
outline: none;
}

.down-limit {
display: block;
margin: 0 auto;
border-radius: 4px;
/* Thêm gradient cho background */
background: linear-gradient(to bottom right, #2e7ade, #82b5ff);
}

.inner-down {
/* Thay đổi màu nền và màu chữ */
background: linear-gradient(to bottom right, #2e7ade, #82b5ff);
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;
}

.note-down {
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: #5777f9;
float: right;
text-align: center;
font-size: 14px;
text-transform: capitalize;
}

.info-wrapper span {
display: inline-block;
line-height: 38px;
float: right;
}

.file-description {
display: block;
}

.file-description span {
margin-right: 3px;
}

@media screen and (max-width:640px) {
.down-limit {
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;
}

.info-wrapper span {
float: none;
width: 100%;
text-align: center;
}

.file-description {
text-align: center;
}
}

Nếu bạn muốn xem hướng dẫn tạo Button Download (Countdown) chi tiết, bạn có thể xem Cách Tạo Button Download (Countdown) Đẹp Mắt Chuẩn Responsive Cho Blogspot
.