Cara Membuat Download Box Timer Modern di Blogger + Generator

Download Box With Timer merupakan kotak untuk menaruh tombol link download dengan desain tampilan elegan nan eksklusif dan tak lupa mendukung fitur responsif. Salam Blogger, Sayang kumbang mencari makan, Terbang seiring di tepi kali, Selamat datang admin ucapkan, Akhirnya kita berjumpa lagi. Apa kabar semua? semoga kabar yang baik selalu.

Artikel kali ini yang admin bagikan yaitu tentang kotak download yang super keren dan istimewa. Kotak download ini cocok digunakan bagi sobat blogger yang memiliki konten blog dengan niche download ataupun sharing file aplikasi. Dengan kotak download ini link download akan tersusun rapih dan juga menambah daya tarik dari konten artikel tersebut.

Download Box ini memakai CSS dan JavaScript lokal sehingga tidak membutuhkan file CSS atau JavaScript eksternal. Komponen dapat dipasang langsung pada artikel atau, jika dipakai berulang, ditempatkan satu kali pada template Blogger.

Animasi dibuat lembut agar tetap nyaman di halaman artikel. Sistem countdown juga tidak memindahkan posisi elemen sehingga tinggi kotak tetap stabil ketika proses download berjalan.

CODEFLARE SYSTEM Informasi Singkat

ONLINE

Download Box menggunakan Vanilla JavaScript dan CSS lokal sehingga tidak membutuhkan jQuery ataupun file CSS dan JavaScript eksternal.

NO EXTERNAL JS

NO EXTERNAL CSS

MULTI DOWNLOAD BOX

RESPONSIVE UI

Area iklan atau sponsor dibuat terpisah dari tombol download agar pengguna dapat membedakan dengan jelas antara iklan dan tombol untuk mengambil file.

Berikut contoh tampilan Download Box Timer yang digunakan pada artikel ini.

SPONSOR AREA Letakkan kode iklan responsif di area ini jika diperlukan.

Kotak di atas sepenuhnya dibuat menggunakan HTML, CSS dan Javascript yang berada langsung pada artikel ini. Setiap Download Box mempunyai timer sendiri sehingga beberapa kotak dapat dipasang pada halaman yang sama tanpa saling mempengaruhi.

1

Tanpa external CSS.

2

Tanpa external Javascript.

3

Tanpa jQuery.

4

Desain modern dan responsif.

5

Animasi lebih smooth.

6

Timer berbentuk progress ring.

7

Progress bar animatif.

8

Informasi nama file.

9

Informasi ukuran file.

10

Informasi tipe file.

11

Informasi password atau proteksi file.

12

Warna aksen dapat diatur per Download Box.

13

Tombol download aktif setelah timer selesai.

14

Mendukung banyak Download Box dalam satu halaman.

15

Tidak membutuhkan ID berurutan.

Cara Memasang Download Box

CSS dan JavaScript dapat dipasang langsung pada artikel Blogger. Jika komponen akan dipakai di banyak artikel, saya lebih memilih menaruh keduanya satu kali pada template.

Jika Download Box nantinya digunakan pada banyak artikel, CSS dan Javascript sebaiknya dipasang satu kali pada HTML template Blogger. Setelah itu setiap artikel cukup menggunakan HTML Download Box saja.

Struktur sederhana Download Box terlihat seperti berikut.

<div class="cfDownloadBox"
data-url="https://example.com/file.zip"
data-name="CodeFlare Download Box"
data-ext="ZIP"
data-size="5 MB"
data-protection="CodeFlare"
data-time="8"
data-accent="#0083da">
</div>

Javascript akan mencari seluruh elemen dengan class cfDownloadBox kemudian membangun tampilannya secara otomatis.

Tidak membutuhkan ID berurutan

Setiap Download Box bekerja secara independen sehingga tidak lagi membutuhkan boxDlWrapper1, boxDlWrapper2 dan seterusnya.

Cara Menggunakan Download Box

Pengaturan Download Box dilakukan menggunakan atribut data-*. Anda hanya perlu memasukkan alamat file, nama file, tipe file, ukuran, password, timer dan warna aksen.

<div class="cfDownloadBox"
data-url="https://example.com/template.zip"
data-name="Template Blogger Premium"
data-ext="ZIP"
data-size="2.8 MB"
data-protection="codeflare.net"
data-time="10"
data-accent="#0083da">
</div>

