Tạo trang download nhiều get link cho blogspot

Bài này mình hướng dẫn các bạn tạo một trang download nhiều get link cho blogspot, bài trước Tạo trang download get link cho blogspot các bạn có thể xem lại.

Tạo trang download nhiều get link cho blogspot
Thời gian chờ get link

Tạo trang download nhiều get link cho blogspot

Mặc định bài này mình code sẵn 3 link là: Fshare, Google Driver, Mediafire. Bạn nào muốn thêm nhiều trang khác thì tự khai báo thêm các code bên dưới.

Tương tự cách cài đặt như bài Tạo trang download get link cho blogspot các bạn có thể xem lại.


Bước 1: Các bạn vào mục Trang tạo một trang tên là Download và copy toàn bộ code bên dưới dán vào bên trong (lưu ý là dán ở chế độ HTML)



<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>
<script>
  var id = localStorage.getItem("post_id"),
    get_link = localStorage.getItem("download_link"),
    timer = 20;
  if (id) {
    document.querySelector(".time-wrapper").classList.remove("hidden");
    var downloadTimer = setInterval(function() {
      document.getElementById("timer-countdown").innerHTML = timer, (timer -= 1) <= 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>')
    }, 1e3)
  }
</script>


Nội dung trong này thì các bạn giữ nguyên, không cần chỉnh sửa, các bạn chỉ cần chỉnh lại thời gian chờ của timer = 20; ở đây là 20 giây.


Bước 2: Các bạn copy toàn bộ code bên dưới dán trước thẻ đóng </body> trong chỉnh sửa giao diện HTML



<b:if cond='data:view.isSingleItem'>
  <script>
    //<![CDATA[
    $(".action a.fshare").click(function() {
      var t = $(this).attr("name");
      localStorage.setItem("post_id", t), $.ajax({
        type: "GET",
        url: "/feeds/posts/summary/" + t,
        data: {
          alt: "json"
        },
        dataType: "jsonp",
        success: function(t) {
          if (t.entry)
            for (var e = 0; e < t.entry.link.length; e++)
              if ("enclosure" == t.entry.link[e].rel && "Fshare" == t.entry.link[e].type) {
                var n = t.entry.link[e].href;
                localStorage.setItem("download_link", n)
              }
        }
      });
      setTimeout(function() {
        location.href = "/p/download.html"
      }, 1e3)
    });

    $(".action a.google").click(function() {
      var t = $(this).attr("name");
      localStorage.setItem("post_id", t), $.ajax({
        type: "GET",
        url: "/feeds/posts/summary/" + t,
        data: {
          alt: "json"
        },
        dataType: "jsonp",
        success: function(t) {
          if (t.entry)
            for (var e = 0; e < t.entry.link.length; e++)
              if ("enclosure" == t.entry.link[e].rel && "Google Drive" == t.entry.link[e].type) {
                var n = t.entry.link[e].href;
                localStorage.setItem("download_link", n)
              }
        }
      });
      setTimeout(function() {
        location.href = "/p/download.html"
      }, 1e3)
    });

    $(".action a.mediafire").click(function() {
      var t = $(this).attr("name");
      localStorage.setItem("post_id", t), $.ajax({
        type: "GET",
        url: "/feeds/posts/summary/" + t,
        data: {
          alt: "json"
        },
        dataType: "jsonp",
        success: function(t) {
          if (t.entry)
            for (var e = 0; e < t.entry.link.length; e++)
              if ("enclosure" == t.entry.link[e].rel && "Mediafire" == t.entry.link[e].type) {
                var n = t.entry.link[e].href;
                localStorage.setItem("download_link", n)
              }
        }
      });
      setTimeout(function() {
        location.href = "/p/download.html"
      }, 1e3)
    });
    //]]>
  </script>
</b:if>


Các bạn chú ý ở đoạn code này, ở đây mình viết sẵn cho 3 link với 3 đoạn code bên trên, code đều giống nhau, chỉ khác chỗ mình tô màu đỏ

