Chào các bạn, chào mừng bạn quay lại với TECHPLUS - trang chia sẻ các thủ thuật Internet. Mấy hôm nay long vòng các trang để tìm cách tạo một trang chờ download get link cho trang Blogger của mình. Mục đích của mình là cần làm 1 trang chuyển hướng để chờ link download xuất hiện và có thời gian chờ đếm ngược.
{tocify} $title={Table of content}
Đọc tới đọc lui, làm đi làm lại cái trang chờ download. Mỗi bài hướng dẫn có cái hay của nó, nhưng nó không thỏa mãn được yêu cầu của mình đưa ra. Thế là mình đành tự mò và kết họp của chỗ này 1 chút, chỗ khác 1 chút để tạo ra một trang mà có thể nói là rất ưng ý. Vừa đảm bảo dấu được link, vừa có dao diện đẹp. Bạn có thể xem demo trước khi quyết định làm theo cách của mình nhé. Chứ như mình đọc xong ngồi làm, làm xong không được như ý thì mất thời gian. (Nhớ bấm vào nút Download cuối trang để nó chuyển sang trang chờ nhé)
{getButton} $text={Xem DEMO} $icon={preview} $color={Hex Color}
Cách tạo trang chờ download get link cho Blogger [2021]
OK. Chúng ta cùng bắt tay vào làm nhé. Các bước thực hiện chi tiết như sau:
Bước 1: Tạo một trang mới và đặt tên là download.html.
Copy đoạn code bên dưới và dán vào rồi bấm Lưu (Save) nhé
<div class='time-wrapper hidden'>
<p><b>Quá trình tải xuống của bạn sẽ bắt đầu sau giây lát!</b></p>
<p><span id="timer-countdown">0</span></p>
<div class="getlink-button"></div>
</div>
<style>
.hidden{display:none!important}
p{margin:0}
p,.getlink-button,.time-wrapper{text-align:center}
.getlink-button a{background:#6dab3c;border:1px solid #6dab3c;position:relative;color:#ffffff;font-size:14px;display:inline-block;padding:7px 20px;min-width:70px;border-radius:3px}
#timer-countdown{margin:25px 0 30px 0;display:inline-block;border-radius:100%;width:120px;height:120px;line-height:120px;color:#33b5e5;border-radius:50%;border:2px solid #33b5e5;font-size:60px;font-weight:100}
.time-wrapper{margin-top: 20px;margin-bottom: 20px;border-top: 2px solid cadetblue;padding-top: 10px;border-bottom: 2px solid cadetblue;padding-bottom: 10px;}
</style>{codeBox}
Bước 2: Mở chỉnh sửa giao diện.
Copy đoạn code bên dưới vào trong theme đặt phía trước thẻ </body> nhé:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>//<![CDATA[
$('.download').click(function() {
var id_sp = $(this).attr('name');
localStorage.setItem('luu_id', id_sp);
$.ajax({
type: 'GET',
url: '/feeds/posts/summary/' + id_sp,
data: {
'alt': 'json'
},
dataType: 'jsonp',
success: function(k) {
if (k.entry) {
for (var c = 0; c < k.entry.link.length; c++) {
if ("enclosure" == k.entry.link[c].rel) {
if ("text/html" == k.entry.link[c].type) {
var get_link = k.entry.link[c].href;
localStorage.setItem('luu_get_link', get_link);
}
}
}
}
}
});
var url_tv = '/p/download.html';
setTimeout(function() {
location.href = url_tv;
}, 1000);
});
var id = localStorage.getItem('luu_id')
var get_link = localStorage.getItem('luu_get_link');
var timer = 15;
if (id) {
document.querySelector('.time-wrapper').classList.remove('hidden')
var downloadTimer = setInterval(function() {
document.getElementById('timer-countdown').innerHTML = timer;
timer -= 1;
if (timer <= 0) {
clearInterval(downloadTimer);
document.getElementById('timer-countdown').innerHTML = '0';
document.querySelector('.getlink-button').innerHTML = '<a href=' + get_link + ' target="_blank" rel="noopener nofollow" title="Get link">Get link</a>';
}
}, 1000)
}
//]]></script> {codeBox}
Thay /p/download.html bằng đường dẫn của link trang download mà bạn tạo ở bước 1. Thay số 15 là số giây mà người dùng chờ để lấy link.
Bước 3: Copy đoạn Css bên dưới rồi dán vào trước thẻ ]]></b:skin>
.downloadbtn{text-align:center; margin-top: 20px; margin-bottom: 20px;border: dotted;padding-top: 15px;padding-bottom: 15px;background: whitesmoke;}
.downloadbtn a.button:hover {background-color: #ff3d00!important;}{codeBox}
Bước 4: Kiểm tra lại blogger của bạn đã có thư viện Font Awesome và thư viện jQuery hay chưa, nếu chưa thì thêm trước thẻ </head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>{codeBox}
Bước 5: Bật liên kết đính kèm:
- Đặt đoạn code bên dưới vào trong bài viết nơi bạn muốn hiển thị nút DOWNLOAD. Trong đoạn code này bạn cần để ý thay cái ID bài viết nhé. ID bài viết này nằm trên thanh trình duyệt khi bạn soạn bài viết á.
<div class="downloadbtn">
<p>Trước khi bấm nút tải về. Bạn hãy ủng hộ mình 1 subscribe cho kênh <a href="https://www.youtube.com/channel/UCQqe0oIFGXKilgqkwv05LFQ?sub_confirmation=1"><i class="fab fa-youtube"></i> Youtube</a> của mình nhé. Thanks all!</p>
<a class="button download" name="ID bài viết" style="background-color: #2980b9;">Download</a>
</div>{codeBox}
- Ở khung soạn bài viết bên phải. Bạn bấm vào liên kết. Ở mục liên kết đính kèm có 2 dòng: Thêm đường liên kết; Nhập vào link của file/ tài liệu mà người dùng sẽ nhận được sau khi chờ hết thời gian. Còn dòng thêm loại mime thì nhập text/html. Xem hình bên dưới cho dễ hiểu nhé.
OK. Vậy là sau một hồi lằng nhằng thì cũng xong. Tận hưởng thành quả của bạn nhé. Mình không rành về code đâu chỉ là lấy mỗi chỗ một ít về làm cho mình thôi. Nên nếu có gì các bác lượng thứ nhé. Còn các bạn làm vướng ở đâu hãy comment bên dưới nếu giải được thì mình giải cho.
