Creating a custom download page improves your site's look, helps track downloads, and even allows you to show ads while the download link loads. This tutorial shows how to:
- Convert all outbound download links to a custom download page.
- Show a progress bar with delay before the link is revealed.
- Add a "Get Link" button with secure encoded URL.
- Keep your blog credit protected.
- Customize easily to fit your blog name, domain, and time delay.
Step 1: Add Auto Link Converter Script to Blogger
This JavaScript will change all links with the class AlphaarpLink into secure links that point to your custom download page with an encoded parameter.
Paste the below script in your Blogger Template (inside <body> or before </body>):
<script>
document.querySelectorAll(".AlphaarpLink").forEach(link => {
const originalHref = link.getAttribute("href");
const encodedHref = encodeURIComponent(btoa(originalHref));
const newHref = "https://alphaarp.blogspot.com/p/download-page.html?download=" + encodedHref;
link.setAttribute("href", newHref);
});
</script>
Example Usage in Post or Page:
<a class="AlphaarpLink" href="https://alphaarp.blogspot.com" rel="nofollow">demo</a>
Note: Replace https://alphaarp.blogspot.com with your own blog URL if needed.
Step 2: Create the Actual Download Page
Create a new page in Blogger with this permalink:
/p/download-page.htmlSwitch to HTML view and paste the full code below.
Full Download Page Code (HTML + CSS + JS):
<style>
.badge,.badge-info{color:#fff;font-size:1.1em;font-weight:800;background-color:var(--linkB);border-radius:5px;box-decoration-break:clone;display:inline;position:relative;line-height:1.6}.Pro-progress-alphaarp{background-color:grey;position:relative;height:36px;display:block;width:100%;border-radius:20px;margin:.5rem 0 1rem;overflow:hidden}.Pro-progress-alphaarp .alphaarp-Pro-progress-alphaarp-text-RX{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.alphaarp-Pro-progress-alphaarp-status-RX{height:100%;background-color:var(--linkB);animation-name:alphaarp-Pro-progress-alphaarp-status-RX}@keyframes alphaarp-Pro-progress-alphaarp-status-RX{from{width:0%}to{width:100%}}.truncate{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8125em!important;color:#fff}#alphaarpdownloadredirect-tab,#alphaarp-alphaarpdownloadredirect-loading-RX,.alphaarpdownloadredirect{margin-top:10px}#alphaarpdownloadredirect,#alphaarp-alphaarpdownloadredirect-loading-RX{height:50px}#alphaarpdownloadredirect{animation-name:show;animation-duration:3s;animation-timing-function:linear}@keyframes show{from{opacity:0}to{opacity:3}}
</style>
<div id="alphaarp-download-section" style="display: none;">
<div id="alphaarp-alphaarpdownloadredirect-loading-RX">
<div class="Pro-progress-alphaarp">
<span class="alphaarp-Pro-progress-alphaarp-text-RX truncate">Your link is almost ready, please wait a few seconds...</span>
<div class="alphaarp-Pro-progress-alphaarp-status-RX">
</div>
</div>
</div>
<!-- Responsive Ad -->
<div style="text-align: center;">
<div id="alphaarpdownloadredirect" style="display: none;">
<!-- Updated button text to "Get Link" -->
<button class="button" id="btngetlink" onclick="changeLink()">Get Link</button>
</div>
</div>
</div>
<!-- ADD your Content (https://alphaarp.blogspot.com/2025/05/lorem-ipsum-generator.html for dummmy content) -->
<div id="alphaarp-credits">
<span>Sourced by <a id="alphaarp-credit-link" href="https://alphaarp.blogspot.com" rel="dofollow">alphaarp</a></span>
</div>
<script>
/** Variables from external configuration **/
var alphaarpprogressbarloadingtime = "10"; // Set in seconds
var alphaarpparamalinktag = "download";
var hiddenlinktargetValue = '_self';
var hiddenlinkrelValue = 'nofollow';
</script>
<script>
const alphaarpdownloadredirect=document.getElementById('alphaarpdownloadredirect');const alphaarpdownloadredirect_loading=document.getElementById('alphaarp-alphaarpdownloadredirect-loading-RX');const progressBarStatus=document.querySelector('.alphaarp-Pro-progress-alphaarp-status-RX');if(progressBarStatus){progressBarStatus.style.animationDuration=alphaarpprogressbarloadingtime+'s'}
if(alphaarpdownloadredirect&&alphaarpdownloadredirect_loading){setTimeout(function(){alphaarpdownloadredirect_loading.style.display='none';alphaarpdownloadredirect.style.display='block'},alphaarpprogressbarloadingtime*1000)}
var currentUrl=window.location.href;if(currentUrl.includes(`?${alphaarpparamalinktag}=`)){document.getElementById('alphaarp-download-section').style.display='block'}
function changeLink(){var encryptedUrl=getParameterByName(alphaarpparamalinktag);var decryptedUrl=atob(encryptedUrl);var newWindow=window.open(decryptedUrl,hiddenlinktargetValue||'_blank');if(newWindow){newWindow.opener=null}
var hiddenLink=document.createElement('a');hiddenLink.href=decryptedUrl;hiddenLink.target=hiddenlinktargetValue||'_blank';hiddenLink.rel=hiddenlinkrelValue||'nofollow';document.body.appendChild(hiddenLink);hiddenLink.click()}
function getParameterByName(name,url){if(!url)url=window.location.href;name=name.replace(/[\[\]]/g,'\\$&');var regex=new RegExp('[?&]'+name+'(=([^&#]*)|&|#|$)');var results=regex.exec(url);if(!results)return null;if(!results[2])return'';return decodeURIComponent(results[2].replace(/\+/g,' '))}
document.addEventListener("DOMContentLoaded",function(){function redirect(){window.location.assign('https://%61%6C%70%68%61%61%72%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D')}
function check(){var credits=document.getElementById("alphaarp-credits");var creditLink=document.getElementById("alphaarp-credit-link");if(!credits||!creditLink){redirect()}else if(creditLink.getAttribute("href")!=="https://alphaarp.blogspot.com"||creditLink.textContent!=="alphaarp"||creditLink.getAttribute("rel")!=="dofollow"){redirect()}}
setTimeout(function(){check();setInterval(check,1000)},1000)})
</script>
Parameters and Customization
| Variable | Purpose | Example Value | Custom Note |
|---|---|---|---|
alphaarpprogressbarloadingtime | Delay before showing button | 10 | Set to 5, 7, etc. |
alphaarpparamalinktag | Query param name | download | Leave as-is |
hiddenlinktargetValue | Open method | _self / _blank | Same or new tab |
hiddenlinkrelValue | Link rel attribute | nofollow | Can use noopener |
| Your Blog URL | Blog credit check | https://alphaarp.blogspot.com | Change to your domain |
Done!
You now have a working, secure, and stylish download page on Blogger with:
- Progress bar
- Link encryption
- Brand credit check
- Custom wait time
