Demo cho các bạn xem trước nó như thế nào nhé:
Mình đi thẳng vào nội dung chính luôn để các bạn khỏi phải chờ lâu. Để tạo được một trang chờ download như thế, Các bạn chỉ cần làm tuần tự theo 4 bước như sau là được thôi
Chuyển sang html và chép hết đoạn code bên dưới vào rồi lưu lại
Lưu ý:
-Nếu bạn đặt tên trang khác thì thay dòng : /p/download.html'
-Chỉnh thời gian chờ 15s thành con số mong muốn của bạn
Lúc này các bạn chỉ cần điền hai mục như trên thôi:
Đến bước này là gần như bạn đã hoàn thành việc tạo trang chờ download nữa thôi. Điều này cực kỳ tiện lợi ở chỗ là bạn chỉ cần tạo một lần như vậy thôi, là các bạn có thể dùng cho bất cứ bài đăng nào khác nhau nhé
Khi các bạn đã làm thành công rồi, thì các bạn có thể tùy chỉnh thêm một vài thông tin cho hợp với trang web/ blog của các bạn
Mình đi thẳng vào nội dung chính luôn để các bạn khỏi phải chờ lâu. Để tạo được một trang chờ download như thế, Các bạn chỉ cần làm tuần tự theo 4 bước như sau là được thôi
2. Tạo một page mới và đặt tên download
Chuyển sang html và chép hết đoạn code bên dưới vào rồi lưu lại
<div class="time-wrapper hidden">
<b>Tập tin chia sẽ đã sẵn sàng. Quá trình tải xuống của bạn sẽ bắt đầu sau giây lát!</b><br />
<span id="timer-countdown">0</span><br />
<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}
</style>
<b>Tập tin chia sẽ đã sẵn sàng. Quá trình tải xuống của bạn sẽ bắt đầu sau giây lát!</b><br />
<span id="timer-countdown">0</span><br />
<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}
</style>
3. Chèn đoạn code bên dưới vào trước thẻ đòng </body>
<!-- download -->
<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;
document.querySelector('.getlink-button').innerHTML = '<a href=' + 'get_link' + ' rel="noopener nofollow" title="Get link">Get link</a>';
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>
<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;
document.querySelector('.getlink-button').innerHTML = '<a href=' + 'get_link' + ' rel="noopener nofollow" title="Get link">Get link</a>';
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>
Lưu ý:
-Nếu bạn đặt tên trang khác thì thay dòng : /p/download.html'
-Chỉnh thời gian chờ 15s thành con số mong muốn của bạn
4. Dán link hay tập tin cần chia sẽ vào phần liên kết đính kèm
Lúc này các bạn chỉ cần điền hai mục như trên thôi:
- -Thêm liên kết: Dán link chia sẻ vào
- -Thêm loại mime: text/html
5. Đặt đoạn code bên dưới vào nơi cần chia sẻ
Xem Domo thành quả cài đặt : http://shop.stockdep.com/p/download-free.html
Đến bước này là gần như bạn đã hoàn thành việc tạo trang chờ download nữa thôi. Điều này cực kỳ tiện lợi ở chỗ là bạn chỉ cần tạo một lần như vậy thôi, là các bạn có thể dùng cho bất cứ bài đăng nào khác nhau nhé
Khi bạn viết bài có mục chia sẽ download, bạn chuyển sang chế độ html và chèn đoạn code bên dưới vào vị trí cần chèn cho độc giả vào nhấn tải về
<button aria-label="Tải về" class="download" name="data:post.id" type="button">Tải về</button>
Lưu ý nhỏ:- - Thay "data:post.id" bằng số bài đăng các bạn đang viết, bằng cách tìm trên thanh tab bar trên cùng nhé
- -Có thể đặt tên thích hợp bằng cách thay đổi: "Tải về" bằng "download tại đây",...để phù hợp với bài đăng của các bạn nhé
Khi các bạn đã làm thành công rồi, thì các bạn có thể tùy chỉnh thêm một vài thông tin cho hợp với trang web/ blog của các bạn
Tags:
Blogger