How to Add Safelink in Blogger | How to Create Safelink in Blogger

Hi to all, in this article I am going to tell you all about how to add safe link in blogger website easily in just few minutes by using simples codes.

So, read this article carefully to get clear understanding about adding safe link in blogger without any issue or error.

Basically safelink is a page of a website or blog used to identify whether the intended URL or link is safe from viruses and malware, in short, safelink is a redirect page before the user goes to the intended page.

What is Safelink

Basically safelink is usually found on blogs or websites with download themes, and safelink is not on the original blog with a different domain. 

This is a secure link type has some disadvantages but will not be discussed here. Thinking about the various benefits maximized from using this safe links, we have tried to load a safelinks page that resides on the main blog and works perfectly.

Steps to Create Safelink

Login to Blogger

First of all you need to visit official blogger website.

Now you need to login to blogger website dashboard by using your login credentials safely.

Backup Blogger Theme

After sign-in to blogger website dashboard make sure that you have your blogger website theme backup, if any error occurs while saving the code then you can restore your backup code again and can run your website as usual and if you wan to backup theme code then you can follow below path.

Path: Blogger website dashboard -> Click on theme section -> click on arrow icon -> click on backup -> Click on download -> Verify captcha -> Save the downloaded file in a safe place for future use.

Open Blogger Theme Editor

For opening blogger theme editor to add the code inside it, you can follow the below provided path.

Path: Blogger website dashboard -> Click n theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor.

Now you need to follow below steps carefully.

Adding HTML Code

• Now you need to create a new page or open existing page

• Now you need to copy below provided HTML code

• Now paste the copied HTML code inside the page

 <div style="display:block">
  <!-- Fill AdSense code here-->
</div>
<div class="safelink" id="safelink">
  <center>
    <div class="S_Button outline" id="AT_SAFELINK">Wait for a while...</div>
    <script>
      /*<![CDATA[*/ var currentURL=location.href; var str = currentURL; var res = str.replace('https://example.com' + '?url=', ""); function changeLink(){var decodedString = Base64.decode(res); window.open(decodedString,'_blank')}; document.write('<a href="#go-link" id="download-safelink" class="S_Button outline">Click to go to the link</a>'); var linkDL = document.getElementById("download-safelink"); var notif = document.getElementById("AT_SAFELINK"); var time = 30; var text_time = document.createElement("span"); linkDL.parentNode.replaceChild(text_time, linkDL); var id; id = setInterval(function () { time--; if (time < 0) { text_time.parentNode.replaceChild(linkDL, text_time); clearInterval(id); notif.style.display = "none"; linkDL.style.display = "inline-block"; } else { text_time.innerHTML = "The link will appear in time " + time.toString() + " second"; }}, 1000); /*]]>*/
    </script>
  </center>
</div>
 <!-- Your Post Content Here-->
<div class="blockLink" style="text-align: center;">
  <div class="ads-left" id="ads-left">
    <!-- Fill AdSense code here-->
  </div>
  <div id="go-link">
    <a
      class="S_Button"
      href="javascript:void(0)"
      onclick="changeLink();"
      rel="nofollow noreferrer"
      >Go to link</a
    >
  </div>
  <div class="ads-right" id="ads-right">
    <!-- Fill AdSense code here-->
  </div>
</div>

Don't forget to copy the page url/link that you created earlier and replace the url https://example.com with the url of your safelink page.

Adding CSS code

• Now open blogger theme editor

• Search for ]]></b:skin>

• Now copy below provided CSS code

• Paste the copied CSS code before ]]></b:skin>

• Save the theme code

/* Safelink */
.S_Button{display: inline-flex;display: -webkit-inline-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;align-items: center;-webkit-align-items: center;margin-bottom: 10px;padding: 9px 20px;border-radius: 10px;font-size: .8rem;line-height: 1.3rem;background-color: #282828;color: #fff;border: 1px solid #fff;}}
.S_Button.outline{background-color:#282828;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
.safelink span{display: block;font-size: 12px}
.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;
    text-decoration: none;
}
.ads-top{margin: 0 0 20px 0;text-align: center}

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

Adding JavaScript Code

• Open blogger theme editor

• Search for closing body tag or </body> tag

• Copy below provided JavaScript code.

• Paste the copied JavaScript code before </body>

• Save the theme code.

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

Now after adding the two code inside blogger theme editor, now you need to Publish or Update your page where you have added above provided HTML code.

Now you have successfully added Safelink in your blogger.

Note:

Conclusion

I hope that you have understood about adding Saflink in blogger website easily in just few minute by using simple HTML, CSS and JavaScript codes.