Cách tạo Hộp tải xuống với Đồng hồ đếm ngược cho Blogger

 Xin chào! Chào mừng bạn đến với HuyMedia

Nếu bạn đang cung cấp bất kỳ tệp nào trên Trang web của mình để tải xuống, Hộp tải xuống này sẽ hữu ích cho bạn. Một số trang web hiển thị đếm ngược trước khi quá trình tải xuống bắt đầu hoặc chuyển hướng đến đích cuối cùng.

Hôm nay chúng tôi sẽ tạo Hộp tải xuống với Đồng hồ đếm ngược cho Trang web Blogger. Khi người dùng nhấp vào nút tải xuống, đồng hồ đếm ngược sẽ bắt đầu trước khi quá trình tải xuống bắt đầu.

Làm thế nào để tạo một hộp tải xuống đếm ngược?

Tạo Hộp tải xuống đếm ngược cho Trang web Blogger của bạn sẽ không yêu cầu nhiều kiến thức về HTML, CSS hoặc JS vì tôi đã thiết kế nó cho bạn. Những gì bạn cần làm là triển khai các mã ở đúng nơi trong XML Chủ đề Blogger của bạn.

Quan trọng!Trước khi chúng tôi bắt đầu thêm mã trong XML, tôi sẽ khuyên bạn nên sao lưu chủ đề hiện tại của bạn. Tình cờ nếu có bất kỳ vấn đề nào xảy ra, bạn có thể khôi phục nó sau.

Bước 1: Trước hết Đăng nhập vào Bảng điều khiển Blogger.

Bước 2: Trên Trang tổng quan của Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống  bên cạnh nút 'Tùy chỉnh'.

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển hướng đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> và dán các Mã CSS sau ngay phía trên vào nó.

Nếu mẫu của bạn có tính năng chế độ tối và nếu bạn muốn có màu khác khi ở chế độ tối, bạn có thể tùy chỉnh mã theo nhu cầu của mình. Mỗi mẫu có thể có một lớp chế độ tối khác nhau, vì vậy vui lòng điều chỉnh nó, bạn có thể thay thế lớp được đánh dấu bằng lớp chế độ tối mẫu của mình.

.dld-container {
  --box-color: #08102b;
  --box-bg: #fffdfc;
  --box-bg-alt: rgba(0, 0, 0, .08);
  --font-family: inherit;
  --svg-color: #fffdfc;
  --button-bg: #482dff;
}
.darkMode .dld-container {
  --box-color: #fffdfc;
  --box-bg: #2d2d30;
  --box-bg-alt: #252526;
  --button-bg: #e91e63;
}
.dld-container{-webkit-tap-highlight-color:transparent;box-sizing:border-box;position:relative;display:flex;flex-direction:column;max-width:480px;margin:30px 0;color:var(--box-color);font-family:var(--font-family);transition:margin .6s;-webkit-transition:margin .6s}
.dld-container svg{width:22px;height:22px;fill:currentColor}
.dld-box,.dld-image{position:relative;display:flex}
.dld-container svg.line{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2}
.dld-box{z-index:2;background:var(--box-bg);width:100%;padding:15px;flex-direction:row;font-size:14px;border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.09)}
.dld-image{flex-shrink:0;align-items:center;justify-content:center;width:60px;height:60px;padding:10px;margin-right:15px;background:var(--box-bg-alt);border-radius:6px;transition:.4s;-webkit-transition:.4s}
.dld-image[style*=background-image]{width:100px;height:100px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 10px rgba(0,0,0,.1)}
.dld-image:not([style*=background-image])::before{content:attr(data-placeholder);opacity:.7}svg.dld-svg{width:calc(100% + 12px);height:calc(100% + 12px);position:absolute;top:-6px;bottom:-6px;right:-6px;left:-6px;opacity:0;stroke-width:1.5;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);transition:.5s;-webkit-transition:.5s}
.dld-image[style*=background-image] .dld-svg{width:calc(100% + 20px);height:calc(100% + 20px);top:-10px;bottom:-10px;right:-10px;left:-10px}.dld-svg .b{fill:none;stroke:var(--box-bg-alt)}
.dld-svg .c{fill:none;stroke:var(--button-bg);stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round;transition:.5s;-webkit-transition:.5s}
.dld-info{flex-grow:1;width:calc(100% - 115px)}
.dld-info>*{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dld-bottom,.dld-button{position:absolute;display:flex}
.dld-info>::before{content:attr(data-name) ': ';text-transform:capitalize;opacity:.8}
.dld-info>::after{content:attr(data-value)}
.dld-button{background:var(--button-bg);width:40px;height:40px;bottom:-20px;right:20px;outline:0;border:none;border-radius:50%;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(0,0,0,.09);transition:.3s;-webkit-transition:.3s;cursor:pointer}
.dld-button:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)}
.dld-button svg.line{width:24px;height:24px;stroke:var(--svg-color)}
.dld-download{visibility:visible;opacity:1}
.dld-container.alt .dld-download,.dld-retry{visibility:hidden;opacity:0;bottom:-40px}
.dld-bottom{z-index:1;bottom:0;right:0;align-items:center;justify-content:center;height:60px;width:100%;padding-top:20px;font-size:14px;background:var(--box-bg);border-radius:0 0 10px 10px;transition:.6s;-webkit-transition:.6s}
.dld-bottom>* span{color:var(--button-bg);font-size:18px;font-weight:600}
.dld-container.alt{margin:30px 0 70px}
.dld-container.alt .dld-image{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);border-radius:50%}
.dld-container.alt .dld-svg{opacity:1}
.dld-container.retry .dld-retry{visibility:visible;opacity:1;bottom:-20px}
.dld-container.alt .dld-bottom{bottom:-40px;background:var(--box-bg-alt);box-shadow:0 0 35px rgba(0,0,0,.09)}

