download button html code for blogger

Adding download button html code for blogger is not more difficult. If you have some coding (HTML and CSS) script, you complete this task.

 2 best ways to get easily your download button html code for blogger

 It is very easy to add a download button in blogger, for which you can follow our given suggestions, even if you do not have any knowledge of coding (HTML and CSS), you can do it very easily. 

2 best ways to get you to download button Html code for blogger in 2023. If you can create a download/redirect button on the blogger platform with the help of <button><a><i>...</i></a></button> tag.

The first way to get you to download the button Html code for bloggers is to follow this step

• Step:-1
• First of all, open your blogger dashboard then click on the "Page" option.
• Then click on create the new page. Then make a new page.
• Then paste the below code into the HTML mode page in blogger:-

<!--code for Download button Page in blogger--> <center> <!--Google Adsense Code--> <br> <center> <style>#postTitle{text-align: center;}</style> <button id="download-btn" onclick="generate()"> <i class="fa fa-download"></i> Download Now </button> <div id="refresh" style="display: none; font-size: 18px;"><b>Thanks!</b><br> Your link will redirect in few seconds... <br> If not then,</div> <a href="" id="re-download-btn" style="display: none;">Click Here</a> <script> function generate() { var j = document.getElementById("refresh"); var e, n = document.getElementById("re-download-btn"), t = document.getElementById("download-btn"), a = document.getElementById("re-download-btn").href, l = 30,<!--Type your download timer--> 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), j.style.display = "contents", n.style.display = "inline") : (d.innerHTML = "<div class='waiting'>Please Wait...</div><div class='timer'>" + l.toString() + "</div> <div class='second'>Seconds</div>", t.style.display = "none") }, 1e3) } </script> <style> button#download-btn { padding: 10px 25px 10px 25px; border: none; border-radius: 5px; color: white; background: dodgerblue; font-weight: 600; } button#download-btn:hover { background: royalblue; } .timer { background: bisque; width: 5%; padding: 10px; font-size: 25px; border-radius: 50%; width: 7%; } </style> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script> document.getElementById("re-download-btn").href=localStorage.getItem("Download Link"); document.getElementById("postTitle").innerHTML = localStorage.getItem("Post Title"); </script> </center> <br><br> <!-- This is Adsense Aproval Code --> </center>

• And, publish this page. 
• Then click on Layout and create and add a new gadget like as below:-

• And Then paste the below code into the CSS mode in blogger Configure HTML/JavaScript:-

<style> #redirect-download{ padding: 10px 25px 10px 25px; border: none; border-radius:5px; color: white; background: dodgerblue; font-weight: 600; } #redirect-download:hover{ background:royalblue; cursor:pointer; </style>

• And then, save this script.
• And Then, open this page in any browser
• Then, you can see your Download button on the page.

• Step:-2
• Second of all, create any new posts in your blogger.
• And then, the below code into the HTML mode posts in the blogger:-

<!--Html Code for Download timer button--> <center> <!-- Google Adsense Code--> <h2 style="margin: 0px;">Redirect Timer Link<span id="post-Title"></span></h2> <a href="Past your blogger page link" target="_blank"><button id="redirect-download"><i class="fa fa-download"></i>redirect link</button></a> <!-- Google Adsense Code--> </center> <script> // download link paste here var link = "Past your Download link"; </script>

Copy the link of the new page created by you according to the instructions given above, then paste it here "past your download blogger page".

Now publish your posts and lets see your post in the any browser and you can see your download timer button thanks for following my.

 

Redirect 30 second Timer Link

 

5 Best stylish Download button html code for Blogger in 2021