Mọi ý kiến đóng góp, xin liên hệ với tôi! Contact

Cách ẩn link download và tạo trang chờ get link blogger

Ẩn link download và tạo trang chờ get link blogger

Bài viết này mình hướng dẫn các bạn tạo trang download chờ get link cho blogger theo thời gian cài đặt sẵn, phù hợp với trang download phần mềm, tài liệu, template.

Bài viết tham khảo từ trang thietkeblogspot và được mình code lại tối ưu, ngắn gọn lại cho các bạn.

Cách ẩn link download và tạo trang chờ get link blogger
Cách ẩn link download và tạo trang chờ get link blogger

Các bước cài đặt tạo trang download chờ get link

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>

Trong đó timer = 20 chính là thời gian chờ các bạn có thể chỉnh tùy ý.

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

<b:if cond='data:view.isSingleItem'>  
<script>//<![CDATA[
$(".action a.download").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 && "download" == t.entry.link[e].type) {
            var n = t.entry.link[e].href;
            localStorage.setItem("download_link", n)
          }
    }
  });
  setTimeout(function() {
    window.open('/p/download.html','_blank');
  }, 1e3)
});

// Bạn co the them code download tai day
//]]></script> 
  </b:if>

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

Chú ý!
* Màu xanh đầu tiên của mỗi đoạn code: Gọi CLASS của nút download
* Màu xanh 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.

Nếu bạn muốn dùng nhiều link download hơn thì hãy copy code dưới và thêm đúng vị trí mình đã ghi chú.

$(".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() {
        window.open('/p/download.html', '_blank');
    }, 1e3)
});

Bước 3: Bạn copy CSS thêm trước thẻ: </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 vài viết.
  • Dán ở dưới thì nút download sẽ hiện sau vài viết.
<div class='action'>
  <b:loop index='i' values='data:post.enclosures' var='enclosure'>
    <b:if cond='data:enclosure.mimeType == &quot;demo&quot;'>
      <a class='button' expr:href='data:enclosure.url' rel='nofollow' style='background-color: #8e44ad;' target='_blank' title='Demo'><i aria-hidden='true' class='fa fa-link' /> Live demo</a>
    </b:if>
    <b:if cond='data:enclosure.mimeType == &quot;download&quot;'>
      <a class='button download' expr:name='data:post.id' style='background-color: #2980b9;'><i class="fa fa-download" aria-hidden="true"></i> Download</a>
    </b:if>
    <b:if cond='data:enclosure.mimeType == &quot;buy&quot;'>
      <a class='button' expr:href='data:enclosure.url' rel='nofollow' style='background-color: #e40046;' target='_blank'><i class="fa fa-cart-plus" aria-hidden="true"></i> Mua ngay</a>
    </b:if>
  </b:loop>
</div>

Và đừng quên nếu code ở trên bạn thêm nhiều link thì code này bạn cũng phải thêm nữa nhé!

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

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, demo, buy 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à các chữ download, demo, buy bên dưới (viết thường).

image_title_here

Nếu các bạn không bán thì không cần nhập link buy, để trống là được. Hoặc ngược lại các bạn bán thì không nhập link download.

Như vậy là bạn đã cài đặt và tạo được một trang Download cho blogger chuyên nghiệp.

Ví dụ về nút bán hàng:

Buy now!

Ví dụ về nút miễn phí tải về:

Download

Trên đây là hướng dẫn cách ẩn link download và tạo trang chờ get link blogger. Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.

Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Getting Info...

Về tác giả

Mỗi khi có ý định từ bỏ hãy nghĩ đến lý do mà bạn bắt đầu.

Đăng nhận xét

Vui lòng không chia sẻ bất kỳ chi tiết nhạy cảm hoặc cá nhân nào ở đây.
Cookie Consent
Trang web của chúng tôi sử dụng cookie để nâng cao trải nghiệm của bạn.
Thêm chi tiết
Oops!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
AdBlock Detected!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng plugin chặn quảng cáo trong trình duyệt của mình.
Doanh thu mà chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý trang web này, chúng tôi yêu cầu bạn đưa trang web của chúng tôi vào danh sách trắng trong plugin chặn quảng cáo của bạn.
Site is Blocked
Sorry! This site is not available in your country.