Halo! Selamat datang di Han Haoyu Platform.
Kalau kamu nyediain file untuk di-download di website, Download Box ini bakal sangat membantu banget. Beberapa website nunjukin countdown sebelum download dimulai atau redirect ke destinasi akhir. Nah, kita bakal bikin fitur yang sama persis.
Hari ini kita bakal bikin Download Box dengan Countdown Timer buat website Blogger kamu. Waktu user klik tombol download, countdown bakal mulai jalan sebelum download-nya dimulai. Keren kan?
Sebelum kita mulai, yuk liat dulu demo-nya biar lebih jelas.
Gimana Cara Bikin Countdown Download Box?
Bikin Countdown Download Box buat website Blogger kamu nggak bakal butuh banyak pengetahuan tentang HTML, CSS atau JS karena gue udah design-in semuanya buat kamu. Yang perlu kamu lakuin cuma implementasi kode-kodenya di tempat yang tepat di Blogger Theme XML kamu.
Penting Banget!
Sebelum kita mulai nambahin kode di XML, gue sangat rekomendasiin kamu buat bikin Backup tema yang sekarang. Kalau tiba-tiba ada masalah, kamu bisa restore lagi nanti.
Langkah-Langkah Instalasi
- Pertama-tama, login dulu ke Dashboard Blogger kamu.
- Di Dashboard Blogger, klik menu Theme atau Tema.
- Klik icon panah ke bawah di sebelah tombol 'customize' atau 'sesuaikan'.
- Klik Edit HTML, nanti kamu bakal di-redirect ke halaman editing.
-
Sekarang cari kode
]]></b:skin>terus paste kode CSS berikut ini tepat di atasnya.Kalau template kamu punya fitur dark mode, dan kamu pengen warna yang beda waktu mode gelap aktif, kamu bisa custom kode-nya sesuai kebutuhan. Setiap template bisa punya class dark mode yang berbeda, jadi tolong sesuaikan. Kamu bisa ganti class yang di-mark dengan class dark mode template kamu.
.hhc-dld-container { --hhc-box-color: #08102b; --hhc-box-bg: #fffdfc; --hhc-box-bg-alt: rgba(0, 0, 0, .08); --hhc-font-family: inherit; --hhc-svg-color: #fffdfc; --hhc-button-bg: #482dff; } .darkMode .hhc-dld-container { --hhc-box-color: #fffdfc; --hhc-box-bg: #2d2d30; --hhc-box-bg-alt: #252526; --hhc-button-bg: #e91e63; } .hhc-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(--hhc-box-color);font-family:var(--hhc-font-family);transition:margin .6s;-webkit-transition:margin .6s} .hhc-dld-container svg{width:22px;height:22px;fill:currentColor} .hhc-dld-box,.hhc-dld-image{position:relative;display:flex} .hhc-dld-container svg.hhc-line{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2} .hhc-dld-box{z-index:2;background:var(--hhc-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)} .hhc-dld-image{flex-shrink:0;align-items:center;justify-content:center;width:60px;height:60px;padding:10px;margin-right:15px;background:var(--hhc-box-bg-alt);border-radius:6px;transition:.4s;-webkit-transition:.4s} .hhc-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)} .hhc-dld-image:not([style*=background-image])::before{content:attr(data-placeholder);opacity:.7}svg.hhc-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} .hhc-dld-image[style*=background-image] .hhc-dld-svg{width:calc(100% + 20px);height:calc(100% + 20px);top:-10px;bottom:-10px;right:-10px;left:-10px}.hhc-dld-svg .hhc-b{fill:none;stroke:var(--hhc-box-bg-alt)} .hhc-dld-svg .hhc-c{fill:none;stroke:var(--hhc-button-bg);stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round;transition:.5s;-webkit-transition:.5s} .hhc-dld-info{flex-grow:1;width:calc(100% - 115px)} .hhc-dld-info>*{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hhc-dld-bottom,.hhc-dld-button{position:absolute;display:flex} .hhc-dld-info>::before{content:attr(data-name) ': ';text-transform:capitalize;opacity:.8} .hhc-dld-info>::after{content:attr(data-value)} .hhc-dld-button{background:var(--hhc-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} .hhc-dld-button:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)} .hhc-dld-button svg.hhc-line{width:24px;height:24px;stroke:var(--hhc-svg-color)} .hhc-dld-download{visibility:visible;opacity:1} .hhc-dld-container.hhc-alt .hhc-dld-download,.hhc-dld-retry{visibility:hidden;opacity:0;bottom:-40px} .hhc-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(--hhc-box-bg);border-radius:0 0 10px 10px;transition:.6s;-webkit-transition:.6s} .hhc-dld-bottom>* span{color:var(--hhc-button-bg);font-size:18px;font-weight:600} .hhc-dld-container.hhc-alt{margin:30px 0 70px} .hhc-dld-container.hhc-alt .hhc-dld-image{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);border-radius:50%} .hhc-dld-container.hhc-alt .hhc-dld-svg{opacity:1} .hhc-dld-container.hhc-retry .hhc-dld-retry{visibility:visible;opacity:1;bottom:-20px} .hhc-dld-container.hhc-alt .hhc-dld-bottom{bottom:-40px;background:var(--hhc-box-bg-alt);box-shadow:0 0 35px rgba(0,0,0,.09)} -
Sekarang tambahin kode JavaScript berikut tepat di atas tag
</body>. Kalau kamu nggak nemuin, kemungkinan udah di-parse jadi</body>.<script type='module'>/*<![CDATA[*/ /*! * HHC Download Box with Countdown Timer * by Han Haoyu Platform * License: MIT */ (({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("hhc-dld-container"),e.innerHTML=`<div class='hhc-dld-box'><div class='hhc-dld-image'${e.dataset.image?` style='${d(`background-image: url(${e.dataset.image})`)}'`:""} data-placeholder='${e.dataset.placeholder||".ext"}'><svg class='hhc-dld-svg' viewBox='0 0 34 34'><circle class='hhc-b' cx='17' cy='17' r='15.92' /><circle class='hhc-c hhc-dld-progress' cx='17' cy='17' r='15.92' /></svg></div><div class='hhc-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='hhc-dld-button hhc-dld-download'><svg class='hhc-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='hhc-dld-button hhc-dld-retry'><svg class='hhc-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='hhc-dld-bottom'></div>`;const f=e.dataset.link||"#",g=e.dataset.target,[h,i,j,k]=[".hhc-dld-download",".hhc-dld-retry",".hhc-dld-bottom",".hhc-dld-progress"].map(a=>e.querySelector(a));h.addEventListener("click",()=>{e.classList.add("hhc-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("hhc-alt"),e.classList.add("hhc-retry")},4e3))},1e3)})})})({ selector: ".hhc-download-box", messages: { startingDownload: "Memulai Download dalam <span>%d</span> detik", pleaseWait: "Mohon tunggu..." } }); /*]]>*/</script> - Simpan perubahannya dengan klik icon ini
-
Selesai! Sekarang tambahin salah satu dari kode HTML berikut ini di Blog Post kamu lewat HTML View buat nambahin Countdown Download Box.
Versi dengan Gambar Thumbnail
<div class='hhc-download-box' data-link='#' data-image='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MJfJjegO4N7txAwyFBfNJMEUNLV4aaADlXmR8ZdOspFNqbx2UR2GsRW_g4rtdpAf39rvwooMe1n1IHD_7eP32nKqpkq8tnZ_HwWAhuLVfDWQv045PLMCa_-LXccLUkeiG7dPp7YycZ2nQj2uY2QqeQm-QsbARoQfaj_4EkEl3DrEB3Soc0ZPAO1tUQ/s160-rw-e30/fd_logo.webp' data-timeout='30' data-nama='Contoh Gambar' data-kategori='Gambar' data-ukuran='879KB' data-resolusi='1980x1080'></div>Versi dengan Placeholder Ekstensi File
<div class='hhc-download-box' data-link='#' data-placeholder='.png' data-timeout='10' data-nama='Contoh File' data-kategori='Dokumen' data-ukuran='2.5MB' data-format='PDF'></div>Ganti bagian yang di-mark sesuai kebutuhan kamu. Kamu bisa nambahin data attribute custom sebanyak yang kamu mau, semua bakal otomatis ditampilin di info box.
Penjelasan Parameter dan Kustomisasi
Parameter Data Attribute
Download box ini punya beberapa parameter penting yang bisa kamu atur:
data-link: URL file yang mau di-download. Ganti tanda # dengan link download asli kamu.
data-image: URL gambar thumbnail yang bakal ditampilin di box. Ini opsional, kalau nggak dikasih bakal nampil placeholder.
data-placeholder: Text placeholder yang ditampilin kalau nggak ada image. Biasanya diisi dengan ekstensi file kayak .zip, .pdf, .mp4, dll.
data-timeout: Durasi countdown dalam detik sebelum download dimulai. Default-nya 10 detik kalau nggak diset.
data-target: Tentuin gimana file dibuka. Isi dengan _blank kalau mau buka di tab baru, atau kosongkan kalau mau redirect di tab yang sama.
Data Attribute Custom
Yang keren dari download box ini adalah kamu bisa nambahin informasi custom sebanyak yang kamu mau. Semua data attribute selain yang udah disebutin di atas bakal otomatis ditampilin sebagai informasi file. Contohnya:
data-nama='File Penting'
data-versi='2.0.1'
data-tanggal='11 Feb 2026'
data-penulis='Han Haoyu'Semua ini bakal nampil dengan rapi di info section.
Kustomisasi Warna dan Tema
Kamu bisa custom warna download box dengan edit CSS variable di bagian paling atas kode CSS. Berikut penjelasan masing-masing variable:
--hhc-box-color: Warna text utama di dalam box
--hhc-box-bg: Warna background box utama
--hhc-box-bg-alt: Warna background alternatif untuk image placeholder dan countdown area
--hhc-font-family: Font yang dipake, default inherit dari parent
--hhc-svg-color: Warna icon di tombol download
--hhc-button-bg: Warna background tombol download dan accent color
Kustomisasi Pesan Countdown
Kamu juga bisa ganti text yang muncul waktu countdown jalan. Cari bagian ini di kode JavaScript:
messages: {
startingDownload: "Memulai Download dalam <span>%d</span> detik",
pleaseWait: "Mohon tunggu..."
}Ganti text sesuai keinginan kamu. %d bakal otomatis diganti dengan angka countdown yang tersisa.
Tips Penggunaan
Biar download box kamu lebih optimal, perhatiin beberapa tips berikut:
Pertama, set timeout yang reasonable. Jangan terlalu pendek karena user butuh waktu buat baca info file, tapi jangan terlalu lama juga biar nggak bikin frustasi. 10-30 detik biasanya ideal.
Kedua, pastikan link download yang kamu kasih valid dan bener-bener nyambung ke file. Jangan sampai user udah nungguin countdown tapi ternyata link rusak.
Ketiga, kasih informasi yang lengkap dan akurat tentang file yang mau di-download. Ini penting biar user tau persis apa yang bakal mereka dapat.
Keempat, kalau kamu pake hosting external kayak Google Drive, Mediafire, atau sejenisnya, pastikan file-nya public dan bisa diakses sama semua orang.
Kelima, consider buat nambahin preview atau screenshot file kalau memungkinkan supaya user lebih yakin mau download.
Troubleshooting
Kalau download box nggak muncul atau nggak jalan dengan benar, coba cek hal-hal berikut:
Pastikan kamu udah save perubahan di tema dan clear cache browser. Kadang perubahan nggak langsung keliatan karena cache.
Cek apakah ada conflict dengan JavaScript lain di tema kamu. Buka browser console (F12) buat liat apakah ada error.
Pastikan selector class hhc-download-box di HTML sama persis dengan yang ada di JavaScript.
Kalau countdown jalan tapi download nggak mulai, kemungkinan link yang kamu kasih nggak valid atau ada popup blocker yang nge-block.
Kesimpulan
Itu dia cara lengkap bikin Countdown Download Box buat Blog Post kamu. Semoga artikel ini bermanfaat dan membantu. Jangan lupa share artikel ini ke temen-temen kamu yang butuh. Dan kalau kamu ngalamin masalah di bagian manapun atau punya pertanyaan, tanyain aja di kolom komentar ya.
Dengan fitur countdown ini, website kamu bakal keliatan lebih profesional dan user experience-nya jadi lebih baik. User juga jadi punya waktu buat mikir ulang atau baca info file sebelum download beneran dimulai.
Copyright (c):
Han Haoyu Platform
