Beranda
Blog Tips
Wedget

Cara membuat Tombol Download dengan Hitungan Mundur di Blog

Cara membuat tombol download dengan hitungan mundur di Blogger menggunakan HTML, CSS, dan JavaScript lengkap + mudah dipahami.
TipsTechPraktis
Cara Membuat Tombol Download dengan Hitungan Mundur TipsTechPraktis

Apa Itu Tombol Download dengan Countdown

Tombol download dengan countdown adalah fitur tombol unduhan yang dilengkapi dengan hitungan mundur sebelum file bisa di-download. Biasanya digunakan di blog atau website untuk meningkatkan interaksi pengguna serta memberikan jeda waktu sebelum proses unduhan dimulai.

Dengan menggunakan tombol download countdown di Blogger, kamu bisa menampilkan informasi tambahan, mengurangi klik spam, dan membuat tampilan blog terlihat lebih profesional dan modern.

Fitur ini sangat cocok digunakan untuk blog download file, template, script, atau aplikasi agar terlihat lebih profesional dan user-friendly.

Cara Membuat Tombol Download dengan Hitungan Mundur

Berikut ini adalah langkah-langkah mudah untuk membuat tombol download dengan countdown menggunakan HTML, CSS, dan JavaScript tanpa plugin di Blogger:

Tambahkan CSS ke Template

CSS: Paste kode ini di Dashboard → Tema → Edit HTML → Sebelum ]]></b:skin> 

/* Download Timer by TipsTechPraktis */

.ttpCo{

  --boxC : #08102b; /* Font Color */

  --boxBg : #fffdfc; /* Container Background */

  --fontF : inherit; /* Font Family */

  --svgS : #fffdfc; /* Button SVG Stroke */

  --btnBg : #482dff; /* Button Background */

  --darkC : #fffdfc; /* Dark Font Color */

  --darkBt : #e91e63; /* Dark Button Background */

  --darkBa: #2d2d30; /* Dark Background Alt */

  --darkBs: #252526 ; /* Dark Background Sec */

}

.ttpCo{-webkit-tap-highlight-color:transparent;position:relative;width:100%;max-width:480px;margin:30px 0;color:var(--boxC);font-family:var(--fontF);transition:margin .6s ease;-webkit-transition:margin .6s ease}

.ttpBx{position:relative;z-index:2;background:var(--boxBg);width:100%;padding:15px;display:flex;flex-direction:column;font-size:14px;border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.09)}

.ttpTp{display:flex;flex-direction:row} .ttpIm{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:60px;height:60px;padding:10px;margin-right:15px;background:rgba(0,0,0,.08);border-radius:6px;transition:all .4s ease;-webkit-transition:all .4s ease} .ttpIm::before{content:attr(data-text);opacity:.7} .ttpIm[style]:not([style='']){width:100px;height:100px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 10px rgba(0,0,0,.1)} .ttpIm[style]:not([style=''])::before{display:none}

.ttpSv{opacity:0;position:absolute;width:calc(100% + 12px);height:calc(100% + 12px);top:-6px;bottom:-6px;right:-6px;left:-6px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;transition:all .5s ease;-webkit-transition:all .5s ease} .ttpIm[style]:not([style='']) .ttpSv{width:calc(100% + 20px);height:calc(100% + 20px);top:-10px;bottom:-10px;right:-10px;left:-10px} .ttpSv .b{fill:none;stroke:#e6e6e6;opacity:.9} .ttpSv .c{fill:none;stroke:var(--btnBg);stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round;transition:all .5s ease;-webkit-transition:all .5s ease}

.ttpIn{flex-grow:1;width:calc(100% - 115px)} .ttpIn >*{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ttpIn >*::before{content:attr(data-text) ': ';opacity:.8}

.ttpBt{background:var(--btnBg);position:absolute;width:40px;height:40px;bottom:-20px;right:20px;outline:none;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(0,0,0,.09);transition:all .3s ease;-webkit-transition:all .3s ease;cursor:pointer} .ttpBt:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)} .ttpBt svg{width:24px;height:24px;fill:none;stroke:var(--svgS);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2} .ttpBt.ttpDl{visibility:visible;opacity:1} .ttpBt.ttpRt{visibility:hidden;opacity:0;bottom:-40px}

.ttpSl{z-index:1;position:absolute;bottom:0;height:60px;width:100%;background:var(--boxBg);border-radius:0 0 10px 10px;transition:all .6s ease;-webkit-transition:all .6s ease} .ttpMe{position: absolute;width:100%;height:40px;bottom:0;display:flex;align-items:center;justify-content:center;font-size:14px} .ttpMe span{color:var(--btnBg);font-size:18px;font-weight:600;margin:0 5px}

