Cara Membuat Tombol Download Dengan Waktu

---

Tombol download dengan kotak jeda waktu buatan codeflare memiliki tampilan minimalis,ringan dan fitur super premium. Tombol download dimodifikasi dengan tambahan fitur kotak jeda waktu tertentu (countdown timer) yang bisa disesuaikan dan juga dapat diintegrasikan dengan tampilan iklan dan penggunaan shortlink. Tombol download dengan kotak waktu tunggu ini sudah menerapkan aturan protokol keamanan browser terbaru jadi aman digunakan tanpa menyebabkan error sehingga dapat dikombinasikan dengan tampilan iklan seperti adsense, mgid, adhitz dan sejenisnya.

Tombol download dengan waktu memiliki 2 komponen yaitu, tombol download standar dan kotak penampil jeda waktu. Tombol download secara default sudah diberikan namun anda juga masih bisa menggunakan tombol download buatan anda sendiri, anda cukup mengatur nama class dari tombol download yang digunakan pada settingan javascript.

Tampilan tombol download meiliki tampilan flat standar namun masih bisa anda sesuaikan agar bisa sesuai dengan tampilan dari tema blog anda, sedangkan untuk tampilan kotak waktu hitungan mundur memiliki tampilan flat minimalis serta responsif. Cara pengaturan elemen-elemen tersebut bisa disesuaikan melalui pengaturan kode CSS yang cukup mudah untuk dimodifikasi.

Penggunaan tombol download dengan fitur kotak (box) pengatur waktu (timer) bertujuan agar link donwload yang dituju tidak langsung mengarahkan pengunjung blog menuju link download yang diberikan, namun sedikit diberikan waktu tunggu dengan harapan pengunjung bisa melihat-lihat konten artikel blog anda sejenak dan juga berfungsi menurunkan resiko bounce rate google terhadap blog anda.

Mekanisme dari tombol download dengan kotak waktu tunggu ini yaitu, setelah tombol download ditekan (klik) maka akan muncul kotak waktu hitungan mundur dengan dipadukan tampilan gambar yang bisa berupa iklan, pengumuman ataupun informasi tertentu yang ingin disampaikan. Setelah penghitung waktu mundur habis selanjutnya tombol download link sebenarnya akan terlihat.

Tombol download link sebenarnya juga memiliki tambahan fitur yang bisa dipasangkan dengan penggunaan shortlink seperti adf.ly, short.es, adfoc.us dan lain sebagainya.

Berikut contoh ilustrasi tampilan untuk tombol download dan kotak penghitung mundur seperti yang terlihat di bawah ini.

Download

Ketika tombol download ditekan (klik) maka akan muncul kotak penghitung mundur waktu dengan tampilan iklan yang sudah ditentukan.

Download link ready in [ -- ] second

Setelah waktu penghitung mundur habis maka akan muncul tombol download link sebenarnya yang bisa dipasang dengan penggunaan shortlink.

open link

Referensi Artikel Terkait :

• Cara Pasang Download Box Counter Super Keren
• Cara Mudah Membuat Efek Zoom Pada Gambar

Oke sobat blogger buat yeng tertarik untuk membuat Tombol Download Dengan Kotak Jeda Waktu ini silakan disimak tutorialnya di bawah ini.

Informasi Singkat

---

Tingkat bouncing (bounce rate) adalah istilah pemasaran Internet yang digunakan dalam analisis lalu lintas web. Ini mewakili persentase pengunjung yang memasuki situs dan kemudian pergi ("pantulan") daripada terus melihat halaman lain dalam situs yang sama. Rasio pentalan dihitung dengan menghitung jumlah kunjungan halaman tunggal dan membaginya dengan total kunjungan. Ini kemudian direpresentasikan sebagai persentase dari total kunjungan.

Rasio pentalan adalah ukuran "kelekatan". Pemikirannya adalah bahwa situs web yang efektif akan melibatkan pengunjung lebih dalam ke halaman situs web. Mendorong pengunjung untuk melanjutkan kunjungan mereka. Ini dinyatakan sebagai persentase dan mewakili proporsi kunjungan satu halaman terhadap total kunjungan.

