How to Create a Dynamic Download Page with a Progress Bar in Blogger

How to make a dynamic download page with a progress bar - In this tutorial, I want to share with you how to make your Blogger dynamic download page which is responsive and will work for all your download links. All you need to do is to download the download page source code I put below and follow the tutorial.

Most of the tutorial like this only told you to make a download page for a single link. I call it Static Download Page. Whereas, in this tutorial, I will show you how to make a dynamic download page. It means that all download links are in one download page but the page will only show a requested download link.

How a Dynamic Download Page Works?

Basically, we have two options when we want people to download a file or app from blog:

1. Put the download link right on the article page
2. Put a link on the article page that refers to a download page

We are working with the second option right now. So, a dynamic download page works like this.

1. You have an article page where people can download a file or app, let's call it App X.
2. You put a link or a button that will record the following data in the browser:
   • downloadName: this is the unique identifier of the download link, let's call it appX.
   • itemName: this is the name of the file or app, in this case is App X.
   • itemSize: this is the size of the file or app, let's use 10 mb
   • timerLimit: this is the time (in seconds) that people must wait for the download link is generated. In this case, let's put it to 5 (5 seconds)
   • downloadPageUrl: this is the URL of the download page in your blog. It is better to write only the pathname of the URL, for example: /p/download-page.html.
3. The download page will open and detect the downloadName and timerLimit (and other info) sent by the article page and show a progress bar. When the timerLimit is achieved, the related download link (based on the downloadName) will be shown.

The download link will appear under the progress bar when it reaches 100% (of the second you set).

How to make it?

#1 Setting Article Page

Now, download the source code.

In every article page that has a download, you need to put a button that will trigger a function. In this case the function name is goDownload(). If you have two or more buttons, they must refer to different functions. So, you can use goDownload1() and goDownload2() etc. Then, in a script tag, put the following code and adjust the value of the variables (lines 17 to 21).

#2 Setting Download Page

The download page must have the following parts:

1. Style: this is the CSS code that you can modify.
2. Div: this is the HTML part. This is where you save the download links!
3. JavaScript: this is the core code of the download page that you do not have to touch!

Put all the code in the download page. If you like, you can modify the styles by changing the CSS. The most important thing here is you add all the download links in this page. Each download link must be placed within a paragraph tag with an ID that match the downloadName in the article page.

That's all. Save your page and test it. This code is made by me, and free for you to use and share without removing myself.