How To Add Stylish Download Button (With Timer) In Blogger Post

how to add direct download link in blogger , how to add download link in blogger , 7 stylish demo download button blogger , how to add button in blogger post , download button png1,

Hello Friends, Today I will show you how to add an animated download button in blogger post. If you are looking for the download button with a timer then this animated download button is one of the best download buttons for your blogger post.

Why we use the download button (With Timer) in the post

Download Button (With Timer) is used for many purposes in our blog one of them is to reduce the Bounce Rate of a website.

Check it out : Green Screen Animated Subscribe Button

You can read more about:

            How To Reduce Bounce Rate of Downloading Site.

If you are running a website which is about downloading Templates, Intro, Pdf Files, etc., then you have to add a downloading button (With Timer) So, You're visitor stay on your website.

If you use Simple Download Button (Without Timer) on your website then your Bounce rate will also increase because the visitor will not read your post content and click on the Download button directly and exit from your website.

How to Install a Download Button (With Timer) in posts

Before adding this Download Button widget to Blogspot, make sure you have installed Fontawesome in your Theme.

If not, then add this code before </head>

<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>

First, open Blogger > Then open the Themes menu and click the Edit HTML button >Find code </head> and add below code before </head>

<!--Download Button--> <style type='text/css'> /* Download Counter Box */ #btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#e67e22;float:right;text-transform:capitalize;font-weight:800;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#ffffff;color:#b62727;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#b62727;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{font-weight: 700;font-family: sans-serif;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}} </style> <!--Download Button-->

Then add the code below before </body>

<!--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 siap diunduh dalam "+l.toString()+" Detik....",t.style.display="none")},1e3)} //]]> </script> <!--Download Button--> </div>

Don't forget to edit the code, change I=10 where 10 means that countdown time start after a user click on the download button E.x I=10 If the user click on the download button then after 10 sec your file downloading start.

Now you have to add the caller Download Box, add the code below in the post where you want to show your download Button.

<div dir="ltr" style="text-align: left;" trbidi="on"> <!--Download Btn Start--> <div class="batas-downx"> <div class="dalam-downx"> <div class="bungkus-info"> <div class="file-info"> Nama File </div> <button id="btnx" onclick="generate()"><i aria-hidden="true" class="fa fa-cloud-download"></i> download</button> <a href="https://www.blogger.com/linkdownloadx" id="downloadx" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i>Downloading</a> </div> <!--Download end--> </div> Preview <br /> <div class="dalam-downx"> <div class="bungkus-info"> <button id="btnx"><i aria-hidden="true" class="fa fa-eye"></i> <a href="" target="_blank">Preview</a></button> <br/><br/> </div> </div> </div> </div>

• DEMO