How to make an automatic redirect download page or safelinke on your Blogger blog.
You have probably seen websites where all download link or say external links are redirected to a given page. That is, when you click on a download button, you are taken to a “download” page and will have to wait for a couple of seconds before you can see the destination link.
Many website owners use this strategy to increase their website traffic and consequentially the income they make especially if the website is monetised with Ads.
With a CMS (Content Management System) like WordPress, you can easily get a script for creating a redirect download page. But what about Blogger? It is no exception. It might seem complicated but not impossible.
Dig in the subsequent paragraphs of this post and learn how to make an automatic redirect download page on your Blogger blog.
How this works.
The script we have here once properly added to your website, all external links you choose not to protect will be encrypted and when clicked will first redirect to a particular page of your choice say https://your.blogspot.com/p/downoad.html.
From this page, the visitor will have to wait a couple of second before the download button appears. Pretty interesting right?
The script used for this encryption code uses var Base64 encoding to encode the external URLs of your choice.
Adding the redirect script to your Blogger blog
The whole Blogger auto-redirect download page script is made of three different code sets you will have to add to your site.
- Script to be added to the destination page where all links will pass through
- The CSS
- The Base64 js code.
You will have to proceed this with creating your “safelink” or auto-redirect download page;
Step 1: Create a new page from your Blogger dashboard. Just give it a Title say download and publish.
Step 2: Get the URL of your created page. Replace the PAGE_URL(in red) in the script below with the URL of the page you just created. Also, where you see the comment tags; put your Ads code or write some text there.
<div class='separator' style='text-align:center'>
<div class='ads-top'>
<!-- Put your Adsense code here -->
</div>
<div class='safelink' id='safelink'>
<center>
<div class='button outline' id='daplong'> Wait a minute...</div>
<script>/*<![CDATA[*/ var currentURL=location.href; var str = currentURL; var res = str.replace('https://www.bloggercustomiz.com/p/download.html' + '?url=', ""); function changeLink(){var decodedString = Base64.decode(res); window.open(decodedString,'_blank')}; document.write('<a href="#go-link" id="download-safelink" class="button outline">Click to get link</a>'); var linkDL = document.getElementById("download-safelink"); var notif = document.getElementById("daplong"); var waktu = 15; 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); notif.style.display = "none"; linkDL.style.display = "inline-block"; } else { teks_waktu.innerHTML = "The link will appear in " + waktu.toString() + " seconds"; }}, 1000); /*]]>*/</script></center> </div>
<div class='separator-text'>
<!-- Write Your Article Content Here -->
</div>
<div class='blockLink' style='text-align:center'>
<div id='ads-left' class='ads-left'>
<!-- Put your Adsense code here -->
</div>
<div id='go-link'> <a class='button' href='javascript:void(0)' onclick='changeLink();' rel='nofollow noreferrer'>Go to Link</a>
</div>
<div id='ads-right' class='ads-right'>
<!-- Put your Adsense code here -->
</div>
</div>
Step 3: copy the modified code and go back to the page you just created. Switch to “HTML view” and paste the code there. Update the page.
Step 4: Copy the code below and add it just before the closing head tag( before </head>) of your Blogger site HTML code. You will have to go to Theme > Edit HTML.
<style>
/* Safelink */
.button-outline{background-color: #086978;color:white; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);font-size:20px; font-weight:bold;width:responsive; border-radius:5px}
.safelink span{display: block;font-size: 18px; color:red}
.blockLink{display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;align-items: center;-webkit-align-items: center}
.blockLink > div{display: block;width: 35%;}
.blockLink > div#go-link{width: 30%;}
.blockLink > div#go-link a{display: none;margin: 0}
.blockLink > div#go-link:target a{display: inline-flex}
.ads-top{margin: 0 0 20px 0;text-align: center}
#HTML99,#HTML99 .widget-content{border: 0 !important;margin: 0 !important;padding: 0 !important}
/* Responsive */
@media screen and (max-width: 768px){.blockLink > div{width: 100% !important;margin: 0 0 15px;text-align: center}.blockLink > div:last-child{margin: 0}}
</style>
<script>/*<![CDATA[*/ var uri = window.location.toString(); if (uri.indexOf("%3D","%3D") > 0) { var clean_uri = uri.substring(0, uri.indexOf("%3D")); window.history.replaceState({}, document.title, clean_uri);} var uri = window.location.toString(); if (uri.indexOf("%3D%3D","%3D%3D") > 0) { var clean_uri = uri.substring(0, uri.indexOf("%3D%3D")); window.history.replaceState({}, document.title, clean_uri);} var uri = window.location.toString(); if (uri.indexOf("&m=1","&m=1") > 0) { var clean_uri = uri.substring(0, uri.indexOf("&m=1")); window.history.replaceState({}, document.title, clean_uri); } var uri = window.location.toString(); if (uri.indexOf("?m=1","?m=1") > 0) { var clean_uri = uri.substring(0, uri.indexOf("?m=1")); window.history.replaceState({}, document.title, clean_uri);}; var protocol=window.location.protocol.replace(/\:/g,''); if(protocol=='http'){ var url=window.location.href.replace('http','https'); window.location.replace(url);} /*]]>*/</script>
Steps 5: Finally, copy the code below and paste it just before the closing body tag(before </body>). You will have to perform some modifications.
- Change the URL(www.bloggercustomiz.com/p/download.html) to that of the page you created earlier. You will find it twice.
- For the links you do not want to encrypt, your blog link should be one. Find and replace “bloggercustomiz.com” with your blog link.
- Finally safe your theme.
<script>/*<![CDATA[*/ var Base64 = {_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", encode: function (input) {var output = ""; var chr1, chr2, chr3, enc1, enc2, enc3, enc4; var i = 0; input = Base64._utf8_encode(input); while (i < input.length) {chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) {enc3 = enc4 = 64;} else if (isNaN(chr3)) {enc4 = 64;} output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);} return output; }, decode: function (input) {var output = ""; var chr1, chr2, chr3; var enc1, enc2, enc3, enc4; var i = 0; input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); while (i < input.length) {enc1 = this._keyStr.indexOf(input.charAt(i++)); enc2 = this._keyStr.indexOf(input.charAt(i++)); enc3 = this._keyStr.indexOf(input.charAt(i++)); enc4 = this._keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4); chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) {output = output + String.fromCharCode(chr2);} if (enc4 != 64) {output = output + String.fromCharCode(chr3);} } output = Base64._utf8_decode(output); return output;}, _utf8_encode: function (string) {string = string.replace(/\r\n/g, "\n"); var utftext = ""; for (var n = 0; n < string.length; n++) {var c = string.charCodeAt(n); if (c < 128) {utftext += String.fromCharCode(c);} else if ((c > 127) && (c < 2048)) {utftext += String.fromCharCode((c >> 6) | 192); utftext += String.fromCharCode((c & 63) | 128);} else {utftext += String.fromCharCode((c >> 12) | 224); utftext += String.fromCharCode(((c >> 6) & 63) | 128); utftext += String.fromCharCode((c & 63) | 128); }} return utftext;}, _utf8_decode: function (utftext) {var string = ""; var i = 0; var c = c1 = c2 = 0; while (i < utftext.length) {c = utftext.charCodeAt(i); if (c < 128) {string += String.fromCharCode(c); i++;} else if ((c > 191) && (c < 224)) {c2 = utftext.charCodeAt(i + 1); string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); i += 2;} else {c2 = utftext.charCodeAt(i + 1); c3 = utftext.charCodeAt(i + 2); string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); i += 3;}} return string; }}; var encode = document.getElementById('encode'), decode = document.getElementById('decode'), output = document.getElementById('output'), input = document.getElementById('input'); var User_ID = ""; var protected_links = ""; var a_to_va = 0; var a_to_vb = 0; var a_to_vc = ""; function auto_safelink() {auto_safeconvert();}; function auto_safeconvert() {var a_to_vd = window.location.hostname; if (protected_links != "" && !protected_links.match(a_to_vd)) {protected_links += ", " + a_to_vd;} else if (protected_links == "") {protected_links = a_to_vd;} var a_to_ve = ""; var a_to_vf = new Array(); var a_to_vg = 0; a_to_ve = document.getElementsByTagName("a"); a_to_va = a_to_ve.length; a_to_vf = a_to_fa(); a_to_vg = a_to_vf.length; var a_to_vh = false; var j = 0; var daftarPostingan = [ "https://www.bloggercustomiz.com/p/download.html" ]; var randomPostingan = daftarPostingan[Math.floor(Math.random()*daftarPostingan.length)]; var a_to_vi = ""; for (var i = 0; i < a_to_va; i++) {a_to_vh = false; j = 0; while (a_to_vh == false && j < a_to_vg) {a_to_vi = a_to_ve[i].href; if (a_to_vi.match(a_to_vf[j]) || !a_to_vi || !a_to_vi.match("https")) {a_to_vh = true;} j++; } if (a_to_vh == false) {var encryptedUrl = Base64.encode(a_to_vi); a_to_ve[i].href = randomPostingan + "?url=" + encryptedUrl; a_to_ve[i].rel = "nofollow noreferrer"; a_to_vb++; a_to_vc += i + ":::" + a_to_ve[i].href + "\n"; }} var a_to_vj = document.getElementById("anonyminized"); var a_to_vk = document.getElementById("found_links"); if (a_to_vj) {a_to_vj.innerHTML += a_to_vb;} if (a_to_vk) {a_to_vk.innerHTML += a_to_va;} }; function a_to_fa() {var a_to_vf = new Array(); protected_links = protected_links.replace(" ", ""); a_to_vf = protected_links.split(","); return a_to_vf; }; /*]]>*/</script>
<script>/*<![CDATA[*/ protected_links = "javascript:;,blogger.com,paypal.me,whatsapp.com,youtube.com,telegram.me,google.com,twitter.com,pinterest.com,facebook.com,bloggercustomiz.com";auto_safelink(); /*]]>*/</script>
<!-- <b:if cond='data:blog.canonicalUrl == "https://www.bloggercustomiz.com/p/download.html"'> <script>(function(s,u,z,p){s.src=u,s.setAttribute('data-zone',z),p.appendChild(s);})(document.createElement('script'),'https://iclickcdn.com/tag.min.js',3517783,document.body||document.documentElement)</script> </b:if> -->
After performing all these modifications, all external links on your Blogger website will then open via you created download page. Visitors will then have to wait a couple of seconds to see the destination link.
You can check this post to see how it work. Just try downloading and see the magic.