How To Add Download Box Button with Countdown Timer In Blogger Blogs

How To Add Download Box Button with Countdown Timer In Blogger

Function: Reduces the bounce rate of article pages on the download blog.
Difficulty Level: Easy
Usage: Manual
Programming Languages: HTML, CSS, and Javascript
External File: Font Awesome 4.7 or later.

HTML

<div class='container'>
  <div class="batas-downx">
    <div class="dalam-downx">
      <div class="bungkus-info">
        <div class="file-info">
          File Name
        </div>
        <button onclick="generate()" id="btnx">
          <i class="fa fa-cloud-download fa-fw" aria-hidden="true">
          </i> download
        </button>
        <a id="downloadx" href="https://1plex.blogspot.com/" style="display:none">
          <i class="fa fa-cloud-download fa-fw" aria-hidden="true">
          </i> Download again
        </a>
      </div>
      <div class="file-deskripsi">
        <span class="uploader">
          <i class="fa fa-user-circle fa-fw" aria-hidden="true">
          </i> Uploader / Creator Name
        </span> 
        <span class="file-size"> 
          <i class="fa fa-file fa-fw" aria-hidden="true">
          </i>
          File Size: 500MB
        </span>
      </div>
    </div>
    <div class="catatan-downx">
      If it is not automatically downloaded, please click Download again. And if the link is broken, please report via the Contact page of this blog.
    </div>
  </div>

CSS

/* Fonts */
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Kwp5MKg.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Nwp5MKg.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Awp5MKg.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Owp4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94Yt3CwZ-Pw.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94YtwCwZ-Pw.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94Yt9CwZ-Pw.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94YtzCwY.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
a,a:link,a:visited{color:#333;text-decoration:none;transition:all .3s}
a:hover,a:hover:visited{color:#1e7ce5}
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body{background:#74b9ff;font-family:"Google Sans",sans-serif;margin:0;padding:0;position:relative;line-height:normal;height:100%;color:#000}
.container{background:#fff;max-width:620px;margin:4% auto;padding:5px;font-size:16px;line-height:1.6;box-shadow:0 3px 10px rgba(0,0,0,0.1);border-radius:3px}
.container h1,.container h2{display:block;margin-bottom:20px;font-weight:400;color:#000}
.container h2{margin-top:30px}
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#1DB954;color:#fff;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}
#btnx:hover,#downloadx:hover{background:#1db95480;color:#fff;outline:none}
.batas-downx{display:block;margin:0 auto;border-radius:4px}
.dalam-downx{background:#222 url('#');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-downx{padding:20px;background:#ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}
.catatan-downx:before{content:'\f05a';display:table;float:left;font-family:FontAwesome;font-size:32px;margin:-5px 10px auto auto}
#downloadx{float:right}
#downloadx{padding:10px 20px;border-radius:3px;background:#ffc832;color:#222;float:right;text-align:center;font-size:14px;text-transform:capitalize}
.bungkus-info span{display:inline-block;line-height:38px;float:right}
.file-deskripsi{display:block}
.file-deskripsi span{margin-right:5px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx,#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}

Javascript

<script type='text/javascript'>
  //<![CDATA[
  function generate(){
    var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,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="<p style='font-family:Google Sans, sans-serif'>The file is ready to download in "+l.toString()+" Seconds ....</p>",t.style.display="none")}
                                                 ,1e3)}
  //]]>
</script>

Font Awesome

<script type='text/javascript'>
  //<![CDATA[
  //CSS Ready
  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("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
  //]]>
</script>