Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Tạo trang download get link cho blogspot

4 min read

Bài viết này mình hướng dẫn các bạn tạo trang download chờ get link cho blogspot 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.

Tạo trang download chờ get link cho blogspot
Các bước cài đặt Tạo trang download chờ get link cho blogspot như sau:

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ẻ đóng </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() {

    location.href = "/p/download.html"

  }, 1e3)

});

//]]></script> 

  </b:if>


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


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


Tạo trang download chờ get link cho blogspot

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 blogspot chuyên nghiệp.


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

Tạo trang download get link cho blogspot

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

Tạo trang download get link cho blogspot


You may like these posts

  • Chia sẻ tiện ích Thanh liên hệ cho blogspot nằm bên phải của blogspot phù hợp với mẫu template blogspot bán hàng, giúp khách hàng liên hệ một cách dễ dàng.Cách cài đặt là các …
  • Phần mềm thiết kế logo cho blogspot đơn giản dễ sử dụng, nhiều mẫu logo có sẵn dành cho bác bạn không cần phiết nhiều đế thiết kế hoặc photoshop.Trong quá trình thiết kế blogspot b…
  • Bài viết này mình sẽ Tổng hợp một số cách kiếm tiền với Blogger đơn giản mà bạn có thể làm được ngay với chính cái blogspot của bạn đang dùng. Làm thế nào để có thể kiếm tiềm…
  • Hướng dẫn các bạn cài đặt Tiện ích liên hệ Facebook Zalo Gọi điện rung lắc nằm cố định bên phải trang web hoặc blogspot, phù hợp cho các template blogspot bán hàng.Cách cài đặ…
  • Bài viết này mình hướng dẫn các bạn Phân trang comment blogger, phân trang danh sách bình luận Blogspot.Với cách làm này nó chỉ phân trang HTML của tất cả nội dung bình luận, …
  • Hướng dẫn các bạn tạo Nút gọn điện rung lắc cho blogspot đơn giản dễ làm, phù hợp cho blogspot bán hàng, tư vấn dịch vụ, chốt đơn.Cách cài đặt đơn giản là bạn chỉ cần copy toà…

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Learn More