Untuk mempermudah pembuatan kode tersebut saya juga menyediakan Generator Download Box yang dapat langsung digunakan pada artikel ini.

Generator Download Box

Generator berikut dapat digunakan untuk membuat syntax Download Box tanpa harus menulis seluruh atribut secara manual. Isi informasi file kemudian lihat hasilnya pada Live Preview sebelum kode dibuat.

CODEFLARE TOOLS Download Box Generator Buat kode Download Box secara otomatis.

LIVE

URL DOWNLOAD NAMA FILE FORMAT FILE UKURAN FILE PASSWORD / PROTECTION COUNTDOWN

DETIK

WARNA AKSEN

Tampilkan Area Sponsor Tambahkan tempat iklan pada Download Box.

LIVE PREVIEW

GENERATED HTML Paste kode pada mode HTML artikel Blogger.

Klik Generate Code setelah selesai mengatur Download Box.

Live Preview akan berubah secara otomatis mengikuti pengaturan yang dimasukkan. Setelah tampilannya sesuai, klik Generate Code kemudian gunakan tombol Copy Code untuk menyalin HTML.

Kode hasil generator hanya berisi struktur HTML Download Box. CSS dan Javascript utama cukup dipasang satu kali pada template Blogger.

Mengatur Informasi File

Setiap informasi Download Box diatur menggunakan atribut data berikut.

01data-url

Alamat File

URL file atau halaman tujuan yang akan dibuka setelah countdown selesai.

02data-name

Nama File

Nama file yang ditampilkan pada bagian utama Download Box.

03data-ext

Format File

Tipe file seperti ZIP, RAR, PDF, APK, HTML dan format lainnya.

04data-size

Ukuran File

Informasi ukuran file yang ditampilkan kepada pengunjung.

05data-protection

Proteksi File

Password atau informasi proteksi file. Atribut dapat dikosongkan jika tidak digunakan.

06data-time

Countdown

Jumlah waktu hitung mundur dalam satuan detik.

07data-accent

Warna Aksen

Digunakan untuk mengatur warna tombol, progress dan elemen aktif Download Box.

Memasang Iklan atau Sponsor

Area sponsor sengaja dipisahkan dari tombol Download agar pengunjung dapat membedakan antara iklan dan tombol yang digunakan untuk mengambil file.

Gunakan struktur berikut di dalam Download Box.

<div class="cfDownloadSponsor">

KODE IKLAN RESPONSIF

</div>

Jika tidak menggunakan sponsor, elemen tersebut cukup dihapus. Download Box tetap dapat berjalan seperti biasa.

Mengubah Waktu Countdown

Waktu countdown diatur menggunakan atribut data-time. Nilainya menggunakan satuan detik.

data-time="8"

Pengaturan yang nyaman

Gunakan countdown sekitar 5 sampai 10 detik agar fungsi timer tetap terasa tanpa membuat pengunjung menunggu terlalu lama.

Source Code Download Box

Berikut struktur dasar yang nantinya dihasilkan oleh Generator Download Box.

<div class="cfDownloadBox"
data-url="URL-DOWNLOAD"
data-name="NAMA FILE"
data-ext="ZIP"
data-size="5 MB"
data-protection="PASSWORD"
data-time="8"
data-accent="#0083da">

<div class="cfDownloadSponsor">
KODE IKLAN RESPONSIF
</div>

</div>

Setiap Download Box mempunyai proses countdown sendiri sehingga beberapa kotak dapat dipasang sekaligus di dalam satu artikel tanpa Javascript tambahan.

Pasang CSS dan Javascript di Template

Jika Download Box akan digunakan pada banyak artikel, pasang CSS dan Javascript berikut satu kali pada template Blogger. Setelah terpasang, setiap artikel hanya membutuhkan kode HTML yang dihasilkan oleh generator.

CSS berikut dapat diletakkan sebelum tag </head> atau pada bagian CSS template Blogger.

<style>

.cfDownloadBox{
--cfDlAccent:#0083da;
position:relative;
box-sizing:border-box;
width:100%;
max-width:760px;
margin:18px auto;
overflow:hidden;
border:1px solid #dce7f1;
border-radius:22px;
background:#fff;
color:#162235;
box-shadow:0 14px 38px rgba(24,69,105,.09),0 2px 8px rgba(24,69,105,.04);
isolation:isolate;
}

