Bài viết này mình sẽ hướng dẫn tạo trang download cho Blogspot, với tính năng đếm ngược theo thời gian cài đặt sẵn, ẩn link an toàn không xuất hiện trong code JavaScript, HTML. CSS hay view-source cũng không ra phù hợp cho các blog chia sẻ các liên kết tải về. :D
 |
| Cách tạo trang download cho blogspot |
Bước 1: Bật Liên Kết Đính Kèm
Đầu tiên, bạn cần bật tính năng Đường liên kết tiêu đề và đính kèm trong phần cài đặt của blog của mình.
 |
| Cài đặt -> Đường liên kết tiêu đề và đính kèm |
Bước 2: Tạo Trang "Download" và Nhúng Mã HTML
Tạo một trang mới có tên là "Download" và chuyển sang chế độ soạn HTML. Sau đó, dán đoạn mã HTML dưới đây vào và lưu lại:
<style>
:root {--link-outline-color:#48525c;--link-bg-color:#204ecf;}
.button{display: inline-flex;align-items: center;margin: 15px 15px;padding: 10px 20px;outline: 0;border: 0;border-radius: 2px;color: #fefefe;background-color: var(--link-bg-color);font-size: 14px;white-space: nowrap;overflow: hidden;max-width: 100%;line-height: 2em}
.button.outline{color: var(--link-outline-color);background-color: transparent;border: 1px solid #ebeced}
.button.outline:hover{border-color: var(--link-bg-color)}
.safelink-button, .safelink-create > *{margin: 1.8em 0}
.safelink-button span{display: block;font-size: 12px}
#getLink{margin: 5px 0}
#getLink .button{display: none}
#getLink:target .button{display: inline-flex}
header .entry-header {display:none}
.hidden{display:none!important}.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}
#download-container{padding: 20px 0px;}
</style>
<a class="ads-here" href="#">Quảng cáo</a>
<div id="download-container">
<div class="loader"></div>
</div>
<a class="ads-here" href="#">Quảng cáo</a>
<div class="download-content">
</div>
<script>
// Lấy giá trị từ localStorage
var id = localStorage.getItem("copecuteToken");
var ariaLabel = localStorage.getItem("copecuteToken");
console.log(id);
console.log(ariaLabel);
var timer = 15;
if (id && ariaLabel) {
setTimeout(function() {
document.getElementById("download-container").innerHTML = "<div class='time-wrapper'><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'>15</span></p><div class='getlink-button'><div class='button outline' id='safelink-wait'>Please wait...</div></div></div>";
}, 1500);
// Thiết lập bộ đếm thời gian
var e = setInterval(function() {
// Hiển thị số đếm ngược
document.getElementById("timer-countdown").innerHTML = timer;
if (timer <= 0) {
clearInterval(e);
// Thực hiện yêu cầu GET AJAX để lấy liên kết tải về
var script = document.createElement('script');
script.src = "/feeds/posts/summary/" + id + "?alt=json&callback=handleResponse";
document.body.appendChild(script);
}
timer -= 1;
}, 1000); // 1000 milliseconds bằng 1 giây
} else {
setTimeout(function() {
document.getElementById("download-container").innerHTML = "<div class='time-wrapper'><p>Không tìm thấy thông tin tải về.</p></div>";
}, 1500);
}
// Hàm xử lý phản hồi JSONP
function handleResponse(response) {
if (response.entry) {
var get_link;
for (var t = 0; t < response.entry.link.length; t++) {
if (response.entry.link[t].rel === "enclosure" && ariaLabel === response.entry.link[t].type) {
get_link = response.entry.link[t].href;
break;
}
}
if (get_link) {
document.querySelector(".getlink-button").innerHTML = '<a href="' + get_link + '" target="_blank" rel="noopener nofollow" title="Get link">Get link</a>';
} else {
document.querySelector(".getlink-button").innerHTML = "<p>Không tìm thấy liên kết tải về.</p>";
}
} else {
document.querySelector(".getlink-button").innerHTML = "<p>Không có dữ liệu phản hồi.</p>";
}
}
</script>
Bước 3: Nhúng Mã HTML Phía Dưới Thẻ Đóng </body>
Sau đó, sao chép và dán toàn bộ đoạn mã bên dưới trước thẻ đóng </body> của trang và lưu lại:
<script>
//<![CDATA[
document.querySelectorAll('.post-download').forEach(button => {
button.addEventListener('click', function(event) {
const dlAriaLabel = this.getAttribute('aria-label');
const dlToken = this.getAttribute('name');
localStorage.setItem('copecuteAriaLabel', dlAriaLabel);
localStorage.setItem('copecuteToken', dlToken);
window.open("/p/download.html", "_blank")
})
});
//]]>
</script>
Bước 4: Chèn Mã HTML vào Chủ Đề của Blogspot
Trong phần Chủ Đề - HTML của blogspot, tìm thẻ <data:post.body/> và dán đoạn mã HTML sau dưới hoặc trên thẻ đó. Lưu ý có thể có nhiều vị trí, bạn cần thử và kiểm tra để chọn vị trí phù hợp:
<style>.down-enclosure{text-align: center;}.post-download{background-color: #D26E4B; color: #fff;}</style>
<b:loop index='i' values='data:post.enclosures' var='enclosure'>
<b:if cond='data:enclosure.mimeType'>
<div class='down-enclosure'><button class='post-download' expr:aria-label='data:enclosure.mimeType' expr:name='data:post.id' type='button'><data:enclosure.mimeType/></button></div>
</b:if>
</b:loop>
Lưu ý: Nếu blog của bạn chưa có thư viện jQuery, hãy thêm đoạn mã sau vào trước thẻ </head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Sau đó, bạn chỉ cần chèn liên kết tải về và chữ "download" như hình bên, mở mục "liên kết" ở phần bên phải khi đăng bài.
Đó là cách tạo trang download cho blogspot theo hướng dẫn trên, các bạn có thể xem demo cuối bài viết. Chúc bạn thành công!
Tags:
Blogger