Rasio pentalan (%) = Kunjungan yang hanya mengakses satu halaman ÷ Total kunjungan (#) ke situs web.

---

Sumber : Wikipedia

DAFTAR ISI

1. Cara Pemasangan Widget Pada Blogger
2. Cara Penggunaan Tombol Download
3. Cara Modifikasi Tampilan Kotak Waktu Tunggu

#1 Cara Pemasangan Widget Pada Blogger

Tombol download dengan waktu ini sudah admin buatkan kodenya anda tinggal memasang kode tersebut di bawah ini ke dalam kode HTML template blog atau website. Jika anda menggunakan blogspot maka kode tersebut bisa juga dipasangkan pada kotak widget blog atau dengan menekan tombol Add to Blogger untuk mempermudah dan mempercepat proses pemasangan kode.

Oke berikut langkah-langkah cara pemasangan kode untuk tombol download dengan waktu jika dipasangkan ke dalam kode HTML template blogspot.

PERINGATAN

Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah.

• Silakan login dahulu ke blog Anda.


• Klik tombol Tema untuk masuk ke tema editor.
  
  
  


• Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.
  
  
  


• Geser scrollbar ke posisi paling bawah.
  
  
  


• Letakan kode dibawah ini tepat diatas kode </body>.
  
  
  
  
  
  <style>
  .cf-btn-download{
  box-shadow: inset 0px 1px 0px 0px #66d4ff;
  background: linear-gradient(to bottom, #90c3f9 5%, #0188ef 100%);
  background-color: #90c3f9;
  border-radius: 6px;
  border: 1px solid #1689bb;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #5f5a5a;
  text-transform: capitalize;
  margin-top: 5px;
  transition: all .2s linear;
  }
  #linkTimerActive{
  padding:5px;
  margin:10px 0;
  background-color:#0083da;
  border:none;
  box-sizing:border-box;
  width:100%;
  border-radius:4px;
  color:#fff;
  font-size:16px;
  text-align:center;
  }
  .linkTimerImage{
  box-sizing:border-box;
  width:auto;
  cursor:pointer;
  }
  #btnLinkGoActive{
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
  background-color:#f9f9f9;
  border-radius:6px;
  border:1px solid #dcdcdc;
  display:inline-block;
  cursor:pointer;
  color:#666666;
  font-family:Arial;
  font-size:16px;
  font-weight:bold;
  padding:6px 24px;
  text-decoration:none;
  text-shadow:0px 1px 0px #ffffff;
  text-transform: capitalize;
  margin-top:5px;
  transition: all .2s linear;
  }
  #btnLinkGoActive:hover,.cf-btn-download:hover{
  background:#333;
  color:#fff;
  text-shadow:none;
  box-shadow:none;
  }
  </style>
  <script>
  var setTimerDownload = 20;
  var elmBtnDownloadCd = ".cf-btn-download";
  var banner300x250 = "https://cdn.adf.ly/images/banners/adfly.300x250.1.gif";
  var banner728x90 = "https://cdn.adf.ly/images/banners/adfly.728x90.1.gif";
  var urlLinkAds = "https://join-adf.ly/822497";
  var urlShortLink = "http://adf.ly/822497/";
  /*--------------------------------------------*/
  function setBtnTimerCf(){
  var a = $(elmBtnDownloadCd);
  for(var i=0;i<a.length;i++){
  $(a[i]).attr({"id":"CFBtnDlLink"+i,"onclick":"generate(this.id);","data-href":$(a[i]).attr("href")});
  $(a[i]).attr("href","#CFBtnDlLink"+i);$(a[i]).removeAttr("target");}}
  var getRandomUrlLink=true;var chkBtnIsActivated=false;var btnTimerActivated=null;var hostDlUrlLink="";
  function generate(x){
  if(chkBtnIsActivated==true){clearInterval(btnTimerActivated);$("#linkTimerActive").remove();}
  var l=setTimerDownload;var n=document.getElementById(x);
  if($(window).width()<500){var b=banner300x250;}else{var b=banner728x90;}
  /*this code is provided by codeflare blogspot 2021*/
  var c=urlLinkAds;hostDlUrlLink=n.getAttribute("data-href");
  d=document.createElement("div");d.id="linkTimerActive";
  $(n).slideDown().after(d);chkBtnIsActivated=true;var lc=l;
  var _0x6af6=["\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x73\x63\x72\x69\x70\x74\x43\x72\x65\x64\x69\x74\x27\x20\x6F\x6E\x63\x6C\x69\x63\x6B\x3D\x27\x73\x6F\x75\x72\x63\x65\x50\x61\x67\x65\x44\x4C\x42\x75\x74\x74\x6F\x6E\x28\x29\x27\x3E\x3C\x73\x70\x61\x6E\x20\x74\x69\x74\x6C\x65\x3D\x27\x42\x75\x74\x74\x6F\x6E\x20\x44\x6F\x77\x6E\x6C\x6F\x61\x64\x20\x43\x6F\x75\x6E\x74\x65\x72\x20\x76\x31\x2E\x30\x35\x27\x3E\x3C\x69\x20\x63\x6C\x61\x73\x73\x3D\x27\x66\x61\x20\x66\x61\x2D\x69\x6E\x66\x6F\x2D\x63\x69\x72\x63\x6C\x65\x27\x20\x61\x72\x69\x61\x2D\x68\x69\x64\x64\x65\x6E\x3D\x27\x74\x72\x75\x65\x27\x3E\x3C\x2F\x69\x3E\x20\x6D\x6F\x72\x65\x20\x69\x6E\x66\x6F\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x69\x6D\x67\x20\x63\x6C\x61\x73\x73\x3D\x27\x6C\x69\x6E\x6B\x54\x69\x6D\x65\x72\x49\x6D\x61\x67\x65\x27\x20\x73\x72\x63\x3D\x27","\x27\x20\x62\x6F\x72\x64\x65\x72\x3D\x27\x30\x27\x20\x6F\x6E\x63\x6C\x69\x63\x6B\x3D\x27\x77\x69\x6E\x64\x6F\x77\x2E\x6F\x70\x65\x6E\x28\x22","\x22\x2C\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x29\x27\x2F\x3E\x3C\x62\x72\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x27\x74\x78\x74\x54\x69\x6D\x65\x72\x41\x63\x74\x69\x76\x65\x27\x20\x73\x74\x79\x6C\x65\x3D\x27\x70\x61\x64\x64\x69\x6E\x67\x3A\x31\x30\x70\x78\x20\x30\x20\x30\x20\x30\x3B\x27\x3E\x3C\x69\x20\x63\x6C\x61\x73\x73\x3D\x27\x66\x61\x20\x66\x61\x2D\x68\x6F\x75\x72\x67\x6C\x61\x73\x73\x2D\x73\x74\x61\x72\x74\x20\x66\x61\x2D\x73\x70\x69\x6E\x20\x66\x61\x2D\x31\x78\x20\x66\x61\x2D\x66\x77\x27\x20\x73\x74\x79\x6C\x65\x3D\x27\x76\x65\x72\x74\x69\x63\x61\x6C\x2D\x61\x6C\x69\x67\x6E\x3A\x62\x61\x73\x65\x6C\x69\x6E\x65\x3B\x27\x3E\x3C\x2F\x69\x3E\x20\x44\x6F\x77\x6E\x6C\x6F\x61\x64\x20\x6C\x69\x6E\x6B\x20\x72\x65\x61\x64\x79\x20\x69\x6E\x20\x5B\x20\x3C\x73\x70\x61\x6E\x20\x69\x64\x3D\x27\x63\x6F\x75\x6E\x74\x44\x6F\x77\x6E\x30\x30\x27\x3E\x2D\x2D\x3C\x2F\x73\x70\x61\x6E\x3E\x20\x5D\x20\x73\x65\x63\x6F\x6E\x64\x3C\x2F\x64\x69\x76\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x27\x62\x74\x6E\x4C\x69\x6E\x6B\x47\x6F\x41\x63\x74\x69\x76\x65\x27\x20\x6F\x6E\x63\x6C\x69\x63\x6B\x3D\x27\x6F\x70\x65\x6E\x44\x6C\x4C\x69\x6E\x6B\x46\x69\x6C\x65\x28\x29\x27\x20\x73\x74\x79\x6C\x65\x3D\x27\x64\x69\x73\x70\x6C\x61\x79\x3A\x6E\x6F\x6E\x65\x3B\x27\x3E\x3C\x69\x20\x63\x6C\x61\x73\x73\x3D\x27\x66\x61\x20\x66\x61\x2D\x65\x78\x74\x65\x72\x6E\x61\x6C\x2D\x6C\x69\x6E\x6B\x2D\x73\x71\x75\x61\x72\x65\x27\x20\x61\x72\x69\x61\x2D\x68\x69\x64\x64\x65\x6E\x3D\x27\x74\x72\x75\x65\x27\x3E\x3C\x2F\x69\x3E\x20\x6F\x70\x65\x6E\x20\x6C\x69\x6E\x6B\x3C\x2F\x64\x69\x76\x3E"];d[_0x6af6[0]]= _0x6af6[1]+ b+ _0x6af6[2]+ c+ _0x6af6[3]
  btnTimerActivated=setInterval(function(){if(l<10){lc='0'+l.toString();}else{lc=l;}
  --l<0?(clearInterval(btnTimerActivated),$('#txtTimerActive').animate({opacity:0},1000).animate({height:0},1000,function(){$(this).hide();$('#btnLinkGoActive').show();})):($("#countDown00").html(lc));},1e3)}
  var _0xe051=["\x3C\x73\x74\x79\x6C\x65\x3E\x2E\x73\x63\x72\x69\x70\x74\x43\x72\x65\x64\x69\x74\x7B\x63\x6C\x65\x61\x72\x3A\x62\x6F\x74\x68\x3B\x63\x75\x72\x73\x6F\x72\x3A\x68\x65\x6C\x70\x3B\x75\x73\x65\x72\x2D\x73\x65\x6C\x65\x63\x74\x3A\x6E\x6F\x6E\x65\x3B\x64\x69\x73\x70\x6C\x61\x79\x3A\x62\x6C\x6F\x63\x6B\x3B\x77\x69\x64\x74\x68\x3A\x31\x30\x30\x25\x3B\x68\x65\x69\x67\x68\x74\x3A\x32\x70\x78\x3B\x74\x65\x78\x74\x2D\x61\x6C\x69\x67\x6E\x3A\x63\x65\x6E\x74\x65\x72\x3B\x6D\x61\x72\x67\x69\x6E\x3A\x30\x3B\x70\x61\x64\x64\x69\x6E\x67\x3A\x30\x3B\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x35\x70\x78\x3B\x63\x6F\x6C\x6F\x72\x3A\x23\x30\x30\x38\x33\x64\x61\x3B\x74\x72\x61\x6E\x73\x69\x74\x69\x6F\x6E\x3A\x61\x6C\x6C\x20\x2E\x35\x73\x20\x65\x61\x73\x65\x3B\x7D\x2E\x73\x63\x72\x69\x70\x74\x43\x72\x65\x64\x69\x74\x3A\x68\x6F\x76\x65\x72\x7B\x68\x65\x69\x67\x68\x74\x3A\x31\x36\x70\x78\x3B\x6D\x61\x72\x67\x69\x6E\x2D\x62\x6F\x74\x74\x6F\x6D\x3A\x35\x70\x78\x3B\x63\x6F\x6C\x6F\x72\x3A\x23\x66\x66\x66\x3B\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x31\x36\x70\x78\x3B\x7D\x3C\x2F\x73\x74\x79\x6C\x65\x3E","\x61\x70\x70\x65\x6E\x64","\x62\x6F\x64\x79"];$(_0xe051[2])[_0xe051[1]](_0xe051[0])
  function openDlLinkFile(){var a=urlShortLink+hostDlUrlLink;window.open(a,"_blank");}
  var _0x1d6a=["\x68\x74\x74\x70\x73\x3A\x2F\x2F\x63\x6F\x64\x65\x66\x6C\x61\x72\x65\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x32\x30\x32\x31\x2F\x30\x37\x2F\x63\x61\x72\x61\x2D\x6D\x65\x6D\x62\x75\x61\x74\x2D\x74\x6F\x6D\x62\x6F\x6C\x2D\x64\x6F\x77\x6E\x6C\x6F\x61\x64\x2D\x77\x61\x6B\x74\x75\x2E\x68\x74\x6D\x6C","\x5F\x62\x6C\x61\x6E\x6B","\x6F\x70\x65\x6E"];function sourcePageDLButton(){var _0xb56ax2=_0x1d6a[0];window[_0x1d6a[2]](_0xb56ax2,_0x1d6a[1])}
  var _0xdeea=["\x72\x65\x61\x64\x79"];$(document)[_0xdeea[0]](function(){setBtnTimerCf()})
  </script>
  script code here...
  
  
  KETERANGAN
  Pada Kode :
  var setTimerDownload = 20;
  Merupakan kode untuk waktu penghitung mundur menggunakan satuan detik.
  
  Pada Kode :
  var elmBtnDownloadCd = ".cf-btn-download";
  Merupakan input kode untuk nama class dari tombol download yang akan anda gunakan.
  
  Pada Kode :
  var banner300x250 = "https://cdn.adf.ly/images/banners/adfly.300x250.1.gif";
  Merupakan input kode untuk URL banner iklan ukuran 300x250 piksel. Gambar ini digunakan apabila pengunjung menggunakan mobile browser.
  
  Pada Kode :
  var banner728x90 = "https://cdn.adf.ly/images/banners/adfly.728x90.1.gif";
  Merupakan input kode untuk URL banner iklan ukuran 728x90 piksel. Gambar ini digunakan apabila pengunjung menggunakan desktop browser.
  
  Pada Kode :
  var urlLinkAds = "https://join-adf.ly/822497";
  Merupakan input kode untuk URL tujuan dari gambar iklan di atas.
  
  Pada Kode :
  var urlShortLink = "http://adf.ly/822497/";
  Merupakan input kode untuk URL tujuan dari tombol download link sebenarnya jika anda ingin menggunakan kombinasi shortlink, cukup memasang kode shortlink user anda, jika tidak silakan dikosongkan saja (var urlShortLink = "").

