Cách ẩn link tải hiệu quả và tạo trang chờ get link

Bạn đang có một Blog về chủ đề download tài liệu, phần mềm, theme,...nhưng bạn muốn ẩn link tải trong mỗi bài viết đã xuất bản. Thay vì khách truy cập đọc bài viết nhấp vào nút tải về để đến trang tải tệp bạn có thể thay đổi lại bằng kịch bản khi nhấp vào nút tải về sẽ chuyển đến trang tải về, tại đó bạn sẽ ấn định một khoảng thời gian chờ nhất định trước khi lấy được link tải.

Cách làm này vô cùng hiểu quả bởi 2 lý do chính sau đây:

1. Bạn ẩn được link tải vì nó không có sẵn trong bài viết, cũng không có trong script và thậm chí trong template và vì lý do đó người khác sẽ không thấy được khi view source trang của bạn.

2. Tạo thời gian chờ get link sẽ giúp bạn làm được các mục đích khác chẳng hạn như gắn quảng cáo, thống kê được lượng truy cập của trang đó,...

Phương pháp thực hiện cũng không khó với cách làm là bạn sẽ thêm link tải trong mục Liên kết đính kèm của bài viết và giấu nó trong nguồn cấp dữ liệu, chỉ khi ai cần tải nhấp vào nút tải về mới tải cái feed của bài viết đó lấy link tải. Cách làm này không qua mặt được những người am hiểu sâu về Blogger nhưng nó lại rất hiệu quả vì phần lớn người dùng không biết và sử dụng tính năng này.

Cách ẩn link tải hiệu quả và tạo trang chờ get link

Bước 1: Bật Liên kết đính kèm

Tùy chọn này không được bật sẵn khi tạo Blog mà bạn phải kích hoạt thủ công như sau: Các bạn truy cập phần Cài đặt của Blog > Khác > phía bên phải có mục Bật liên kết tiêu đề và liên kết đính kèm, nhấp chọn từ Không thành Có.

Bước 2: Thêm link tải và nút tải về trong bài viết

Khi soạn thảo bài viết mới hay chỉnh sửa lại bài viết đã xuất bản từ trước, các bạn chuyển qua bên phần HTML nằm trên góc trái, các bạn thêm nút tải về vào vị trí thích hợp như sau:

<button aria-label="Tải về" class="download" name="id bài viết" type="button">Tải về</button>

Với id bài viết là id của bài mà bạn đang soạn thảo hay chỉnh sửa, nó là một dãy số nằm ngay sau dòng postID= trên địa chỉ trình duyệt lúc bạn đang tạo hay chỉnh sửa bài viết, ví dụ postID=4866537110591374035 thì 4866537110591374035 là id bài viết cần lấy.

Khi thêm xong nút tải các bạn thêm link tải bên mục Liên kết bên phải, nhấp mở rộng ra các bạn sẽ thấy mục Liên kết đính kèm nó có 2 thẻ input với thẻ input ở trên thêm liên kết là link tải tệp và thẻ dưới thêm loại mime bằng text/html.

Bước 3: Tạo trang chờ get link

Trong bước này các bạn tạo một trang mới trong phần Trang thay vì Bài đăng, nội dung của trang này các bạn sao chép đoạn code dưới đây vào phần HTML của trang trên góc trái của phần soạn thảo bài viết

<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}
</style>

Các bạn đặt tên cho trang ví dụ là Download, Cảm ơn bạn đã tải về,...nhưng lấy tên ngắn thôi sau đó chọn Xuất bản trang mới. Tiếp theo các bạn mở trang mới này để lấy liên kết của trang ví dụ liên kết của trang có dạng: /p/download.html

Bước 4: Viết script

<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>

Các bạn thay link đến trang tải về /p/download.html bằng link trang của bạn. Trong đoạn script trên có link thư viện jquery, nếu như trong template đã có sẵn rồi, các bạn có thể bỏ link đó đi sau đó chọn Lưu chủ đề lại.

Như vậy với chỉ 4 bước thôi là bạn đã làm được điều mình mong muốn là ẩn link tải và tạo trang chờ get link. Ở phần tiếp theo mình sẽ viết mở rộng với trường hợp một bài viết có nhiều link tải