Panduan Lengkap Cara Membuat Tombol Download dengan Countdown Timer di Blog

Panduan Lengkap Cara Membuat Tombol Download dengan Countdown Timer di Blog - Hallo sahabat Kemala Nisa, Pada Artikel yang anda baca kali ini dengan judul Panduan Lengkap Cara Membuat Tombol Download dengan Countdown Timer di Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, Artikel Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Cara Membuat Tombol Download dengan Countdown Timer di Blog, Countdown Timer merupakan jeda waktu untuk mendownload file yang dibuat khusus untuk situs download, situs lainya juga dapat menggunakan cara ini. Keuntungan dari fitur ini dapat menaikan bounce rate, dapat juga menaikan CPM iklan sobat jika memasangnya dan keuntungan lainnya.

Secara konsep, tombol download ini akan otomatis muncul waktu hitung mundur apabila sobat meng-kliknya seperti halnya tombol download yang sering kita jumpai. Jika hitungan tersebut menunjukan angka 0 akan otomatis link download muncul. Untuk tutorialnya silahkan simak dengan baik langkah-langkah berikut.

Cara Memasang Tombol Download Countdown Timer di Blog

• Buka dashboard Blogger sobat.
• Pilih menu Tema, Edit HTML.
• Cari kode </body> dan paste kode dibawah tepat DIATAS kode tersebut.

<script type='text/javascript'>
//<![CDATA[
function generate() {
    var linkDL = document.getElementById("download"),
  btn = document.getElementById("btn"),
  direklink = document.getElementById("download").href,
  waktu = 10;
  var teks_waktu = document.createElement("span");
  linkDL.parentNode.replaceChild(teks_waktu, linkDL);
  var id;
  id = setInterval(function () {
  waktu--;
  if (waktu < 0) {
  teks_waktu.parentNode.replaceChild(linkDL, teks_waktu);
  clearInterval(id);
  window.location.replace(direklink);
  linkDL.style.display = "inline";
  } else {
  teks_waktu.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> " + "File siap diunduh dalam " + "" + waktu.toString() + " Detik....";
  btn.style.display = "none";
  }
  }, 1000);
  }
  //]]>
  /></script>

• Tepat dikode tadi </body> paste juga kode dibawah ini tepat DIATAS kode tadi. Karena fitur ini menggunakan font Awesome.

<script>
  //<![CDATA[
  function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
  loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700");
  //]]>
</script>

• Kemudian copy kode dibawah dan paste DIATAS </head>.

  <style type='text/css'>
  /* Auto Download */
  #btn{cursor:pointer;padding:10px 20px;border:none;border-radius:3px;background:#fff;color:#1589E3;float:right;text-transform:uppercase;font-weight:700}
  #btn:hover, a#download:hover{background:#BC4634;color:#fff;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;  -ms-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  .paling-jobo{display:block;width:60%;margin: 20px auto;border-radius:4px;font-family:'PT Sans Narrow', sans-serif}
  .bungkus-down{background:#1589E3;color:#fff;padding:10px 20px;display:block;border-top-right-radius:3px;border-top-left-radius: 3px;}
  .file-info{color:#fff;display:inline-block;font-size:1.3em;line-height: 38px;text-align:left}
  .catatan-sikil{padding:10px 20px;background:#EAEBED;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555}
  #download{float:right}
  a#download{padding:10px 20px;border-radius:3px;background:#fff;color:#FE634A;float:right;text-transform:uppercase;font-weight:700;text-align:center}
  .embuh span{display:inline-block;line-height: 38px;float:right}
  .iklan-down{float:right;width:40%;padding-left:10px;margin:20px 0;text-align:right}
.file-deskripsi{display:block}
  .file-deskripsi span{margin-right:3px}
  .iklan-ngisore, .iklan-duwure{display:block;width:100%;margin:0 auto}
  h2.entry-title{margin-top:10px}
  .post-labels, .post-timestamp{display:none}
  a.home-link{color:#555;font-size:20px;}
  a.home-link:hover{color:#222}
  @media screen and (max-width:600px){
  .paling-jobo{float:none;width:100%}
  .iklan-down{float:none;width:100%;text-align:center;padding:0}
  }
  @media screen and (max-width:320px){
  /* CSS styles */
  .file-info{display:block;text-align:center}
  #btn, a#download{width:100%;margin-bottom:10px}
  .embuh span{float:none;width:100%;text-align:center}
  .file-deskripsi{text-align:center}
  }
  </style>

• Terakhir Simpan. Untuk pemasangan silahkan masuk ke menu postingan.
• Pilih Mode HTML (bukan Compose) dan copy kode dibawah ini.

<div class="paling-jobo">
  <div class="bungkus-down">
  <div class="embuh">
  <div class="file-info">
  Nama File Mu
  </div>
  <button onclick="generate()" id="btn"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download</button>
  <a id="download" href="linkdownload" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download Ulang</a>
  </div>
  <div class="file-deskripsi">
  <span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> Jagoan Design</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
  File Size 5MB</span>
  </div>
  </div>
  <div class="catatan-sikil">
  Jika tidak terdownload otomatis silahkan klik Download Ulang. Dan jika link rusak silahkan lapor melalui halaman Contact Us.
  </div>
  </div>

• Silahkan sesuaikan kode tombol download tersebut dengan keinginan sobat.

Itulah Cara Membuat Tombol Download dengan Countdown Timer di Blog yang dapat Admin bagikan, apabila ada pertanyaan silahkan komen di kolom komentar. Semoga bermanfaat dan berkunjung kembali di situs Sempetin.com.

Sekian dulu dari saya tentang Panduan Lengkap Cara Membuat Tombol Download dengan Countdown Timer di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya dan jangan lupa kunjungi terus blog Kemala Nisa terimakasih.

Anda sekarang membaca artikel Panduan Lengkap Cara Membuat Tombol Download dengan Countdown Timer di Blog dengan alamat link https://www.kemalanisa.com/2021/12/cara-membuat-tombol-download-di-blogger.html

Bagikan Artikel ini