Breaking News:

latest

Install Beautiful Download Box Button with Counter

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out latest Article are about to Install Beautiful Download Bo...

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out latest Article are about to Install Beautiful Download Box Button with Counter in Blogger Post. Maybe you often see the download button which will automatically give a countdown time when we click and after the time is finished it will usually open automatically to the page or directly download the file provided by the site. So even with tips on Installing the Download Box Button with Counter. I will share this concept more or less the same.



The reason why installing the download box with the counter is one of them is to reduce the rate of Bounce Rate of our blog when visitor visit the page.



Before adding this widget make sure that on your blog you have Fontawesome installed if not then please add this code before </head> or   &lt;/head&gt;&lt;!--<head/>--&gt;

<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 of all Open Blogger> Click the Themes menu, Eidt HTML and add this CSS code just before </head> or   &lt;/head&gt;&lt;!--<head/>--&gt;

<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: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:#e67e22;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}}
</style>
 After that just add this below code just before </body> 

<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,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>
Edit the writing on the code that is marked, edit also the 1 - 10 number 10 means that the countdown time needed is 10 seconds.

After these just save your blogger Template.

Now the Next step is that to add the caller Download Box, add the code in new blog post just for checking that the code worke fine or not.

Add This below code in new post HTML Tab.

<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
File Name Here
</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> download Ulang</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i aria-hidden="true" class="fa fa-user-circle"></i> GetWebInfo.Com </span> <span class="file-size"> <i aria-hidden="true" class="fa fa-file"></i>
 Your File Size</span>
</div>
</div>
<div class="catatan-downx">
Detail of The File .
</div>
</div>
Re Edit the posts marked with your posts and links. Replace linkdownloadx in href="linkdownloadx" to link your destination.

You can change Red highlighted lines with your own desire detail that can you like to be show on to your blog post. I hope this article is really work for you if you like this article so please share it on Social Media thanks for reading.

No comments