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.

An example of the download button is shown below:

Title Here

File Size: Enter File Size

You can click on the download button to see the magic.

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.

Final Word

If you didn't understand any of the steps then the comment box is yours. I will fully assist you. Thank you

Post a Comment

Previous Post Next Post