How to Create Download link and make the page wait for the Get Link Made by NQnia
You have a blog about downloading documents, software, themes, ... but you want to hide the download link in every published article. Instead of the visitor reading the article, clicking the download button to get to the file download page, you can change the script again when clicking the download button will go to the download page, where you will assign a period of time. Wait for a while before you get the download link.This approach is extremely effective for the following two main reasons:
1. You can hide the download link because it is not available in the article, nor in the script and even in the template and for that reason others will not see it when viewing the source of your page.
2. Creating a timeout get link will help you do other purposes such as attaching ads, statistics of the page's traffic, ...
The method is not difficult to do as you will add the download link in the Attachment link of the article and hide it in the feed, only when anyone needs to click the download button to download the feed of the article. Write that download link. This approach does not bypass the deep knowledge of Blogger, but it is very effective because most users do not know and use this feature.
How to effectively hide the download link and make the page wait for the get link
Step 1: Turn on the Attachment Link
This option is not enabled when creating a Blog, but you have to activate it manually as follows: You access the Settings of Blog >> Other >> on the right, the section Enable title and attached links , click select from No to Yes .
Step 2: Add the download link and the download button in the article
When editing a new article or editing a previously published article, you turn to the HTML section on the left corner, you add the download button to the appropriate location as follows:
<button aria-label="Download" class="download" name="id posts" type="button">Download</button>
Step 3: Create a page to get the link
In this step, you create a new page in the Pages section instead of Posts , the content of this page you copy the code below into the HTML section of the page on the left corner of the article editor.
<div class='time-wrapper hidden'>You name the page for example Download, Thank you for downloading, ... but take a short name then select Publish new page. Next you open this new page to get the link of the page, the link of the page is like: /p/download.html
<p><b>Your download will begin shortly!</b></p>
<p><span id="timer-countdown">0</span></p>
<div class="getlink-button"></div>
</div>
<style>
.hidden{display:none!important}
p{margin:0}
p,.getlink-button,.time-wrapper{text-align:center}
.getlink-button a{background:#6dab3c;border:1px solid #6dab3c;position:relative;color:#ffffff;font-size:14px;display:inline-block;padding:7px 20px;min-width:70px;border-radius:3px}
#timer-countdown{margin:25px 0 30px 0;display:inline-block;border-radius:100%;width:120px;height:120px;line-height:120px;color:#33b5e5;border-radius:50%;border:2px solid #33b5e5;font-size:60px;font-weight:100}
</style>
Step 4: Write a script
You access the Theme to edit the template, move before the closing tag </body> add the following code immediately before it:<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>You replace the link to the download page /p/download.html with the link of your page. In the script above, there is a jquery library link, if the template already exists, you can remove that link and then select Save topic .
<script>//<![CDATA[
$('.download').click(function() {
var id_sp = $(this).attr('name');
localStorage.setItem('luu_id', id_sp);
$.ajax({
type: 'GET',
url: '/feeds/posts/summary/' + id_sp,
data: {
'alt': 'json'
},
dataType: 'jsonp',
success: function(k) {
if (k.entry) {
for (var c = 0; c < k.entry.link.length; c++) {
if ("enclosure" == k.entry.link[c].rel) {
if ("text/html" == k.entry.link[c].type) {
var get_link = k.entry.link[c].href;
localStorage.setItem('luu_get_link', get_link);
}
}
}
}
}
});
var url_tv = '/p/download.html';
setTimeout(function() {
location.href = url_tv;
}, 1000);
});
var id = localStorage.getItem('luu_id')
var get_link = localStorage.getItem('luu_get_link');
var timer = 15;
if (id) {
document.querySelector('.time-wrapper').classList.remove('hidden')
var downloadTimer = setInterval(function() {
document.getElementById('timer-countdown').innerHTML = timer;
timer -= 1;
if (timer <= 0) {
clearInterval(downloadTimer);
document.getElementById('timer-countdown').innerHTML = '0';
document.querySelector('.getlink-button').innerHTML = '<a href=' + get_link + ' target="_blank" rel="noopener nofollow" title="Get link">Get link</a>';
}
}, 1000)
}
//]]></script>