.cfDownloadBox *,
.cfDownloadBox *::before,
.cfDownloadBox *::after{
box-sizing:border-box;
}

.cfDlGlow{
position:absolute;
z-index:-1;
top:-100px;
right:-90px;
width:270px;
height:270px;
border-radius:50%;
background:rgba(0,131,218,.055);
pointer-events:none;
}

.cfDlHeader{
display:flex;
align-items:center;
gap:14px;
padding:21px 22px 18px;
}

.cfDlFileIcon{
position:relative;
flex:0 0 48px;
width:48px;
height:48px;
display:grid;
place-items:center;
overflow:hidden;
border-radius:15px;
background:#edf7fd;
color:var(--cfDlAccent);
}

.cfDlFileIcon svg{
position:relative;
z-index:2;
width:24px;
height:24px;
fill:currentColor;
}

.cfDlFileIcon span{
position:absolute;
left:-50%;
top:-100%;
width:200%;
height:38%;
background:linear-gradient(to bottom,transparent,rgba(255,255,255,.85),transparent);
transform:rotate(-10deg);
animation:cfDlScanner 4.6s ease-in-out infinite;
}

.cfDlTitle{
min-width:0;
flex:1;
}

.cfDlTitle > span{
display:block;
margin-bottom:3px;
font-size:12px;
font-weight:800;
letter-spacing:1.5px;
color:var(--cfDlAccent);
}

.cfDlTitle strong{
display:block;
overflow:hidden;
font-size:clamp(15px,2.3vw,19px);
line-height:1.35;
color:#162235;
text-overflow:ellipsis;
white-space:nowrap;
}

.cfDlStatus{
display:flex;
align-items:center;
gap:7px;
padding:7px 10px;
border-radius:999px;
background:#eefaf5;
color:#208a5b;
font-size:12px;
font-weight:800;
letter-spacing:.8px;
}

.cfDlStatus i{
width:7px;
height:7px;
border-radius:50%;
background:#29b975;
animation:cfDlStatusPulse 2.3s ease-out infinite;
}

.cfDlDivider{
position:relative;
height:1px;
margin:0 22px;
overflow:hidden;
background:#e4edf4;
}

.cfDlDivider span{
position:absolute;
top:0;
left:-25%;
width:25%;
height:1px;
background:linear-gradient(90deg,transparent,var(--cfDlAccent),transparent);
animation:cfDlLineMove 6s ease-in-out infinite;
}

.cfDlBody{
padding:19px 22px 22px;
}

.cfDlInfoGrid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.cfDlInfoItem{
min-width:0;
display:flex;
align-items:center;
gap:9px;
padding:12px;
border:1px solid #e1ebf3;
border-radius:14px;
background:#f6fafc;
}

.cfDlInfoItem > i{
flex:0 0 31px;
width:31px;
height:31px;
display:grid;
place-items:center;
border-radius:9px;
background:#edf7fd;
color:var(--cfDlAccent);
font-style:normal;
}

.cfDlInfoItem > i svg{
width:16px;
height:16px;
fill:currentColor;
}

.cfDlInfoItem > div{
min-width:0;
}

.cfDlInfoItem span{
display:block;
font-size:12px;
font-weight:800;
letter-spacing:1px;
color:#7b899a;
}

.cfDlInfoItem strong{
display:block;
overflow:hidden;
font-size:15px;
line-height:1.45;
color:#26384d;
text-overflow:ellipsis;
white-space:nowrap;
}

.cfDownloadSponsor{
width:100%;
margin-top:14px;
padding:15px;
overflow:hidden;
border:1px dashed #cadbea;
border-radius:14px;
background:#f7fafc;
color:#54677b;
text-align:center;
}

.cfDownloadSponsor > span{
display:block;
margin-bottom:3px;
font-size:12px;
font-weight:800;
letter-spacing:1.4px;
color:#77889a;
}

.cfDownloadSponsor small{
display:block;
line-height:1.55;
color:#6b7a8b;
}

.cfDownloadSponsor img,
.cfDownloadSponsor iframe,
.cfDownloadSponsor ins{
max-width:100%;
}

.cfDlAction{
display:flex;
align-items:center;
gap:12px;
margin-top:16px;
}

.cfDlCounter{
position:relative;
flex:0 0 56px;
width:56px;
height:56px;
display:grid;
place-items:center;
}

