Hôm nay Tintuc247 sẽ hướng dẫn cho các bạn các để hẹn giờ nút tải xuống cho website hoặc blogspsot nhé,trước tiên ta cần tìm hiểu xem nó là gì cái đã :))).Hẹn giờ nút tải xuống bật lên là một nút trên trang web hoặc blog được sử dụng để giữ chân người xem trước khi người dùng chuyển đến liên kết đích.
Cách thức hoạt động của nút này gần giống như nút tải xuống hẹn giờ khác, ngoại trừ nút tải xuống bật lên hẹn giờ vẫn còn. Tình huống là khi khách truy cập muốn tải xuống một tệp nhất định trên blog, họ sẽ đợi một bộ đếm thời gian nhất định từ blog trước khi cuối cùng chuyển đến liên kết tải xuống tệp.
Có nhiều lợi ích có thể nhận được từ phiên bản nút tải xuống cửa sổ bật lên hẹn giờ này, một số trong số đó là:
- Không cần tạo trang mới
- Dễ dàng thêm nút & tùy chỉnh
- Đi vào bài viết chính
- Giảm tỷ lệ thoát của bài viết chính
- Sau khi bạn thêm nút này vào bài đăng của mình hoặc trên trang blogger của bạn và nhấp vào nút, một cửa sổ bật lên sẽ xuất hiện và cửa sổ này sẽ chứa thời gian đã chỉ định. Nếu hết thời gian, nút tải xuống sẽ xuất hiện và bạn có thể nhấp vào nút đó.
Hướng dẫn về nút tải xuống hẹn giờ bật lên trên blog chính
Hướng dẫn này sẽ có một phần, Đầu tiên chúng ta sẽ chỉnh sửa mã nguồn hoặc mã blog. Mình sử dụng blogger vì hướng dẫn này cũng được ưu tiên cho người dùng blogger, những người dùng dịch vụ khác cũng có thể thích ứng với hướng dẫn này.
Thêm một số mã CSS và Javascript
Chú ý là phần này sẽ hơi phức tạp, các bạn xem kỹ vì nếu sai dù chỉ một chút thì nút download pop hẹn giờ sẽ không hoạt động
Trước hết, vui lòng chỉnh sửa mẫu của bạn ở chế độ ' chỉnh sửa HTML '. Tóm lại, bạn hãy click vào theme và click vào chỉnh sửa html như hình bên dưới; Nếu bạn cần sao lưu mẫu của mình trước để tránh chỉnh sửa nhầm.
DemoThêm mã CSS
Mã CSS này dùng để hiển thị bố cục trên bài viết để hiển thị nút bật lên hẹn giờ.
Trong Blogger, mã CSS được đánh dấu bằng thẻ <b:skin>...</b:skin> . Nếu gặp khó khăn trong việc đặt mã CSS ở trên, bạn có thể tìm mã </head> và đặt mã CSS ngay phía trên mã </head> , với lưu ý rằng bạn phải sử dụng mã <style>...</style> . Kết quả là như thế này:
<style> <!--[ Code hiển thị ở đây ]--> </style> </head>
Đôi khi code </head> không được tìm thấy trong một số mẫu nhất định , thay vào đó bạn tìm code như sau: </head> ; hoặc <!--<head/>--></head>
<b:if cond='data:view.isPost'>
<!-- Pupup download by CodehayVN -->
<style>
#button-download{display:inline-flex;display:-webkit-inline-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;align-items:center;-webkit-align-items:center;margin-bottom:10px;padding:9px 20px;border-radius:10px;font-size:.8rem;line-height:1.3rem;background-color:#fdd929;color:#ff2121}
.adpop-top{height:40px;width:100%;border-bottom:1px #E5E5E5 solid}
.btn-at{display:block;height:50px;color:#fff!important;font-size:18px;text-transform:uppercase;background:#f3a;text-align:center;line-height:50px;width:200px;margin:12px auto;transition:all 0.4s ease-in}
[data-ml-modal]{position:fixed;top:0;bottom:0;left:0;right:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:999;width:0;height:0;opacity:0}
[data-ml-modal]:target{width:auto;height:auto;opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}
[data-ml-modal]:target .modal-overlay{position:fixed;top:0;bottom:0;left:0;right:0;cursor:pointer;background-color:#000;background-color:rgba(0,0,0,0.7);z-index:1}
[data-ml-modal] .modal-dialog{border-radius:6px;box-shadow:0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12);position:relative;width:90%;max-width:660px;max-height:70%;margin:10% auto;overflow-x:hidden;overflow-y:auto;z-index:2}
[data-ml-modal] .modal-content{background:#fff;padding:23px 27px}
@media (max-width:767px){[data-ml-modal] .modal-dialog{margin:20% auto}}
.ad-pop__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer}
</style>
</b:if>Mã Javascript để mã hóa url
Cách dễ nhất để đặt mã javascript là đặt code trước thẻ </body> . Tìm thẻ thường ở cuối mẫu và dán mã Javascript bên dưới ngay trước thẻ </body>.
<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
var downloadButton = document.getElementById("button-download"); var counter = 20; var newElement = document.createElement("span"); newElement.innerHTML = "Please Wait 20 sec"; 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 = "Please Wait" + " " + counter.toString() + " " + " sec.... "; } }, 1000); }; var clickbtn = document.getElementById("get-download"); clickbtn.onclick = startDownload;
//]]>
</script>
</b:if>
Thay đổi phần đã được đánh dấu trong mã ở trên bằng url của nút tải xuống bật lên hẹn giờ của bạn.Sau khi bạn thêm mã thì nhớ bấm lưu mẫu.Để sử dụng thì bạn tạo bải đăng mới,chọn chế độ xem HTML, sau đó sao chép mã bên dưới và đặt mã đó vào bài đăng hoặc trang mà bạn muốn thêm nút tải xuống cửa sổ bật lên hẹn giờ:
<p style="text-align: center;"><a class="button" href="#PopupDownload" id="get-download">Download</a></p>
<div data-ml-modal="" id="PopupDownload">
<div class="modal-overlay"></div>
<div class="modal-dialog">
<div class="modal-content center">
<div class="adpop-top">
<h2 style="margin: 0px;">Download Your file</h2>
<div class="ad-pop__close" onclick="document.getElementById("PopupDownload").style.display="none""><svg style="height: 25px; width: 25px;" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path></svg></div>
</div>
<br />
<div style="width: 660px;">
<!-- ads here -->
<ins class="adsbygoogle" data-ad-client="ca-pub-#################" data-ad-format="horizontal" data-ad-slot="########" data-full-width-responsive="false" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<br />
<a class="button" href="url_here" id="button-download">Download File</a>
</div>
</div>
</div>Thay đổi phần đã được đánh dấu trong code trên bằng url của nút tải xuống bật lên hẹn giờ của bạn và mã quảng cáo.
Lời kết
Đến đây, nút tải xuống cửa sổ bật lên hẹn giờ của bạn đã được tạo hoàn chỉnh, nếu bạn thực hiện đúng tất cả các bước thì có thể đảm bảo nút tải xuống cửa sổ bật lên hẹn giờ hoạt động tốt.Nếu có thắc mắc gì liên hệ mình dưới phần bình luận bài viết nhá :3 =)))))))