How to Create Download link and make the page wait for the Get Link Made by NQnia



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'>
  <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>
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

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'/>
<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>
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 .


Result

About My name is Nguyen Manh Cuong. I was born in a poor village in Ba Vi district, HA NOI province - windy and sunny land. Currently. https://blog.cydiaguide.app/. Mr Cuong.
Newer Posts Newer Posts Older Posts Older Posts

Comments

Post a Comment