Bước 6: Bây giờ hãy thêm JavaScript sau ở trên vào </body> thẻ. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp đó là </body>.

<script type='module'>/*<![CDATA[*/
(({selector:a,messages:{startingDownload:b,pleaseWait:c}})=>{const d=a=>("string"==typeof a?a:a+"").replace(/&/g,"&amp;").replace(/'/g,"&#39;").replace(/"/g,"&#34;"),e=document.querySelectorAll(a);e.forEach(e=>{e.classList.add("dld-container"),e.innerHTML=`<div class='dld-box'><div class='dld-image'${e.dataset.image?` style='${d(`background-image: url(${e.dataset.image})`)}'`:""} data-placeholder='${e.dataset.placeholder||".ext"}'><svg class='dld-svg' viewBox='0 0 34 34'><circle class='b' cx='17' cy='17' r='15.92' /><circle class='c dld-progress' cx='17' cy='17' r='15.92' /></svg></div><div class='dld-info'>${(Object.keys(e.dataset).reduce((b,a)=>(["link","image","placeholder","target","timeout"].includes(a)||(!b&&(b=[]),b.push([a,e.dataset[a]])),b),null)||[["Info","No information provided"]]).map(([a,b])=>`<span data-name='${d(a)}' data-value='${d(b)}'></span>`).join("")}</div><button class='dld-button dld-download'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='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></button><button class='dld-button dld-retry'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button></div><div class='dld-bottom'></div>`;const f=e.dataset.link||"#",g=e.dataset.target,[h,i,j,k]=[".dld-download",".dld-retry",".dld-bottom",".dld-progress"].map(a=>e.querySelector(a));h.addEventListener("click",()=>{e.classList.add("alt");let a=+(e.dataset.timeout||10);(Number.isNaN(a)||!Number.isFinite(a))&&(a=10);const d=a;j.innerHTML=`<span>${b.replace(/%d/g,a)}</span>`;const h=setInterval(()=>{a-=1,j.innerHTML=`<span>${b.replace(/%d/g,a)}</span>`,k.style.strokeDashoffset=Math.floor(100*(a/d));0>=a&&(clearInterval(h),j.innerHTML=c,g?window.open(f,g):window.location.href=f,i.onclick=()=>{g?window.open(f,g):window.location.href=f},setTimeout(()=>{e.classList.remove("alt"),e.classList.add("retry")},4e3))},1e3)})})})({
  selector: ".download-box",
  messages: {
    startingDownload: "Starting Download in <span>%d</span> seconds",
    pleaseWait: "Please wait..."
  }
});
/*]]>*/</script>

Bước 7: Lưu các thay đổi bằng cách nhấp vào biểu tượng này 

Bước 8: Xong rồi! Thêm các Mã HTML sau vào Bài đăng trên Blog của bạn thông qua Chế độ xem HTML để thêm Hộp tải xuống đếm ngược.

Mã:

<div class='download-box'
     data-link='#'
     data-image='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnxALaKApTv8obec6rnjQCqIztkM2ydGXj2YO95o8XqYYlo-NaBoVfc3HrHqUq05XHgYQ9cO-7nrL9Fb36NBD2t_qn2ey0sBBA_Ea9ao1pZpbts9U7ypDSGI5taJ3BZq3X2qLYWrieqW0J-j5_SBtiiKdL7T2c0CLPegKU7vCunbldBSN3Qvcmfo35/s320/1f01752b-b2c8-4dda-aa5d-a7ddca88a468.png'
     data-timeout='30'
     data-name='Example Image'
     data-category='Image'
     data-size='879KB'
     data-resolution='1980x1080'></div>

Kết quả:

Mã:

<div class='download-box'
     data-link='#'
     data-placeholder='.png'
     data-name='Example Image'
     data-category='Image'
     data-size='879KB'
     data-resolution='1980x1080'></div>

Kết quả:

Thay thế các bộ phận được đánh dấu theo nhu cầu của bạn.

Kết thúc

Đây là tất cả về việc tạo Hộp tải xuống đếm ngược cho Bài đăng trên Blog. Tôi hy vọng bạn thích bài viết này. Hãy chia sẻ bài viết này. Và nếu bạn đang gặp vấn đề trong bất kỳ phần nào hoặc bạn có bất kỳ câu hỏi nào thì hãy hỏi chúng tôi trong hộp bình luận.