Cách thêm nút Tải xuống có đồng hồ đếm ngược trong Blogger

Cách thêm nút Tải xuống có đồng hồ đếm ngược trong Blogger

MauThemeBlog.com
0 Views

Hello Mọi người! Chào mừng bạn quay trở lại Vozshare, Hôm nay mình xin hướng dẫn các bạn Cách thêm nút Tải xuống với đồng hồ đếm ngược trong Blogger,   Thêm nút Tải xuống với Đồng hồ đếm ngược là một chiến lược rất tốt mà hầu hết các blog sử dụng để duy trì tỷ lệ thoát cũng như tăng mức độ tương tác của người dùng trong blog hoặc bất kỳ trang web nào. Điều này dẫn đến tăng thu nhập tổng thể trên blog của bạn.

Mật khẩu sẽ hiển thị sau:

How to add a Download button with countdown timer in Blogger

Nút Tải xuống là gì?

Nút tải xuống là một thứ rất đơn giản, trông giống như một cái nút, đằng sau nó có một liên kết của tệp của bạn mà thông qua đó người dùng của bạn có thể truy cập tệp. Hầu hết các trang web tải xuống sử dụng các nút tải xuống này để làm cho trải nghiệm người dùng của họ tốt hơn và tăng SEO của họ.

Nút Tải xuống với Bộ hẹn giờ hoặc Đếm ngược là gì?

Không có nhiều sự khác biệt giữa nút hẹn giờ tải xuống và nút tải xuống đơn giản. Sự khác biệt duy nhất là, Khi bạn nhấp vào nút tải xuống bình thường, bạn sẽ được chuyển hướng trực tiếp đến liên kết nguồn hoặc tệp của bạn. Nhưng khi bạn nhấp vào nút Tải xuống Đếm ngược, bạn cần đợi một khoảng thời gian (cho đến khi bộ hẹn giờ kết thúc theo trang web) và sau đó bạn có thể truy cập tệp của mình.

Ưu điểm

  • Giảm tỷ lệ thoát của bạn
  • Tăng SEO của bạn
  • Tăng thu nhập tổng thể của bạn
Hãy bắt đầu nào

Demo

Cách thêm nút Tải xuống có đồng hồ đếm ngược trong Blogger

Bước 1:  Đăng nhập vào  Blogger
Bước 2: Tạo bài đăng mới hoặc chỉnh sửa bài đăng hiện có
Bước 3: Nhấp vào biểu tượng Bút ở góc trên cùng bên trái
Bước 4: Bây giờ chuyển sang Chế độ xem HTML
Bước 5: Sao chép các mã sau, dán chúng vào nơi muốn hiển thị 

Chỉnh sửa các mã được đánh dấu theo file của bạn bạn

<!-- HTML FOR DOWNLOAD TIMER BUTTON -->
<div class='downloadInfo'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fileType' data-text='zip'></span>
  <div class='fileName'>
      <span class='textd'>HTML and CSS Source Code.zip</span>
      <span class='fileSize'>File Size - 204.7kb</span>
   </div>
   <a class='fileLink' aria-label='Download' id="filelink1" onclick="DwnTmrFunction()"><i class='icon download'></i></a>
</div>
<div class="notesDn" id="notesDn">
   <p>Your Download link will open automatically...</p>
</div>
<div class='DnTargetLink'>Link Tải</div>

<!-- JAVASCRIPT FOR DOWNLOAD TIMER BUTTON -->
<script type='text/javascript'>
var timeLeft=10,downloadBtn=document.querySelector(".fileLink"),countdown=document.querySelector(".textd");function DwnTmrFunction(){document.getElementById("notesDn").style.marginTop="-22px",document.getElementById("filelink1").style.pointerEvents="none",document.getElementById("filelink1").style.opacity=".6"}downloadBtn.addEventListener("click",()=>{var e=document.querySelector(".DnTargetLink").innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML="Please wait <Dncolor>"+timeLeft+"</Dncolor> second.",timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
</script>

Bước 6: Bây giờ hãy nhấp vào lưu

Các bạn dán css bên dưới vào bên trên ]]></b:skin>

 /* CSS FOR DOWNLOAD TIMER BUTTON */
