Nút Button Download Có Đồng Hồ Đếm Ngược Cho Blogger hay được gọi là button Countdown Timer sau mấy ngày hóng hớt google bây mình sẽ chia sẻ cho các bạn cách tạo nút button download cho blogspot mà còn chờ tải gian tải khi người dùng nhấn tải xuống.
Việc có một button download cho blogspot chờ thời gian download rất thuận lợi cho seo vì giữ được khách hàng online trên blogger của mình. Mặc dù phong cách chỉ đơn giản, nhưng mình đã chỉnh sữa làm cho nó với các tính năng khá hoàn chỉnh và bài viết này cũng lấy cảm hứng từ các trang download khác.
Chính vì vậy hôm nay mình sẽ hướng dẫn các bạn cách tạo button download và button demo cho blogspot / blogger vô cùng đơn giản và rất dể cài đặt cho blog của bạn một Button Download Có Đồng Hồ Đếm Ngược.
Cách Cài Đặt Nút Button Download Cho Blogger
Đầu tiên hãy vào blogger >> Chủ đề >> Chỉnh sửa HTML. Sau đó,rồi thêm code sau đây trước </body><script type='text/javascript'>function generate() {
var linkDL = document.getElementById("download"),
btn = document.getElementById("btn"),
direklink = document.getElementById("download").href,
waktu = 10;
var teks_waktu = document.createElement("span");
linkDL.parentNode.replaceChild(teks_waktu, linkDL);
var id;
id = setInterval(function () {
waktu--;
if (waktu < 0) {
teks_waktu.parentNode.replaceChild(linkDL, teks_waktu);
clearInterval(id);
window.location.replace(direklink);
linkDL.style.display = "inline";
} else {
teks_waktu.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> " + "Tệp đã sẵn sàng để tải xuống sau " + "" + waktu.toString() + " Giây....";
btn.style.display = "none";
}
}, 1000);
}</script><style type='text/css'> /*ZaloSec*/ #btn{cursor:pointer;padding:10px 20px;border:none;border-radius:3px;background:#fff;color:#FE634A;float:right;text-transform:uppercase;font-weight:700} #btn:hover, a#download:hover{background:#BC4634;color:#fff;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;} .paling-jobo{display:block;width:60%;margin: 20px auto;border-radius:4px;font-family:'PT Sans Narrow', sans-serif} .bungkus-down{background:#FE634A;color:#fff;padding:10px 20px;display:block;border-top-right-radius:3px;border-top-left-radius: 3px;} .file-info{color:#fff;display:inline-block;font-size:1.3em;line-height: 38px;text-align:left} .catatan-sikil{padding:10px 20px;background:#EAEBED;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555} #download{float:right} a#download{padding:10px 20px;border-radius:3px;background:#fff;color:#FE634A;float:right;text-transform:uppercase;font-weight:700;text-align:center} .embuh span{display:inline-block;line-height: 38px;float:right} .iklan-down{float:right;width:40%;padding-left:10px;margin:20px 0;text-align:right} .file-deskripsi{display:block} .file-deskripsi span{margin-right:3px} .iklan-ngisore, .iklan-duwure{display:block;width:100%;margin:0 auto} h2.entry-title{margin-top:10px} .post-labels, .post-timestamp{display:none} a.home-link{color:#555;font-size:20px;} a.home-link:hover{color:#222} @media screen and (max-width:600px){ .paling-jobo{float:none;width:100%} .iklan-down{float:none;width:100%;text-align:center;padding:0} } @media screen and (max-width:320px){ /* CSS styles */ .file-info{display:block;text-align:center} #btn, a#download{width:100%;margin-bottom:10px} .embuh span{float:none;width:100%;text-align:center} .file-deskripsi{text-align:center} } </style>
Bạn có thể chỉnh sữa màu sắc cho phù hợp với sở thích của bạn để làm nút button cho blogspot đẹp hơn.
Sau đó các bạn vào bài đăng => qua phần html và thêm đoạn html này vào bài viết
<div class="paling-jobo">
<div class="bungkus-down">
<div class="embuh">
<div class="file-info">
ZaloSec 1.2.3.apk
</div>
<button onclick="generate()" id="btn"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download</button>
<a id="download" href="https://megaupload.pw/c61b0192b94fec92/[ZALOSEC.COM]-Lọc_Bạn_Bè.txt" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download Lại</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> Đoàn Xuân Bít</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
File Size 100MB</span>
</div>
</div>
<div class="catatan-sikil">
Nút Button Download Có Đồng Hồ Đếm Ngược Cho Blogger
</div>
</div>
Nếu các bạn muốn cho xuất hiện thêm icon Awesome và Font chừ thì thêm đoạn này vào bên trên </body>
<script> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700"); //]]> </script>
ZaloSec 1.2.3.apk
Đoàn Xuân Bít File Size 100MB
Nút Button Download Có Đồng Hồ Đếm Ngược Cho Blogger
