Cara Membuat Tombol Countdown Timer Download di Blog

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024
2

Hi Web Developer! Kembali lagi bersama dengan guru design. Kali ini guru design akan membahas bagaimana cara membuat tombol countdown timer download atau tombol download dengan penghitung waktu mundur, kamu pasti sering menemukan tombol download saat di klik muncul timer biasanya 30 detik? jika iya maka itulah yang akan kita buat. yuk lang sung ke tutorialnya aja.

cara-membuat-tombol-countdown-timer

Cara Membuat Tombol Countdown Timer Download di Blog

Sebelum masuk ke pembahasan, kita cari tahu dulu apa sih manfaatnya tombol countdown timer download ini pada blog kita?

Manfaat Menggunakan Tombol Countdown Timer

  1. Widget ini akan membantu Anda mengurangi rasio pentalan yang akan berdampak positif pada SEO blog Anda.
  2. Widget ini juga membantu Anda meningkatkan penghasilan dari blog.

Tambahkan CSS dan JavaScript

Pertama, buka Blogger >> Tema >> Edit HTML >> Kemudian tambahkan kode CSS ini sebelum </head>

<style type='text/css'>
/* Download Count */ 
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#282828;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#count-download:hover{background:#000000;color:#fff;outline:none}.countdown{display:block;margin:0 auto;border-radius:4px}.countdown-box{background:rgb(33 150 243);color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-countdown{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:0.7em;box-shadow:0px 0px 5px -2px;}#count-download{float:right}#count-download{padding:10px 20px;border-radius:3px;background:#fff;color:#282828;float:right;text-align:center;font-size:14px;text-transform:capitalize}.countdown-info span{display:inline-block;line-height:38px;float:right;font-size:0.8em}.file-deskripsi{display:block;font-size:0.8em;}.file-deskripsi span{margin-right:3px}
@media screen and (max-width:640px){.countdown{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#count-download{width:100%;margin-bottom:10px}.countdown-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
</style>

Selanjutnya, tambahkan kode JavaScript di bawah ini sebelum </body>

<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("count-download"),t=document.getElementById("btnx"),a=document.getElementById("count-download").href,l=15,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> File siap diunduh dalam "+l.toString()+" detik...",t.style.display="none")},1e3)}
//]]>
</script>

Kemudian simpan tema.

Selanjutnya ke bagian postingan, pilih tab atau tampilan HTML (bukan Compose) salin kode di bawah ini yang nantinya sebagai tombol countdown timer. 

<div class="countdown">
<div class="countdown-box">
<div class="countdown-info">
<div class="file-info">
Nama File
</div> 
<button onclick="generate()" id="btnx">download</button>
<a id="count-download" href="https://www.youtube.com/redirect?q=https%3A%2F%2Fwww.gurudzgn.com%2F" style="display:none">Re-download</a>
</div>
<div class="file-deskripsi">
<span class="uploader">Theme Guru Design</span><br>
<span class="file-size">
 Ukuran File 5MB</span>
</div>
</div>
<div class="catatan-countdown">
Jika tidak terdownload secara otomatis, silahkan klik tombol Download kembali. Dan jika link rusak, mohon laporkan melalui Contact Formulir blog ini.
</div>
</div>

result

Demikian tutorial Cara Membuat Tombol Countdown Timer Download di Blog, semoga bermanfaat terimakasih.

Rafiqi, S.Kom.