.notesDn{margin-left:65px;background:linear-gradient(to right,#ff6464,#5ac8fa); opacity:85%;margin-top:0;max-width:435px;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);border-bottom-left-radius:5px;border-bottom-right-radius:5px;position:relative;margin-top:-60px;z-index:-1;transition-property:all;transition-duration:.5s;transition-timing-function:ease}
  
  .notesDn p{padding:0 0 0 16px;margin:0;color:#fff;opacity:.8;font-size:12px}@media screen and (max-width:480px){.notesDn{margin-left:0;max-width:500px}.downloadInfo{border-radius:5px 5px 0 0}.downloadInfo .fileType{border-radius:5px 0 0 0}}@media screen and (max-width:396px){.notesDn{margin-top:-40px}}.DnTargetLink{display:none}Dncolor{color:#555eed;font-size:1.5em;font-weight:700}.drkM .notesDn p{color:#fff;}.drkM .notesDn{background-color: #fff;}/* BUTTON DOWNLOAD */ .downloadInfo{max-width:500px;background-color:#fefefe; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%); border:1px solid var(--content-border);border-radius:5px; padding:15px;margin-top:20px;margin-bottom:20px; display:flex;align-items:center; line-height:1.8em;font-size:14px} .downloadInfo a, .downloadInfo .fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:50px;height:50px; padding:10px; background:#f1f1f0;border-radius:10px} .downloadInfo a{background-color:var(--link-bg);color:#fefefe; margin:0;padding:10px 12px;border-radius:3px; width:auto;height:auto; line-height:20px;font-size:13px} .downloadInfo a:after{content:attr(aria-label)} .downloadInfo .fileType:before{content:attr(data-text)} .downloadInfo .fileType.lazy{background-size:cover;background-position:center;background-repeat:no-repeat} .downloadInfo .fileType.lazy:before{display:none} .downloadInfo .fileName{flex-grow:1; width:calc(100% - 150px);padding:0 15px} .downloadInfo .fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .downloadInfo .fileSize{line-height:1.4em;font-size:12px;opacity:.8} .darkMode .downloadInfo{background-color:var(--dark-bgSec); border:0} .darkMode .downloadInfo .fileType{background-color:var(--dark-bg)} .downloadInfo.countD{height:76px} .downloadInfo.countD .fileText b{font-size:20px;color:var(--link-color)} .downloadInfo.countD .retryLink{display:none} .darkMode .downloadInfo.countD .fileText b{color:var(--dark-link)} @media screen and (max-width:480px){.downloadInfo{padding:12px} .downloadInfo a{width:50px;height:50px;border-radius:10px} .downloadInfo a:after{display:none} .downloadInfo a .icon{margin:0}}.downloadInfo a{background-color:#f46f3c}
  .notesDn p{padding:0 0 0 16px;margin:0;color:#fff;opacity:.8;font-size:12px}@media screen and (max-width:480px){.notesDn{margin-left:0;max-width:500px}.downloadInfo{border-radius:5px 5px 0 0}.downloadInfo .fileType{border-radius:5px 0 0 0}}@media screen and (max-width:396px){.notesDn{margin-top:-40px}}.DnTargetLink{display:none}Dncolor{color:#555eed;font-size:1.5em;font-weight:700}.drkM .notesDn p{color:#fff;}.drkM .notesDn{background-color: #fff;}
  /* CSS ICON BACKGROUND */ .icon{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center} .icon.download, .darkMode .button.outline .icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")} .icon.demo{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' x2='21' y1='14' y2='3'/></svg>")} .icon.pencil{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><g transform='translate(3.500000, 3.500000)'><line x1='9.8352' y1='16.0078' x2='16.2122' y2='16.0078'/><path d='M12.5578,1.3589 L12.5578,1.3589 C11.2138,0.3509 9.3078,0.6229 8.2998,1.9659 C8.2998,1.9659 3.2868,8.6439 1.5478,10.9609 C-0.1912,13.2789 1.4538,16.1509 1.4538,16.1509 C1.4538,16.1509 4.6978,16.8969 6.4118,14.6119 C8.1268,12.3279 13.1638,5.6169 13.1638,5.6169 C14.1718,4.2739 13.9008,2.3669 12.5578,1.3589 Z'/><line x1='7.0041' y1='3.7114' x2='11.8681' y2='7.3624'/></g></svg>")} .icon.cart{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7.42226 19.8203C7.84426 19.8203 8.18726 20.1633 8.18726 20.5853C8.18726 21.0073 7.84426 21.3493 7.42226 21.3493C7.00026 21.3493 6.65826 21.0073 6.65826 20.5853C6.65826 20.1633 7.00026 19.8203 7.42226 19.8203Z'/><path d='M18.6747 19.8203C19.0967 19.8203 19.4397 20.1633 19.4397 20.5853C19.4397 21.0073 19.0967 21.3493 18.6747 21.3493C18.2527 21.3493 17.9097 21.0073 17.9097 20.5853C17.9097 20.1633 18.2527 19.8203 18.6747 19.8203Z'/><path d='M2.74988 3.25L4.82988 3.61L5.79288 15.083C5.87088 16.018 6.65188 16.736 7.58988 16.736H18.5019C19.3979 16.736 20.1579 16.078 20.2869 15.19L21.2359 8.632C21.3529 7.823 20.7259 7.099 19.9089 7.099H5.16388'/></svg>")} .icon.whatsapp{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fefefe'><g><path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'/><path d='M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z'/></g></svg>")} .button.outline .icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308102b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")} /* Alternative Icons */ .icon.downloadAlt, .darkMode .button.outline .icon.downloadAlt{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><polyline points='8 17 12 21 16 17'/><line x1='12' y1='12' x2='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg>")} .icon.demoAlt{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M7.39999 6.32003L15.89 3.49003C19.7 2.22003 21.77 4.30003 20.51 8.11003L17.68 16.6C15.78 22.31 12.66 22.31 10.76 16.6L9.91999 14.08L7.39999 13.24C1.68999 11.34 1.68999 8.23003 7.39999 6.32003Z'/><path d='M10.11 13.6501L13.69 10.0601'/></svg>")} .button.outline .icon.downloadAlt{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308102b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><polyline points='8 17 12 21 16 17'/><line x1='12' y1='12' x2='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg>")} .icon.retry{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg>")}

Phần kết luận

Trong phần này, mình đã hướng dẫn về  Cách thêm nút Tải xuống với đồng hồ đếm ngược trong Blogger,  Thêm nút Tải xuống với Đồng hồ đếm ngược là một chiến lược rất tốt mà hầu hết các blog sử dụng để duy trì tỷ lệ thoát cũng như tăng mức độ tương tác của người dùng trong blog hoặc bất kỳ trang web nào. Tôi hy vọng bài viết sẽ hữu ích với bạn và hãy chia sẻ với bạn bè của bạn.

Nếu bạn gặp bất kỳ vấn đề nào về mã hoặc có bất kỳ câu hỏi nào, vui lòng hỏi trong phần nhận xét.

Xem thêm:
Đánh giá của bạn về bài viết này?

Tags:

إرسال تعليق