.cfDlCounter svg{
position:absolute;
inset:0;
width:56px;
height:56px;
transform:rotate(-90deg);
}

.cfDlCounter circle{
fill:none;
stroke-width:3;
}

.cfDlCounterTrack{
stroke:#dfeaf2;
}

.cfDlCounterValue{
stroke:var(--cfDlAccent);
stroke-linecap:round;
transition:stroke-dashoffset .65s ease;
}

.cfDlCounter strong{
position:relative;
z-index:2;
max-width:44px;
overflow:hidden;
font-size:12px;
font-weight:800;
color:#26384d;
}

.cfDlButton{
position:relative;
flex:1;
min-width:0;
height:58px;
display:flex;
align-items:center;
gap:11px;
padding:0 17px;
overflow:hidden;
border:0;
border-radius:15px;
background:var(--cfDlAccent);
color:#fff;
box-shadow:0 8px 20px rgba(0,0,0,.12);
cursor:pointer;

text-align:left;
transition:transform .28s ease,box-shadow .28s ease,background .28s ease;
}

.cfDlButton::before{
content:"";
position:absolute;
top:-40%;
left:-35%;
width:28%;
height:180%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
transform:skewX(-20deg);
transition:left .65s ease;
}

.cfDlButton:hover{
transform:translateY(-2px);
box-shadow:0 13px 27px rgba(0,0,0,.16);
}

.cfDlButton:hover::before{
left:115%;
}

.cfDlBtnIcon{
flex:0 0 34px;
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:10px;
background:rgba(255,255,255,.16);
}

.cfDlBtnIcon svg{
width:18px;
height:18px;
fill:currentColor;
}

.cfDlBtnText{
min-width:0;
flex:1;
}

.cfDlBtnText strong{
display:block;
font-size:15px;
line-height:1.35;
}

.cfDlBtnText small{
display:block;
overflow:hidden;
margin-top:1px;
font-size:12px;
opacity:.82;
text-overflow:ellipsis;
white-space:nowrap;
}

.cfDlBtnArrow{
font-size:20px;
transition:transform .25s ease;
}

.cfDlButton:hover .cfDlBtnArrow{
transform:translateX(3px);
}

.cfDlButton.is-running{
cursor:wait;
background:#60798c;
}

.cfDlButton.is-ready{
background:#21a56a;
}

.cfDlProgress{
width:100%;
height:4px;
margin-top:15px;
overflow:hidden;
border-radius:999px;
background:#e8eff5;
}

.cfDlProgress span{
display:block;
width:0;
height:100%;
border-radius:inherit;
background:var(--cfDlAccent);
transition:width .7s ease;
}

.cfDlMessage{
display:flex;
align-items:center;
gap:7px;
min-height:16px;
margin-top:10px;
}

.cfDlMessage i{
width:6px;
height:6px;
border-radius:50%;
background:#29b975;
}

.cfDlMessage span{
font-size:12px;
color:#718095;
}

@keyframes cfDlScanner{
0%{top:-100%;opacity:0}
12%{opacity:1}
42%{top:115%;opacity:.7}
100%{top:115%;opacity:0}
}

@keyframes cfDlStatusPulse{
0%{box-shadow:0 0 0 0 rgba(41,185,117,.3)}
70%{box-shadow:0 0 0 7px rgba(41,185,117,0)}
100%{box-shadow:0 0 0 0 rgba(41,185,117,0)}
}

@keyframes cfDlLineMove{
0%{left:-30%;opacity:0}
15%{opacity:1}
65%{left:105%;opacity:1}
100%{left:105%;opacity:0}
}

@media screen and (max-width:620px){

.cfDownloadBox{
border-radius:18px;
}

.cfDlHeader{
padding:17px 16px 15px;
}

.cfDlDivider{
margin:0 16px;
}

.cfDlBody{
padding:16px;
}

.cfDlInfoGrid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.cfDlProtection{
grid-column:1/-1;
}

}

@media screen and (max-width:430px){

.cfDlStatus span{
display:none;
}

.cfDlInfoItem{
gap:7px;
padding:9px;
}

.cfDlAction{
gap:8px;
}

.cfDlCounter{
flex-basis:50px;
width:50px;
height:50px;
}

.cfDlCounter svg{
width:50px;
height:50px;
}

.cfDlCounter strong{
font-size:12px;
}

.cfDlButton{
height:54px;
padding:0 11px;
}

.cfDlBtnIcon{
flex-basis:30px;
width:30px;
height:30px;
}

.cfDlBtnArrow{
display:none;
}

.cfDlBtnText strong{
font-size:15px;
}

.cfDlBtnText small{
font-size:12px;
}

}

