How to Make Automatic Safelink on Main Blogger Blog

How to Make Automatic Safelink on Main Blogger Blog

Blogger is one of the main blogging platforms used out there and many bloggers out there that just started blogging use Blogger or Blogspot. However, blogger though simple is quite limited and lacks some tools that can easily make the blog to be reach in resources and capture as many visits as possible.

It is not that easy to grow an audience on blogger since this platform lacks tools or do not support plugins as wordpress that can help stylish the blog and subsequently increase visits frequency to the site.

Safelinks or automatic download redirect are template scripts that are known for increasing page views and revenue for monetizing websites or blogs. When these safelinks are to be used on blogger, we are always forced to start or create a new blog for redirection of all download links in order to increase page views and revenue.

Hopefully, now you won't have to create a new blog for this because in todays article, I will show you how to create a make an automatic safelink redirection on your blogger blog and without creating a new blog for safelink.

What is a Safelink and How does it works?

A Safelink template or script is simply a set of JavaScript codes designed for encrypting any link by automatically syncing or embedding the link into some text or a post.

When someone will try to access the encrypted link, the person will have to go through the safelink to get the link encrypted into this set of codes and often, the safelink will ask you to wait for some seconds in order to access the link you are trying to access.

Safelink helps both persons (both owner an client/visitor) in such a way that the owner receives page views and revenue from his visitors if he monetizes his website and a visitor get the link or the content he came to look for on that website.

Types of Blogger Safelinks

There are 2 types of safelink types on blogger which are template safelink and page safelink.

The Safelink template is a whole site on its own and links are manually entered in the required field for shortening.

Safelink page is a page that carries a code which calls an installed code in the html section of the website. This safelink is auto-shortens all links not added in the domain exception section.

Some developers have modified some templates and brought all these two template types into one. We have median ui 1.4 or median ui 1.5 safelink template. This is the template of a blogging site who's code has been modified and the safelink feature included. If you want to get this type of template, you can visit AiM Templates.

Today we are interested in the Safelink page which will auto safelink all your links on your main site. 

How to Make Auto Safelink on Main Blog

The process of making an auto safelink for your main blog is very simple. You will just need to install three set of codes in a page that you will create on your blogger dashboard, another in-between the <head></head> tag and the other in-between the <body></body> tag. So, we will do this in 3 sections. Let's do that now.

Section 1: Installing the page code

Step 1: Go to your blogger dashboard. On the left navigation, click on Pages,

How to Make Automatic Safelink on Main Blogger Blog
Step 2: Create a new page and name it what ever you want. But since we are to create a safelink, I will advice you to name your page safelink or download. Switch to the HTML section and copy paste the code below as seen in the image below;

How to Make Automatic Safelink on Main Blogger Blog

Copy the code below and paste it in your safelink page html section

<div class='separator' style='text-align:center'> 
<div class='ads-top'> 
<!-- Enter your Ad 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.your_domain.com/p/safelink.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'> 
<!-- Article Content Here --> 
</div>   
<div class='blockLink' style='text-align:center'>  
<div id='ads-left' class='ads-left'> 
<!-- Enter your Ad 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'> 
<!-- Enter your Ad code here -->     
</div>
</div>

In the above code, replace https://www.your_domain.com/p/safelink.html with your safelink page link. Or just simply replace your_domain.com in with your own domain if you named your page Safelink. when done, publish your page. Replace <!--Enter your Ad code here--> with your Ad code and replace <!--Article content Here--> with some text of your own.

Section 2: Adding Script in <head></head> tag

Step 1: Go to your blog dashboard and click on Theme, then click on the orange drop-down button named CUSTOMIZE and select Edit HTML.

How to Make Automatic Safelink on Main Blogger Blog

Step 2: You will be taken to your blog's html section. Click anywhere on the code and then press Ctrl + F key to call the find function. You will be shown a small bar above the HTML of your site and there, you enter </head> to search for the </head> tag. This is where you will place the code given below. In some templates, you will have to search for <head/> tag. This is the code of templates such as median ui. These are latest templates with parsed html and js codes for fast loading.

How to Make Automatic Safelink on Main Blogger Blog

Place the code below just before this tag. See the image below for reference

How to Make Automatic Safelink on Main Blogger Blog

Code to place before the </head> tag

<!-- Code to put before </head> tag -->
<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 &gt; div{display: block;width: 35%;} 
.blockLink &gt; div#go-link{width: 30%;} 
.blockLink &gt; div#go-link a{display: none;margin: 0} 
.blockLink &gt; 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 &gt; div{width: 100% !important;margin: 0 0 15px;text-align: center}.blockLink &gt; 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> 

Section 3: Adding script code in <body></body> tag

Step 1: Still in your blog HTML section, press Ctrl + F to call for search and type in </body> to find the body tag. Better still, you can scroll till the button of your blog HTML and you will see the </body> tag and place the code given below just before this tag. See the image below for more reference;

How to Make Automatic Safelink on Main Blogger Blog

Code to place before the </body> tag;

<!-- Code to place before </body> -->
<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.aimtuto.com/p/safelink.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,aimtuto.com";auto_safelink(); /*]]>*/</script> 
<!-- <b:if cond='data:blog.canonicalUrl == &quot;https://www.aimtuto.com/p/safelink.html&quot;'> <script>(function(s,u,z,p){s.src=u,s.setAttribute(&#39;data-zone&#39;,z),p.appendChild(s);})(document.createElement(&#39;script&#39;),&#39;https://iclickcdn.com/tag.min.js&#39;,3517783,document.body||document.documentElement)</script> </b:if> --> 

Replace all the highlighted link with https://www.aimtuto.com/p/safelink.html with your safelink link.

There is an area of the code named protected_links, here you can add the domains you woud not like to pass through the safelink before access. As you add a domain, put in a comma (,). Example protected_links = "javascript:;,aimtuto.com, apkpremiumz.com, entitledknowlegde.com, football-updates.com, wearesoccerupdates.com, eductutorials.com, I have just added these domains to the protected_link distinguishing or separating them with a comma.

Step 2: Click the save icon to safe the changes applied to your template.

How to Make Automatic Safelink on Main Blogger Blog

Now all links added to your site will be auto safelinked and before accessing it, the visitor will have to go through your safelink page.