How to add Automatic Redirecting Download section in blogger

You can simply provide the links of download files in your blog using anchor tag but I used to provide the download link you need this download section because it is somehow helpful in ranking my site.

How it Helps in Bounce Back:

If you provide simply button to download a file then the user will come to your website scroll down and simply click the download button and close the tab that will increase bounce back rate of your website which can be dangerous for your website to outrank that's why I use this technique so that whenever someone comes to my website and if they wants to download the project files then they have to wait for almost 10 seconds on that webpage to download that files.

So now we will see how you can I do this download section with automatically redirection system to your blogger blog.

Here are some steps to add add a automatically redirecting download section in blogger:

This is not only for blogger users if you are a wordpress user then you can also use this technique to make automatically redirecting download section.

Steps To Add Automatically Redirecting Download Section In Blogger:

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for </head>

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

5. Copy the code provided below and paste it just before the tag which we have searched in step 4.

<script> //<![CDATA[ function generate(downloadbtn,clickbtn,link,time){var linkDL=document.getElementById(downloadbtn),btn=document.getElementById(clickbtn),direklink=link,waktu=time;var teks_waktu=document.createElement("span");linkDL.parentNode.replaceChild(teks_waktu,linkDL);var id;id=setInterval(function(){waktu--;if(waktu<0){teks_waktu.parentNode.replaceChild(linkDL,teks_waktu);clearInterval(id);var att=document.createAttribute("href");att.value=link;linkDL.setAttributeNode(att);linkDL.click();linkDL.style.display="inline"}else{teks_waktu.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'></i> "+"Your Download Will Start In <b>"+waktu.toString()+"</b> Seconds...";btn.style.display="none"}},1000)} //]]> </script>

6. Save Theme/Template

Usage of automatically redirecting download section:

No we have successfully added the codes in our blogger template section now if you want to implement this download section anywhere on your web page you have to copy the code provided below and change the required things to make this download section in work.

Copy this code and paste it where you want to add this download section.

<div class="paling-jobo"><div class="bungkus-down"><div class="embuh"><div class="file-info">FILE_NAME</div><button onclick='generate("download-1", "btn-1", "DOWNLOAD_LINK", 5)' class="btn" id="btn-1"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download</button><a id="download-1" class="download" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download Started<br/><small> ( If Not Click Me ) </small></a></div><div class="file-deskripsi"><span class="uploader"><i class="fa fa-file" aria-hidden="true"></i> File Size</span> <span class="file-size"> FILE_SIZE </span></div></div><div class="catatan-sikil">Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click <b><strong>Download Started Button</strong></b> Above to download it manually.</div></div>

Here is the list of some placements that you have to do in the above code.

Replacements	Description
FILE_NAME	Replace this with the name of your file which you will see as file name in that download section.
DOWNLOAD_LINK	Replace this with the download link where user will be redirected.

FILE_SIZE
Replace this with the size of your file.

source:softwebtuts.com