Hallo guys, kali ini admin Mrchllaja akan membagikan artikel Widget Countdown Download Box untuk memperindah tampilan download file pada website kalian.
Sebelum memulai, kalian bisa melihat tampilan widget tersebut dengan klik tombol demo dibawah ini.
Cara Memasang Widget Countdown Download Box
Penting!
Sebelum memulai, disarankan untuk mencadangkan template blogger kalian. Jika terjadi kesalahan kalian bisa memulihkan template kalian.
Langkah 1: Memasang Kode CSS
- Silahkan login di Blogger Dashboard
- Klik Tema
- Pilih Edit HTML
- Salin kode dibawah ini, lalu tempel diatas kode
</style>atau]]></b:skin>
Jika template kalian memiliki fitur dark mode, sesuaikan .darkMode agar classnya berfungsi, Jika warna berbeda anda bisa menyesuaikannya. Jika template kalian tidak memiliki fitur dark mode kalian bisa menghapus bagian class tersebut.
.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)}Langkah 2: Memasang Kode Javascript
Salin kode dibawah ini, lalu tempel diatas kode </body> atau </body>
<script type='module'>/*<![CDATA[*/
(({selector:a,messages:{startingDownload:b,pleaseWait:c}})=>{const d=a=>("string"==typeof a?a:a+"").replace(/&/g,"&").replace(/'/g,"'").replace(/"/g,"""),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>Jika sudah semua, klik simpan.
Cara Memakai Widget Countdown Download Box
With Image:
Penulisan Kodenya:
<div class='download-box'
data-link='#'
data-image='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS7GFhC0sfI9dIy1jThFNoAOKyz352ArIrc4e9duJbGCwDiW_2URtaynasqIOCaCbBN0U1D7mPo7Y78qPs-h-xi7gyR6I5zfpwi8gp7pE04nSPupzNCOBULXl_LDOJivT2Hm3BYXYBe4fefR1HyAQtVa2HGC6QWXfNPJBsL-7i5ogeCMdpdIrLEr-Glce0/s1600/1719201319577.jpeg'
data-timeout='30'
data-name='Example Image'
data-category='Image'
data-size='879KB'
data-resolution='1980x1080'></div>Without Image:
Penulisan Kodenya:
<div class='download-box'
data-link='#'
data-placeholder='.png'
data-name='Example Image'
data-category='Image'
data-size='879KB'
data-resolution='1980x1080'></div>Sekian, artikel Widget Countdown Download Box ini, semoga bermanfaat bagi kalian semua:)
Referensi:
https://www.fineshopdesign.com/2022/04/make-download-box-with-countdown-timer.html
Apa Reaksimu Setelah Membaca Artikel Ini?