.ttpCo.ttpAlt{margin:30px 0 70px} .ttpCo.ttpAlt .ttpIm{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);border-radius:50%} .ttpCo.ttpAlt .ttpSv{opacity:1} .ttpCo.ttpAlt .ttpDl{visibility:hidden;opacity:0;bottom:-40px} .ttpCo.ttpRty .ttpRt{visibility:visible;opacity:1;bottom:-20px} .ttpCo.ttpAlt .ttpSl{bottom:-40px;box-shadow:0 0 35px rgba(0,0,0,.09)}

.darkMode .ttpCo{color:var(--darkC)} .darkMode .ttpBx{background:var(--darkBs)} .darkMode .ttpIm, .darkMode .ttpSl{background:var(--darkBa)} .darkMode .ttpSv .b{stroke:#404045} .darkMode .ttpSv .c{stroke:var(--darkBt)} .darkMode .ttpBt{background:var(--darkBt)} .darkMode .ttpMe span{color:var(--darkBt)}

Tambahkan HTML di Post

HTML: Tempel kode ini di postingan blog untuk menampilkan wedget nya Post Baru → Pilih Mode HTML

<!--[ Download Timer by TipsTechPraktis  ]-->

<div class='ttpCo' id='download1'>

  <div class='ttpBx'>

    <div class='ttpTp'>

      <div class='ttpIm' data-text='.png' style='background-image:url(image_url_here)'>

        <svg class='ttpSv' viewBox='0 0 34 34'>

          <circle class='b' cx='17' cy='17' r='15.92' />

          <circle class='c ttpPg' cx='17' cy='17' r='15.92' />

        </svg>

      </div>

      <div class='ttpIn'>

        <span data-text='Name'>Music_Wallpaper.png</span>

        <span data-text='Category'>Music</span>

        <span data-text='Size'>3.05MB</span>

        <span data-text='Resolution'>1920×1080</span>

        <span data-text='Extension'>.png</span>

      </div>

    </div>

    <button onclick='download("#", "10", "false", "#download1")' class='ttpBt ttpDl'><svg 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='ttpBt ttpRt'><svg 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='ttpSl'>

    <div class='ttpMe'></div>

  </div>

</div>

Tambahkan JavaScript

JS: Paste kode ini di Dashboard → Tema → Edit HTML → Sebelum </body> atau di bawah HTML post.

<script>

  /*<![CDATA[*/

  /* Download Timer by TipsTechPraktis  */

  function download(link, time, newtab, id){

    var ttpCo = document.querySelector(id),

        ttpMe = document.querySelector(id + ' .ttpMe'),

        ttpPg = document.querySelector(id + ' .ttpPg'),

        ttpDl = document.querySelector(id + ' .ttpDl'),

        ttpRt = document.querySelector(id + ' .ttpRt'),

        ttpLf = time;

    

    ttpMe.innerHTML = 'Starting Download in <span>' + ttpLf + '</span> seconds...';

    ttpCo.classList.add('ttpAlt');

    

    var downloadTimer = setInterval(function timeCount(){

        ttpLf -= 1;

        ttpMe.innerHTML = 'Starting Download in <span>' + ttpLf + '</span> seconds...';

        ttpPg.style.strokeDashoffset = Math.floor((ttpLf / time) * 100);

      if(ttpLf <= 0){

        clearInterval(downloadTimer);

        ttpMe.innerHTML = 'Please wait...';

        

        if (newtab == 'true'){

          window.open(link, '_blank');

        } else {

          window.location.href = link;

        };

        

        ttpRt.onclick = function (){

          if (newtab == 'true'){

            window.open(link, '_blank');

          } else {

            window.location.href = link;

          }

        };

        

        setTimeout(() => {

          ttpCo.classList.remove('ttpAlt');

          ttpCo.classList.add('ttpRty');

        }, 4000);

      }

    }, 1000);

  };

  /*]]>*/

</script>
Baca Juga :

Kelebihan dan Kekurangan

  • Kelebihan: Interaktif, meningkatkan UX, menampilkan info file, SEO-friendly.
  • Kekurangan: Butuh JavaScript, jika countdown terlalu lama bisa mengganggu pengunjung.

Kesimpulan

Dengan langkah-langkah ini, kamu bisa menambahkan tombol download interaktif dengan hitungan mundur yang SEO-friendly, responsif, dan meningkatkan pengalaman pengunjung. Setiap tombol bisa diatur berbeda durasi countdown dan link file sehingga fleksibel untuk berbagai konten.

Faq Post Membuat tombol timer download

Apa itu tombol download countdown?

Tombol download countdown adalah tombol interaktif yang menampilkan hitungan mundur sebelum file dapat diunduh, meningkatkan UX dan interaksi pengunjung.

Apa kelebihan tombol countdown?

Interaktif, SEO-friendly, dan memberikan waktu bagi pengunjung untuk membaca informasi tambahan sebelum download.

Apa kekurangannya?

Memerlukan JavaScript, dan countdown terlalu lama bisa mengurangi kenyamanan pengunjung.

Bagaimana cara pasang di Blogger?

Tempel HTML accordion di post mode HTML, CSS di template atau di tag <style> post, dan JavaScript countdown jika diperlukan.

Posting Komentar