Tạo trang chờ get link thay thế cho link rút gọn

Việc tạo trang chờ get link để download sẽ giúp cho bạn tối ưu được nội dung cho các tập tin chia sẽ trên trang web / blog của mình. Một lý do  nữa là nó có thể dùng để thay thế cho link rút gọn nếu các bạn không muốn phụ thuộc vào trang web bên ngoài khai thác nội dung của các bạn. Ví dụ nếu nội dung của các bạn cực tốt kèm với tập tin chia sẽ được nhiều người download về, các bạn có thể quản lý và khai thác ngay trực tiếp trên trang chờ này luôn



trang chờ get link để download
Mẫu trang chờ get link để download trông khá giống với một mẫu link rút gọn


















Nếu các bạn biết tùy biến một chút, trang chờ này sẽ không khác gì một link rút gọn mà các bạn từng tham gia. Thật tuyệt phải không?

{tocify} $title={Table of Contents}

1. Tạo một nút demo thử

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


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>
 



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>



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



Dán link chia sẽ và điền thể loại mime là text/html
Dán link chia sẽ và điền thể loại mime là text/html


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ẽ


Đế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.idbằ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

Ưu điểm nổi bật nhất của phương pháp này  là link chia sẽ được dấu đi trên feed post nên bắt buộc các user phải thông qua trang chờ mới tải được tập tin mình cần

Vậy là xong nhé. Nếu các bạn có thắc mắc gì hãy comment vào bên dưới mình sẽ giải đáp nhé

11 Nhận xét

✪★ Chèn link ảnh/video trực tiếp vào khung bình luận để hiển thị hình ảnh hay video cho phần nội dung.
✪★ Nếu tải file mẫu không được, vui lòng để lại nhận xét vào khung bình luận bên dưới để được hỗ trợ nhé .

  1. Sao mình làm mà chờ hết thời gian nhấn vào get link nó lại ra trang p/null không có gì cả?

    Trả lờiXóa
    Trả lời
    1. Hi bạn, Làm tuần tự theo các bước trên là được thôi nhé. Đơn giản chứ không phức tạp đâu á.
      Có lẽ bạn điền nhầm ở bước 3 rồi. Chỉnh lại là được thôi *-:) ~O)

      Xóa
    2. Nhận xét này đã bị tác giả xóa.

      Xóa
  2. Tại bước 3 mình chưa rõ làm như thế nào cả?

    Trả lờiXóa
    Trả lời
    1. Bước 3 bạn điền như hình bên dưới nhé:
      [img]https://1.bp.blogspot.com/-lfpXi9uVm-k/XvN5Bcw4-4I/AAAAAAAAGaU/yCD3rZfpD10dtDp2uW1n0unPHRf8Ifa5wCLcBGAsYHQ/s1600/tao%2Btrang%2Bcho%2Bdownload.png[/img]

      Xóa
  3. cho xin cách làm trên wordpress với bạn ơi

    Trả lờiXóa
    Trả lời
    1. Hi bạn, Làm trên wordpress mình chưa tìm hiểu nhưng nó cũng tương tự các bước như trên thôi. Bởi trên Wp làm còn dễ hơn trên blogspot nữa đó bạn.
      Chúc bạn làm thành công nhé 💙🌟🤩

      Xóa
  4. Hi bạn, hết thời gian chờ nó báo null, hình như không get được id bài viết

    Trả lờiXóa
    Trả lời
    1. Hi bạn, bạn kiểm tra tuần tự theo 4 bước như trên là được nhé.
      ID bài viết bạn lấy số cuối cùng trên thanh tab bar nhé
      Ví dụ:
      https://draft.blogger.com/blog/post/edit/6129383310615304214/3782787160308255479
      Thì bạn lấy id bài viết là: 3782787160308255479
      Chúc bạn làm thành công 🌟🤩

      Xóa
  5. Có cách nào nhấn vào cho nó ra trang mới không chồng trang cũ không bạn

    Trả lờiXóa
  6. HI bạn, mình chưa thử cách như bạn nói. nên vẫn sử dụng đoạn code mặc định đó bạn.
    Còn nếu bạn muốn khi click nhảy sang trang khác thì có thể chèn thêm đoạn code: target="_blank" xem sao nhé.
    Thông tin đến bạn và cám ơn nhiều nhé 👍🏼😊

    Trả lờiXóa
Mới hơn Cũ hơn