Using this download section you can easily make your users 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 the 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 want 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 an 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 the download section.
Steps To Add Automatically Redirecting Download Section In Blogger:
- Go to Blogger Dashboard
- Go to Theme/Template Section
- Click Edit HTML
- Now Search for </head>
- 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>
<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> - Save Theme/Template
To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
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 class="btn" id="btn-1" onclick="generate("download-1", "btn-1", "", 5)"><a href="https://sayemtutorial.blogspot.com/"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download</a></button><a class="download" href="" id="download-1" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download Started
<small> ( If Not Click Me ) </small></a></div>
<div class="file-deskripsi">
<span class="uploader"><i aria-hidden="true" class="fa fa-file"></i> File Size</span> <span class="file-size"> FILE_SIZE </span></div>
</div>
<div class="catatan-sikil">
Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
| Replacements | Description |
|---|---|
| FILE_NAME | Replace this with the name of your file which you will see as file name in that download section. |
| https://sayemtutorial.blogspot.com/ | Replace this with the download link where user will be redirected. |
| FILE_SIZE | Replace this with the size of your file. |
Post a Comment