- Màu đỏ đầu tiên của mỗi đoạn code: Gọi CLASS của nút download
- Màu đỏ thứ hai của mỗi đoạn code: Tên của liên kết đính kèm (Loại mime)

Các bạn muốn thêm link thì copy và sửa hai vị trí đó, còn lại giữ nguyên.


Bước 3: Bạn copy CSS thêm trước thẻ đóng </b:skin>


.action{text-align:center;margin-top:40px;margin-bottom:20px}
.action a.button{display:inline-block;height:31px;background-color:#ff3d00;font-size:14px;color:#ffffff;font-weight:400;line-height:31px;text-align:center;text-decoration:none;cursor:pointer;padding:0 15px;margin:0 5px 5px 0;border:1px solid rgba(0,0,0,.1);border-bottom-width:2px;border-radius:2px}
.action a.button:hover{background-color:#ff3d00!important}


Bước 4: Các bạn tìm thẻ <data:post.body/> của bài viết, bên trong template sẽ có nhiều chỗ của thẻ này, để tìm đúng các bạn cứ nhập đại vài ký tự dưới nó và lưu lại, sau đó mở một bài viết lên xem, nếu ký tự đó xuất hiện bên dưới hoặc trên bài viết tùy bạn nhập, thì đó chính là thẻ <data:post.body/> cần tìm, nếu chưa hiện các bạn tìm thẻ khác và làm tương tự.

Sau đó copy toàn bộ code này dưới dưới hoặc trên thẻ <data:post.body/> tùy các bạn.
- Dán ở trên thì nút download sẽ hiện trước bài viết.
- Dán ở dưới thì nút download sẽ hiện bên dưới bài viết.



<div class='action'>
  <b:loop index='i' values='data:post.enclosures' var='enclosure'>
    <b:if cond='data:enclosure.mimeType == &quot;Fshare&quot;'>
      <a class='button fshare' expr:name='data:post.id' style='background-color: #8e44ad;'><i aria-hidden='true' class='fa fa-download' />
        <data:enclosure.mimeType />
      </a>
    </b:if>

    <b:if cond='data:enclosure.mimeType == &quot;Mediafire&quot;'>
      <a class='button mediafire' expr:name='data:post.id' style='background-color: #2980b9;'><i aria-hidden='true' class='fa fa-download' />
        <data:enclosure.mimeType />
      </a>
    </b:if>

    <b:if cond='data:enclosure.mimeType == &quot;Google Drive&quot;'>
      <a class='button google' expr:name='data:post.id' style='background-color: #e40046;'><i aria-hidden='true' class='fa fa-download' />
        <data:enclosure.mimeType />
      </a>
    </b:if>
  </b:loop>
</div>


Các bạn chú ý chỗ mình tô màu đỏ
- Màu đỏ đầu tiên của mỗi đoạn code: Tên của liên kết đính kèm (Loại mime)
- Màu đỏ thứ hai của mỗi đoạn code: Tên CLASS của nút download để các bạn gọi vào đoạn code của bước 2.

Sau đó các bạn lưu lại.

Bước 5: Kiểm tra lại blogspot 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>

Nếu thiếu thư viện Font thì nút download sẽ không có icon.
Nếu thiế thư viện jQuery thì đoạn code sẽ không chạy.
Nếu có đủ thì các bạn bỏ qua bước này.

Bước 6: Các bạn vào Cài đặt tìm đến phần Đường liên kết tiêu đề và đính kèm và bật lên.

Và cách đăng bài như sau, các bạn nhập liên kết bên trên và bên dưới Loại mime các bạn nhập đúng chữ Fshare, Google Driver, Mediafire tương ứng với link của nó.

Xem hình dưới.

Tạo trang download nhiều get link cho blogspot

Như vậy là mình đã hướng dẫn Tạo trang download nhiều get link cho blogspot. Nếu như code lỗi hoặc không hoạt động các bạn commetn bên dưới để được hỗ trợ.

Bạn nào có code hay hơn hoặc gọn hơn thì post lên cho các bạn tham khảo.

Nhận xét

×