Hello and welcome to our blog. Today I am providing you a quick guide on how to add a download button in blogger with a time ticker.
Actually when you are proving downloadable contents on your site then you can use the download button. If you do so then it will be beneficial for your site's SEO.
How to Create a Download Button in Blogger?
You need to follow the given steps to create a beautiful download button as shown above in your site.
CSS-Code
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#FF0000;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#FF0000;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:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;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:3px}
@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, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
table {
font-family: arial, sans-serif;
width: 100%;}
td, th {border: 1px solid #dddddd;text-align: left;padding: 8px;}
body {font-family: Arial, Helvetica, sans-serif;}
/* Solid border */
hr.solid {
border-top: 3px solid #bbb;
}
Step 2. You need to find </body> in your Html Code and paste a javascript code exactly above it
Javascript-Code
<!--Download Button-->
<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=20,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="<i class='fa fa-clock-o' aria-hidden='true'/> File Is Downloading Please Wait "+l.toString()+" Sec....",t.style.display="none")},1e3)}
//]]>
</script>
Step 3. You have to paste the given Html Code in the post or page where you want to use the download button.
HTML-Code
<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">Enter Your Title Here</div>
<button id="btnx" onclick="generate()"><i aria-hidden="true" class="button small download"></i> download</button> <a href="Enter Your Url Here" id="downloadx" style="display: none;"><i aria-hidden="true" class="button small download"></i>Downloading</a>
<div style="text-align: left;">
File Size: Enter Your File Size</div>
</div>
</div>
</div>
If you want to use the download button in your post then simply go to a new post and click on HTML in the top and then paste the code there.
To modify the title, Url and file size shown in the download counter you can just edit the HTML code to your own.
To modify the title, Url and file size shown in the download counter you can just edit the HTML code to your own.