How to add Automatic Redirecting Download section in blogger
close
How to add Automatic Redirecting Download section in blogger

How to add Automatic Redirecting Download section in blogger

How to add automatically redirecting download section in blogger

I know that most of my friends like my website template and also the things that I have created on my website and one of the thing is that download section whenever I provide the project files of any project or any other thing that is downloadable I usually use my download section which you can see on most of my web pages that are related to web design and development.

Using this download section you can easily make your users to download any file after waiting for some seconds.

Some of my friends asked me to share that with them so in today's article I am going to provide you the source code and will be telling you how you can implement this 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>
  5. To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
  6. Copy the code provided below and paste it just before the tag which we have searched in step 4.
  7. 
    <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>
    <style>.paling-jobo a.download, .paling-jobo .btn{padding:10px;background:#fc801c;color:#fff;border:none;border-radius:5px;}
    .paling-jobo .btn:hover, .paling-jobo a.download:hover{background:#fc801c;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;}
    button.btn,.paling-jobo a.download{float:right;}
    .paling-jobo{border:2px solid #fc801c;display:block;margin: 20px auto;border-radius:4px;}
    .paling-jobo span{font-size:15px;}
    .bungkus-down{background:#555;border-bottom:2px solid #fc801c;color:#fff;padding:10px 20px;display:block;border-top-right-radius:3px;border-top-left-radius: 3px;}
    .file-info{color:#fc801c;display:inline-block;font-size:20px;line-height: 38px;text-align:left}
    .catatan-sikil{padding:10px 20px;font-size:15px;background:#EAEBED;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;}
    .download{font-size:13px;margin-top:3px;text-decoration: none;text-align:center;}
    .embuh span{display:inline-block;line-height: 38px;float:right;color:#fc801c}
    .iklan-down{float:right;width:40%;padding-left:10px;margin:20px 0;text-align:right}
    .file-deskripsi{display:block;color:#fc801c;font-size:15px;}
    .file-deskripsi span{margin-right:3px}
    .file-deskripsi .uploader:after{content:" :";}
    .iklan-ngisore, .iklan-duwure{display:block;width:100%;margin:0 auto}</style>
    
  8. 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.

ReplacementsDescription
FILE_NAMEReplace this with the name of your file which you will see as file name in that download section.
DOWNLOAD_LINKReplace this with the download link where user will be redirected.
FILE_SIZEReplace this with the size of your file.

Conclusion:

After doing all the stuff above you have successfully added automatically redirecting download section in blogger or in WordPress I think you like this post and if you did subscribe to the newsletters of this blog and get notifications of all upcoming posts which I publish daily.
Disqus Codes

No comments

Notifications

Disqus Logo