TECHFIRE

Home
Blogger & SEO

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

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

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>