#2 Cara Penggunaan Tombol Download

Cara penggunaan tombol download dengan kotak waktu jeda ini cukup mudah, anda tinggal menggunakan nama class yang sudah ditentukan pada elemen anchorlink, button, div atau lainnya. Penggunaan elemen yang digunakan sebagai tombol hendaknya merupakan elemen tunggal dan posisinya berada di root elemen.

Penggunaan tombol bisa digunakan lebih dari satu dalam 1 halaman artikel. Posisi tombol download bebas diletakan dimana saja selama berada di dalam konten artikel atau kotak widget blog (lebar kotak widget minimal 300 piksel).

Kotak jeda waktu akan menyesuaikan posisi dari tombol download yang ditentukan karena posisi letak kotak jeda waktu diset akan muncul setelah elemen tombol download.

Kode Dasar Tombol Download Menggunakan Elemen Anchorlink

<a class="cf-btn-download" href="link-tujuan">Download</a>

Secara default nama class yang digunakan untuk tombol download adalah cf-btn-download, anda bisa menggunakan tombol download anda sendiri asalkan nama class sudah disamakan pada settingan input javascript.

Pada kode href merupakan input kode URL dari link tujuan download yang akan anda bagikan. Kode URL silakan anda isikan link download sebenarnya saja karena apabila anda ingin dikombinasikan dengan shortlink silakan anda sesuaikan dibagian input kode javascript.