</style>

Setelah CSS terpasang, salin Javascript berikut dan letakkan tepat sebelum tag </body> pada HTML template Blogger.

<script>
//<![CDATA[
(function(){
'use strict';

function iconDownload(){
return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 3h2v9l3.5-3.5 1.4 1.4-5.9 5.9-5.9-5.9 1.4-1.4L11 12V3Zm-6 15h14v2H5v-2Z"></path></svg>';
}

function iconFile(){
return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 2h8l4 4v16H6V2Zm7 2v3h3l-3-3ZM8 9v2h8V9H8Zm0 4v2h8v-2H8Zm0 4v2h5v-2H8Z"></path></svg>';
}

function iconLock(){
return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v10h14V10a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V6Zm3 9.73V18h-2v-2.27a2 2 0 1 1 2 0Z"></path></svg>';
}

function iconSize(){
return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h7v2H7.41L11 9.59 9.59 11 6 7.41V11H4V4Zm9 0h7v7h-2V7.41L14.41 11 13 9.59 16.59 6H13V4ZM4 13h2v3.59L9.59 13 11 14.41 7.41 18H11v2H4v-7Zm14 0h2v7h-7v-2h3.59L13 14.41 14.41 13 18 16.59V13Z"></path></svg>';
}

function validColor(value){
return /^#[0-9A-F]{6}$/i.test(value) ? value : '#0083da';
}

function buildDownloadBox(box){

if(!box || box.getAttribute('data-cf-built')==='true'){
return;
}

box.setAttribute('data-cf-built','true');

var url=box.getAttribute('data-url') || '#';
var fileName=box.getAttribute('data-name') || 'Download File';
var ext=box.getAttribute('data-ext') || 'FILE';
var size=box.getAttribute('data-size') || '-';
var protection=box.getAttribute('data-protection') || 'Tidak ada';
var accent=validColor(box.getAttribute('data-accent') || '#0083da');
var seconds=parseInt(box.getAttribute('data-time'),10);

if(!Number.isFinite(seconds) || seconds<1){
seconds=8;
}

if(seconds>120){
seconds=120;
}

box.style.setProperty('--cfDlAccent',accent);

var sponsor=box.querySelector('.cfDownloadSponsor');
var sponsorHTML=sponsor ? sponsor.outerHTML : '';

box.innerHTML=
'<div class="cfDlGlow"></div>'+
'<div class="cfDlHeader">'+
'<div class="cfDlFileIcon">'+iconFile()+'<span></span></div>'+
'<div class="cfDlTitle">'+
'<span>DOWNLOAD PACKAGE</span>'+
'<strong class="cfDlFileName"></strong>'+
'</div>'+
'<div class="cfDlStatus"><i></i><span>ONLINE</span></div>'+
'</div>'+
'<div class="cfDlDivider"><span></span></div>'+
'<div class="cfDlBody">'+
'<div class="cfDlInfoGrid">'+
'<div class="cfDlInfoItem">'+
'<i>'+iconFile()+'</i>'+
'<div><span>FILE TYPE</span><strong class="cfDlExt"></strong></div>'+
'</div>'+
'<div class="cfDlInfoItem">'+
'<i>'+iconSize()+'</i>'+
'<div><span>FILE SIZE</span><strong class="cfDlSize"></strong></div>'+
'</div>'+
'<div class="cfDlInfoItem cfDlProtection">'+
'<i>'+iconLock()+'</i>'+
'<div><span>PROTECTION</span><strong class="cfDlProtect"></strong></div>'+
'</div>'+
'</div>'+
sponsorHTML+
'<div class="cfDlAction">'+
'<div class="cfDlCounter">'+
'<svg viewBox="0 0 52 52" aria-hidden="true">'+
'<circle class="cfDlCounterTrack" cx="26" cy="26" r="22"></circle>'+
'<circle class="cfDlCounterValue" cx="26" cy="26" r="22"></circle>'+
'</svg>'+
'<strong class="cfDlSeconds"></strong>'+
'</div>'+
'<button class="cfDlButton" type="button">'+
'<span class="cfDlBtnIcon">'+iconDownload()+'</span>'+
'<span class="cfDlBtnText">'+
'<strong>START DOWNLOAD</strong>'+
'<small>Click to prepare file</small>'+
'</span>'+
'<span class="cfDlBtnArrow">→</span>'+
'</button>'+
'</div>'+
'<div class="cfDlProgress"><span></span></div>'+
'<div class="cfDlMessage"><i></i><span>File ready. Press download to continue.</span></div>'+
'</div>';

var nameEl=box.querySelector('.cfDlFileName');
var extEl=box.querySelector('.cfDlExt');
var sizeEl=box.querySelector('.cfDlSize');
var protectionEl=box.querySelector('.cfDlProtect');
var secondEl=box.querySelector('.cfDlSeconds');
var button=box.querySelector('.cfDlButton');
var buttonTitle=button.querySelector('.cfDlBtnText strong');
var buttonSub=button.querySelector('.cfDlBtnText small');
var circle=box.querySelector('.cfDlCounterValue');
var progress=box.querySelector('.cfDlProgress span');
var message=box.querySelector('.cfDlMessage span');

nameEl.textContent=fileName;
extEl.textContent=ext;
sizeEl.textContent=size;
protectionEl.textContent=protection || 'Tidak ada';
secondEl.textContent=seconds;

var circumference=2*Math.PI*22;

circle.style.strokeDasharray=circumference;
circle.style.strokeDashoffset='0';

var running=false;
var ready=false;
var timer=null;

button.addEventListener('click',function(){

if(ready){
window.location.href=url;
return;
}

if(running){
return;
}

running=true;

button.classList.add('is-running');

buttonTitle.textContent='PREPARING FILE';
buttonSub.textContent='Please wait a moment';
message.textContent='Preparing download link...';

var remaining=seconds;

secondEl.textContent=remaining;

timer=window.setInterval(function(){

remaining--;

if(remaining<0){
remaining=0;
}

secondEl.textContent=remaining;

var completed=(seconds-remaining)/seconds;

circle.style.strokeDashoffset=String(circumference*completed);
progress.style.width=(completed*100)+'%';

if(remaining<=0){

window.clearInterval(timer);

running=false;
ready=true;

button.classList.remove('is-running');
button.classList.add('is-ready');

buttonTitle.textContent='DOWNLOAD NOW';
buttonSub.textContent='Your file is ready';
message.textContent='Download link is ready.';
secondEl.textContent='READY';

progress.style.width='100%';

}

},1000);

});

}

document.querySelectorAll('.cfDownloadBox').forEach(function(box){
buildDownloadBox(box);
});

})();
//]]>
</script>

