Tạo trang download get link cho blogspot

Zalo 0971539681 Tư vấn & Hỗ trợ

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


Nhận xét

Đăng nhận xét

4 nhận xét
Hiển thị
×

Tổng hợp kho giao diện blogspot đẹp chuẩn seo chuẩn mobile

Kho giao diện blogspot được thiết kế đẹp hiện đại tối ưu seo, thiết kế chuẩn mobile responsive, mẫu blogspot đa dạng phong phú nhiều mẫu mẫ được cập nhật và update liên tục

Nhiều theme blogger được thiết kế đẹp bởi Giaodien.blog chuẩn seo, và nhiều template blogspot miễn phí như bán hàng, bất động sản, landing page, dịch vụ, công ty

Nhiều Mẫu Blogger Cao cấp và Miễn phí Tốt nhất năm 2021. Chúng tôi tạo các Mẫu Blogger Chuyên nghiệp, Chất lượng Cao, Tối ưu hóa SEO và tốc độ load nhanh nhất. Cung cấp, tổng hợp và hỗ trợ miễn phí những template blogspot cực đẹp, template chuẩn SEO, thiết kế responsive dành cho Blogspot. Trang chia sẻ, download giao diện blogspot chuyên nghiệp, chuẩn seo, load trang nhanh và hoàn toàn miễn phí.

Mẫu template blogspot bán hàng đẹp được chia sẻ miễn phí, mẫu blogspot bán hàng thiết kế ... share template bán hàng cho blogspot, share theme blogger bán hàng.

Chúng tôi chuyên bán các mẫu giao diện blogger bán hàng, và thiết kế blogspot theo yêu cầu, giá cả phải chăng. Template được thiết kế đẹp nhất, không có lỗi vặt, bạn hoàn toàn xứng đáng với số tiền bỏ ra khi mua một template blogspot đẹp seo hiện đại

Theme blogger bán hàng thiết kế luôn luôn được tích hợp giỏ hàng, và nhiều mẫu thiết kế dành cho tiếp thị liên kết trên nền blogspot

Template blogspot tiếp thị liên kết được tối ưu seo giúp bạn có thể làm tiếp thị liên kết trực tiếp trên blogger blogspot, nhiều mẫu tiếp thị đẹp, tài chính, vay tiền blogspot

Template blogspot dự án bất động sản đẹp chuẩn seo hiện đại phù hợp làm website bất động sản bằng blogspot như dự án chung cư, nhà đất, biệt thự, công ty du lịch, theme blogspot bất động sản được thiết kế chuẩn seo responsive trên mobile ipad

Mẫu blogspot bất động sản đẹp

Giao diện blogspot thiết kế đẹp hiện đại tối ưu seo, khi mua các bạn được mình hỗ trợ cài đặt hoàn chỉnh, hỗ trợ trong quá trình sử dụng, được nhận bản nâng cấp miễn phí

Điểm nổi bật của template do mình thiết kế đó là:

Luôn luôn chuẩn seo

Luôn luôn có bố cục giúp bạn thao tác cài đặt dễ dàng và nhanh chóng

Đăng bài tự do soạn thảo, kết hợp với liên kết đính kèm

Vì vậy bạn mua template blogspot thì hãy liên hệ với mình nhận được hỗ trợ nhé, đảm bảo uy tín chất lượng về template blogspot bạn đãm mua

Blogspot là gì?

Blogspot là một nền tảng miễn phí cho phép bạn tạo trang blog miễn phí, có thể tọa các trang blogspot bán hàng, blogspot bất động sản, blogspot landing page với các mẫu giao diện blogspot có sẵn ở trang của mình là Giaodien.blog

Giao diện thiết kế chuẩn seo, chuẩn responsive trên mobile và ipad