Creating Safelink on Main Blog

Table of Contents

Safelink is usually found on blogs or websites with download themes, but what is often encountered is that the safelink is not on the main blog with a different domain.

There are several drawbacks of this type of safelink. The way it works is almost the same as other safelinks, it's just that the safelink page remains on the main domain.

When visitors want to download certain files on the blog, they will be directed to certain pages of the blog before finally going to the file download page.

There are many benefits to be gained from this version of SafeLink including:

1. No need to create a new blog or buy a new domain.

2. Easier to customize.
Stay on the main blog, meaning that it automatically increases the number of visitors on the main blog.

3. Reducing the bounce rate of the main blog.
Adsense placement tools to increase blog income.

4. 100% Safe because it is still in one domain with the main blog.

How to Make Safelink on the Main Blog

Here's how and the steps to make it, there are two parts. First create a Safelink Page/page and Second Edit Source/blog code.

Creating a Safelink Page

• For blogger pages, you don't have to be static pages, post pages can also be used as safelinks.
• The code below is a template that you can use for the safelink page layout.

<div class='ad-placement'>
  <!--[ Your_ad_code_here ]-->
</div>
<div class='safelink-button' id='safelink'>
  <div style='text-align: 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://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>
 </div>
</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>

• Copy the HTML code below on the Safelink page that you created earlier.
• Save your page again. The first stage is complete.
• If an error notification appears Your HTML cannot be accepted: Break tag: BUTTON or so on by clicking Close on the notification.

Recommended: Support your blog https because this will affect the user experience of visitors and affect the function of the script.

Added some CSS and JavaScript code

This CSS code functions to display the layout on the safelink page created in the first stage.

/* 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}

In blogger, the CSS code is marked with the <b:skin>...</b:skin> If it is difficult to place the CSS code above, you can search for the code </head> and place the CSS code just above the code </head> with a note that you must use the code <style>...</style>

The result is more or less like this:

<style>
  <!--[ Isi Kode CSS diatas ]-->
  </style>
</head>

Sometimes in certain templates you can't find the code </head>, instead you can look for codes like </head> or &lt;!--<head/>--&gt;&lt;/head&gt;

Javascript for Redirect?m=1

Find the code </head> on your blog, place the code below right above the code </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 works to remove the code &m=1 that usually appears when the page is accessed via mobile, because if the code &m=1 is not deleted then safelink will not work when visitors access it via the mobile platform.

This code also works to redirect visitors via http to https. If your blog is not in the support setting https , then you can delete the part that is already on the blog in the color code above.

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

Javascript Code To Encode Url

This code functions to change all external links on the blog to base64. The easiest way to place javascript code before tags </body>

<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://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 ]-->
  <script>protected_links = "facebook.com, instagram.com, twitter.com"; auto_safelink(); </script>
  </b:if>

This tag <b:if cond='data:view.isSingleItem'> functions to make the script only appear on the posting page and is static, it will not appear on other pages.