As we've seen on blogs that share articles about Downloads will definitely use this trick. Maybe some of you feel confused, does this trick actually make visitors reluctant to visit? of course yes, friend.
But by using tricks like this will increase the bounce rate and can also increase the CPM if you advertise, and of course many other advantages. This tutorial is specifically for bloggers who have blogs about downloading.
This trick is inspired by a website, although with a simple appearance but I have redesigned it to make it look more attractive, with additional features that I include such as, awesome fonts, responsive design, and re-download if the file is not downloaded automatically. For the demo you can check the button below.
Interesting ? if interesting, please proceed to the tutorial how to make these tricks. Go straight to the tutorial, make sure to follow according to the following steps.
How to Make an Auto Download With Countdown Timer Button
1. Log in to your Blogger account .2. After that go to Template > Edit HTML .
3. Then install the script below, before the
</body> code.
<script type='text/javascript'> //<![CDATA[ function generate() { var linkDL = document.getElementById("download"), btn = document.getElementById("btn"), direklink = document.getElementById("download").href, time = 10; var text_time = document.createElement("span"); linkDL.parentNode.replaceChild(text_time, linkDL); var id; id = setInterval(function () { waktu--; if (time < 0) { text_time.parentNode.replaceChild(linkDL, text_time); clearInterval(id); window.location.replace(direklink); linkDL.style.display = "inline"; } else { teks_time.innerHTML = "<i class='fa fa-clock-o' aria-hidden='true'/> " + "The file is ready to download in " + "" + time.toString() + " Seconds...."; btn.style.display = "none"; } }, 1000); } //]]> </script>
To facilitate code search, you can use shortcuts by pressing the CTRL+ F buttonReplace number 10 with the duration of time you want (in seconds).
4. Then copy the CSS below before the code
</head>
/*Auto Download By XDCodeFix*/ #btn{cursor:pointer;padding:10px 20px;border:none;border-radius:3px;background:#fff;color:#FE634A;float:right;text-transform:uppercase;font-weight:700} #btn:hover, a#download:hover{background:#BC4634;color:#fff;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;} .paling-jobo{display:block;width:60%;margin: 20px auto;border-radius:4px;font-family:'PT Sans Narrow', sans-serif} .bungkus-down{background:#FE634A;color:#fff;padding:10px 20px;display:block;border-top-right-radius:3px;border-top-left-radius: 3px;} .file-info{color:#fff;display:inline-block;font-size:1.3em;line-height: 38px;text-align:left} .catatan-sikil{padding:10px 20px;background:#EAEBED;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555} #download{float:right} a#download{padding:10px 20px;border-radius:3px;background:#fff;color:#FE634A;float:right;text-transform:uppercase;font-weight:700;text-align:center} .embuh span{display:inline-block;line-height: 38px;float:right} .iklan-down{float:right;width:40%;padding-left:10px;margin:20px 0;text-align:right} .file-deskripsi{display:block} .file-deskripsi span{margin-right:3px} .iklan-ngisore, .iklan-duwure{display:block;width:100%;margin:0 auto} h2.entry-title{margin-top:10px} .post-labels, .post-timestamp{display:none} a.home-link{color:#555;font-size:20px;} a.home-link:hover{color:#222} @media screen and (max-width:600px){ .paling-jobo{float:none;width:100%} .iklan-down{float:none;width:100%;text-align:center;padding:0} } @media screen and (max-width:320px){ /* CSS styles */ .file-info{display:block;text-align:center} #btn, a#download{width:100%;margin-bottom:10px} .embuh span{float:none;width:100%;text-align:center} .file-deskripsi{text-align:center} } </style>
For other colors and styles you can adjust according to your individual tastes.
5. Save the Template .
Not yet here, if you want to apply to the post / article, you must add the html code below into the post / article. HTML code below is still using standard settings, please change according to each taste.
<div class="paling-jobo"> <div class="bungkus-down"> <div class="embuh"> <div class="file-info"> File Name Here </div> <button onclick="generate()" id="btn"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download</button> <a id="download" href="#" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download Repeat</a> </div> <div class="file-deskripsi"> <span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> TopBlogPk.apk</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i> File Size 15MB</span> </div> </div> <div class="catatan-sikil"> If it doesn't download automatically, please click Download again. And if the link is broken, please report via the Contact Us page. </div> </div>
To write this html, you are required to write in the HTML column instead of Compose .
Because the script above uses Awesome Fonts and PT Sans Narrow Fonts , for that if you don't have the Call Awesome Font and PT Sans Narrow fonts installed, please install them first. You can call the script by placing the calling script below, before the code
</body>
<script> //<![CDATA[ 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("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700"); //]]> </script>
Maybe that's the first article from How to Make the Auto Download Button With Countdown Timer , if the script error or there are questions due to confusion with this tutorial please ask in the comments column below this article.
Thank you!