Nút Button Download Có Đồng Hồ Đếm Ngược Cho Blogger

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.


Nút Button Download Có Đồng Hồ Đếm Ngược Cho Blogger, button download cho blogspot

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>
Tiếp theo các bạn sao chép đoạn mã bên dưới vào trên </head>
<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>
Đó là cách tạo nút tải xuống cho blogspot, thân thiện seo, cải thiện seo cho blogger của bạn, giữ được khách truy cập trên blogger lâu hơn.

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

13 Bình Luận "Nút Button Download Có Đồng Hồ Đếm Ngược Cho Blogger"

  1. Trả lời
    1. Xoá bớt css vs html để nút down thôi sẽ gọn

      Xóa
  2. Hay đó mà cái bước 1 dán vào đâu bác :3

    Trả lờiXóa
  3. em add code trước body thì bị báo lỗi ở dòng này "if (waktu < 0) {"

    Trả lờiXóa
    Trả lời
    1. bạn add code trên defaultmarkups gần /body nhé

      Xóa
  4. Lỗi "The content of elements must consist of well-formed character data or markup."
    Sửa sao ạ.
    Em sử dụng template Đơn Giản của blogspot

    Trả lờiXóa