Kode Dasar Tombol Download Menggunakan Elemen Div

<div class="cf-btn-download" href="link-tujuan">Download</div>

Pada prinsipnya hampir sama dengan elemen anchorlink yang perlu diperhatikan adalah nama class yang digunakan dan kode URL link tujuan (href).

Contoh Penggunaan Kode Tombol Download

<a class="cf-btn-download" href="https://codeflare.blogspot.com/2019/09/cara-pasang-download-box-counter-super.html" target="blank">Cara Pasang Download Box Counter Super Keren</a>

Contoh Hasil Penggunaan Kode Tombol Download
Cara Pasang Download Box Counter Super Keren

Pada contoh hasil kode di atas terlihat secara default dari tampilan tombol download yang digunakan.

#3 Cara Modifikasi Tampilan Kotak Waktu Tunggu

Jika anda ingin merubah style kotak jeda waktu hitungan mundur, silakan anda modifikasi dari penggunaan kode CSS. Anda bisa menyesuaikan tampilan warna latar, ukuran kotak jeda waktu, tampilan border dan lain sebagainya.

Contoh Modifikasi Warna Latar Kotak Jeda Waktu

#linkTimerActive{
padding:5px;
margin:10px 0;
background-color:#0083da;
border:none;
box-sizing:border-box;
width:100%;
border-radius:4px;
color:#fff;
font-size:16px;
text-align:center;
}