Penting: CSS dan Javascript utama cukup dipasang satu kali di template. Setelah itu jangan memasangnya kembali pada setiap postingan.

Setelah CSS dan Javascript sudah berada di template Blogger, cukup gunakan Generator Download Box pada artikel ini untuk membuat HTML baru setiap kali ingin membagikan file.

Download Box dan Pengalaman Pengguna

Download Box tidak membuat artikel otomatis naik peringkat di Google. Nilainya ada pada pengalaman pengguna: link file lebih mudah dikenali, informasi file lebih jelas, dan tombol download tidak tercampur dengan area sponsor.

Untuk CodeFlare saya lebih memilih countdown singkat, tombol yang jelas, dan tidak membuat pembaca menunggu terlalu lama. Jika timer terlalu panjang atau posisi iklan membingungkan, fungsi Download Box justru bisa mengganggu.

Struktur Download Box ini dibuat sederhana, modern dan mudah dimodifikasi. Generator yang tersedia juga mempermudah pembuatan syntax sehingga atribut tidak perlu ditulis satu per satu.

Untuk blog yang menyediakan banyak file, sistem ini masih dapat dikembangkan lagi menjadi Download Manager dengan mirror server, checksum, versi file, informasi update, jumlah download ataupun integrasi API sesuai kebutuhan.

CODEFLARE DEVELOPMENT Butuh Download Box dengan fitur khusus?

CodeFlare dapat membantu membuat widget Blogger custom, generator download, timer, sistem redirect, file manager ataupun komponen Blogger lain sesuai kebutuhan website Anda.

Lihat Layanan CodeFlare →