How to make Automatic Safelink on Main Blog in Blogger

What is SafeLink?

Safelink is a page on a website or blog that is used to check whether a requested URL/link is safe from viruses and malware. Safelink is a page that the user sees before going to the desired page/site.

We often see secure links on various sites, especially on download sites. What they do is create a new blog specifically for this purpose and apply a subdomain to it.

This method is not very suitable, especially if your ads are being served by AdSense. They will place a limit on your account or they may ban you from AdSense (in the worst case).

It works like other secure links, but you don't have to leave your main domain. It only sends visitors to a specific page. When visitors want to download something, they are directed to a specific blog page before going to the download page.

~~Table of Content (toc)~~

Benefits of creating a secure link on the main blog

There are many benefits of using this version of secure link and some of them are listed below.
You don't need to create a new blog.
There is no need to buy a new domain.
Staying on the main blog will automatically increase page views.
increase the increase.
Increase sales with more page views.

Step 1 - Creating a Safelink Page:

First, create a blog page. It doesn’t have to be a static page. You can also use your documentation page in this secure link. Assuming you can understand and execute, save the page and return to the HTML.
We have to prepared the template which you can use for the safelink page layout, so you just need to copy and paste the script code below on a safelink page which you have just created.

<div class='ad-placement'>
  <!--[ Your_ad_code_here ]-->
</div>

<div class='safelink-button' id='safelink'>
  <center>
    <div class='button outline' id='safelink-wait'>Please wait...</div>
    <script>/*<![CDATA[*/ var currentURL = location.href; var str = currentURL; var res = str.replace('https://www.your_blog_address.com/p/safelink.html' + '?url=', " "); function changeLink(){ var decodedString = Base64.decode(res); window.open(decodedString, '_blank')}; document.write('<a href="#getLink" id="safelink-download" class="button">Create link</a>'); var linkDL = document.getElementById("safelink-download"); var notif = document.getElementById("safelink-wait"); var time = 5; var textTime = document.createElement("span"); linkDL.parentNode.replaceChild(textTime, linkDL); var id; id = setInterval(function () { time--; if (time < 0) { textTime.parentNode.replaceChild(linkDL, textTime); clearInterval(id); notif.style.display = "none"; linkDL.style.display = "inline-block"; } else { textTime.innerHTML = "Link will appear in " + time.toString() + " second"; }}, 1000); /*]]>*/</script>
  </center>
</div>

<div class='safelink-content'>

  <!--[ Write_your_content_here ]-->

</div>

<div class='safelink-create' style='text-align:center'>
  <div class='ad-placement'>
    <!--[ Your_ad_code_here ]-->
  </div>

  <div id='getLink'>
    <a class='button' href='javascript:;' onclick='changeLink();' rel='noreferrer noopener' target='_blank'>Get link</a>
  </div>

  <div class='ad-placement'>
    <!--[ Your_ad_code_here ]-->
  </div>
</div>

Place write your article in and Adsense code will be in the marked section. The recommended size of the appropriate adsense is responsive for the top and also its up to your theme if you have sidebar in theme then on the left and right of the safelink you can put ad as per your adujstment.
Please Don not forget to copy a url of the page/link that you created earlier and replace the url in the code above with the url of your safelink page which you have created
You can also change the sentence on the link button to your sentance by changing the sentences 'Going to the Link' and 'Wait a minute...' and others that we have marked in.
Number 5 In the above code is the time parameter in (seconds) displaying by the destination link, so now you can change it to be faster or slower. You can also customize the display time text by changing 'Link will appear in','seconds'. or something as you wish
i will recommend that your blog supports 'https' as this will affect the visitor experience ok

3. Save the page that you ignored if there is an error message blogger will resolve in auto 'Your HTML cannot be accepted:- Break tag:- BUTTON' or more by clicking close on the notification, until the first stage is complete and please continue to the second stage. It should be noted that this second part will be a bit complicated so pay close your ttention on it because if there is even the slightest error then safelink will not work so be careful in it ok.

How to make Automatic Safelink on Main Blog in Blogger

Step 2 Final:

It should be noted that this second part will be a bit complicated so pay close attention because if there is a slight error then safelink will not work

Please edit your template in 'edit HTML' mode. In short, please click on the theme and click on edit html as shown below; If necessary, back up your template first to avoid editing mistakes.

1. CSS:

This CSS code serves to display the layout on the safelink page and to hide the safelink widget so that it does not appear on the blog.

/* Safelink */
:root {
--link-outline-color: #48525c ;
--link-bg-color: #204ecf ; 
}

.button{display: inline-flex;align-items: center;margin: 15px 15px;padding: 10px 20px;outline: 0;border: 0;border-radius: 2px;color: #fefefe;background-color: var(--link-bg-color);font-size: 14px;white-space: nowrap;overflow: hidden;max-width: 100%;line-height: 2em}
.button.outline{color: var(--link-outline-color);background-color: transparent;border: 1px solid #ebeced}
.button.outline:hover{border-color: var(--link-bg-color)}
.safelink-button, .safelink-create > *{margin: 1.8em 0}
.safelink-button span{display: block;font-size: 12px}
#getLink{margin: 5px 0}
#getLink .button{display: none}
#getLink:target .button{display: inline-flex}

2. Javascript:

Look for code </head> on your site or blogger in html theme code and place the code below just above the code before ending this </head>:

<b:if cond='data:view.isPage'
  <script>/*<![CDATA[*/ 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>
</b:if>

The code above serves to remove the code '& m=1' which usually appears when the page is accessed or visit via mobile, if the code '& m=1' is not removed,then the safelink will not work when visitors access it via the mobile platform. This code also serving to redirect visitor through 'http'to'https'. If your blog has not set up 'https' support then you can remove that section or watch the video which is embedded to uderstand well;

var protocol = window.location.protocol.replace(/\:/g,''); if(protocol == 'http'){ var url = window.location.href.replace('http','https'); window.location.replace(url);}

Blogs set in 'http' mode will not work if opened via 'https' and the reverse mode applies 'https' will not work if opened via 'http' so be care full here in this logic.

3. Javascript Code for Encode Url

This script serves to change all external links on the blog in to Base64, after adding the script below all external links will be automatically encoded as in the example below

https://blogger-store.com.com/p/safelink.html?url=aHR0cHM6Ly93d3c2NS56aXBweXNoYXJlLmNvbS92L3F3V1FhTDdWL2ZpbGUuaHRtbA

The easiest way to place javascript code is to place it before the ending of </body> tag. Look for the tag at the bottom of the template of blogger and paste the Javascript code below just before the </body> tag i hope you understand it.

<b:if cond='data:view.isSingleItem'>
  <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 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.your_blog_address.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 = "noopener noreferrer"; a_to_vb++; a_to_vc += i + ":::" + a_to_ve[i].href + "\n";} } var a_to_vj = ""; var a_to_vk = ""; 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>

  <!--[ Protect link from encode here you can add those main domains for which you dont safelink ]-->
  <script>protected_links = "facebook.com, yourblog-address-here.com, instagram.com, twitter.com"; auto_safelink(); </script>
</b:if>

4. Click on Save Template to Check:

At This stage, your safelink page has been created successfuly, if you follow all the steps correctly, I bet that the safelink page will work correct and properly. Please test it by clicking the download link on your blog. If there are questions or parts that are not understood, please write questions through the comment column provided or comment in youtube video as soon as possible i will response.

If you face any problem you can comment below.