Fungsi : Mengurangi tingkat bounce rate halaman artikel di blog download.
Tingkat Kesulitan : Mudah
Penggunaan : Manual
Bahasa Pemrograman : HTML, CSS, dan Javascript
File Eksternal : Font Awesome 4.7 atau lebih baru.
Source Code : DTE Website.
HTML
<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
Nama File
</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://moccatory.blogspot.com/" style="display:none"><i class="fa fa-cloud-download fa-fw" aria-hidden="true"></i> download Ulang</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle fa-fw" aria-hidden="true"></i> Nama Uploader / Creator</span> <span class="file-size"> <i class="fa fa-file fa-fw" aria-hidden="true"></i>
File Size: 2GB</span>
</div>
</div>
<div class="catatan-downx">
Jika tidak terdownload otomatis silahkan klik Download Ulang. Dan jika link rusak, silahkan melapor melalui halaman Kontak blog ini.
</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=5,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'>File siap diunduh dalam "+l.toString()+" Detik....</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>
