{tocify} $title={Table of Contents}
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.
Step 1. You need to find ]]></b:skin> in the HTML Code of your blogger theme. After you've found it, just paste the CSS code exactly above it.
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.