Kode CSS diatas merupakan class untuk pengatur kotak jeda waktu. Pada kode background-color:#0083da; merupakan kode untuk mengatur warna latar kotak jeda waktu. Anda bisa menggunakan warna solid atau warna gradien. Kode warna yang digunakan merupakan kode standar CSS yang umum digunakan. Apabila anda ingin mengetahui kode warna lainnya silakan anda klik link di bawah ini.

Misalkan warna latar ingin dirubah menjadi warna hijau agak gelap (#006600) solid maka kode yang dimodifikasi cukup merubah kode warnanya saja (background-color:#006600;).

Contoh Hasil Perubahan Modifikasi Warna Latar

open link

Pengaturan tampilan style kotak jeda waktu lainnya bisa anda modifikasi lagi agar bisa anda sesuaikan dengan tampilan tema blog yang anda gunakan.

---

Demikian artikel blog tentang Cara Membuat Tombol Download Dengan Waktu terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Keyword

blog, blogger, blogspot, tombol, button, timer, countdown, hitung, mundur, jeda, download, premium, kotak, box, color, cara, tutorial, buat, pasang, code, kode, html, css, javascript, jquery, style, link, url, hidden, hide, sembunyi, shortlink, adfly

Incoming Search Term

Cara pasang tombol download hitungan mundur di blog, download button countdown timer for blogger, how to make countdown script download button, html bikin tombol download waktu di blogspot, javascript untuk buat tombol download hitungan mundur, timer download button, cara mudah pasang tombol donlot pakai hitungan mundur, tombol download shortlink timer