How to Add Auto SafeLink Blogger On The Specific Posts or Pages in Your Blogger Blog

Hello, everyone! Wellcome to SoiPro .Today on this occasion I will going to share a tutorial about How to create Safe Links with Blogger on specific posts or pages automatically.

The way it works is almost the same as other safelinks, except that the safelink page is still on the main domain. When visitors want to download certain files or visit strange links on the blog, they are directed to a certain page of the blog before finally reaching the destination page. You can check out the demo.View Demo

What is Safelink?

Safelink is a page on a website or blog used to detect if a linked url/project is safe or not from viruses and malware, in short, a safelink is a page that redirects before users use used to move to target page.

Safelink is usually found on blogs/websites with download themes, but it's common for safelink not to be on the main blog with a different domain. There are some weaknesses of this safelink type but will not be discussed here. Thinking about the various benefits that can be maximized from safelink, we tried to experiment with loading a safelink page that is still on the main blog and fully functional.

Create a auto Safelink on the specific pages or posts of the Main Blog

Alright, let's go straight to the installation tutorial.You now follow these steps carefully.

How to create Safe Links with Blogger on specific posts or pages automatically

Step 1: First of all Login to your Blogger Dashboard..

Step 2: On Blogger Dashboard., click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Copy the bootstrap plugins and paste it into Heder Section ( <head> to </head> ) [ before </head> or </head>].

 <link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css' rel='stylesheet'/>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-progressbar/0.9.0/bootstrap-progressbar.min.js'></script>

Step 6: You must have implemented jquery plugin, If not Please, implement the following jQuery Plugin into Heder Section ( <head> to </head> ) [ before </head> or </head>].

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

Step 7: You must have implemented fontawesome plugin, If not Please, implement the following fontawesome Plugin into Heder Section ( <head> to </head> ) [ before </head> or </head>].

 <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css'></script>

Step 8: Copy the following javascript code and implement it into Heder Section ( <head> to </head> ) [ before </head> or </head>].

 <b:if cond='data:view.isSingleItem'>
   <script type='text/javascript'>
      //<![CDATA[
      var currentURL = location.href;
      var str = currentURL;
      var res = str.replace("https://yourblogname.blogspot.com?url=", "");
      
      $(".Visit_Link").hide();
      
      function changeLink() {
         var decodedString = Base64.decode(res);
         window.open(decodedString, 'noopener noreferrer', '_blank');
      }
      
      function generate() {
         var n = document.getElementById("download2"),
            t = document.getElementById("btn"),
            l = document.getElementById("daplong"),
            d = (document.getElementById("download2").href, 6),
            a = document.createElement("span");
         n.parentNode.replaceChild(a, n);
         var o;
         o = setInterval(function () {
            d--, 0 > d ? (a.parentNode.replaceChild(n, a), clearInterval(o), l.style.display = "none", n.style.display = "inline") : (a.innerHTML = "<h3 class='text-warning'>Link will appear in " + d.toString() + " Second</h3>", t.style.display = "none")
         }, 510)
      }
      
      function clickshow() {
         var e = document.getElementById("download"),
            b = document.getElementById("download3"),
            t = document.getElementById("btn"),
            d = (document.getElementById("download").href, 11),
            a = document.createElement("span");
         e.parentNode.replaceChild(a, e);
         var o;
         o = setInterval(function () {
            d--, 0 > d ? (a.parentNode.replaceChild(e, a), clearInterval(o), e.style.display = "inline", b.style.display = "inline") : (a.innerHTML = "<h3 class='text-danger'>Link will appear in " + d.toString() + " Second</h3>", t.style.display = "none")
         }, 1010)
      }
      
      function jump(h) {
         var top = document.getElementById(h).offsetTop;
         window.scrollTo(0, top);
      }
      //]]>
   </script>
</b:if>

Replace your blog name instead of https://yourblogname.blogspot.com

Step 9: Copy the CSS code below and implement it just below </b:skin> or //]]></b:skin> code.

 <b:if cond='data:view.isSingleItem'><style>.slideInDownThumb {
	-webkit-animation: bounce 1s linear 1s infinite normal;
	animation: bounce 1s linear 1s infinite normal;
	-webkit-transform-origin: center bottom;
	-ms-transform-origin: center bottom;
	transform-origin: center bottom;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

@-webkit-keyframes bounce {

	0%,
	100%,
	20%,
	53%,
	80% {
		-webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(.215, .61, .355, 1);
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	40%,
	43% {
		-webkit-transition-timing-function: cubic-bezier(.755, .050, .855, .060);
		transition-timing-function: cubic-bezier(.755, .050, .855, .060);
		-webkit-transform: translate3d(0, -30px, 0);
		transform: translate3d(0, -30px, 0)
	}

	70% {
		-webkit-transition-timing-function: cubic-bezier(.755, .050, .855, .060);
		transition-timing-function: cubic-bezier(.755, .050, .855, .060);
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0)
	}

	90% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0)
	}
}

@keyframes bounce {

	0%,
	100%,
	20%,
	53%,
	80% {
		-webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
		transition-timing-function: cubic-bezier(.215, .61, .355, 1);
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}

	40%,
	43% {
		-webkit-transition-timing-function: cubic-bezier(.755, .050, .855, .060);
		transition-timing-function: cubic-bezier(.755, .050, .855, .060);
		-webkit-transform: translate3d(0, -30px, 0);
		transform: translate3d(0, -30px, 0)
	}

	70% {
		-webkit-transition-timing-function: cubic-bezier(.755, .050, .855, .060);
		transition-timing-function: cubic-bezier(.755, .050, .855, .060);
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0)
	}

	90% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0)
	}
}

</style></b:if>

Step 10: Add Javascript for Redirect ?m=1. Find the </head> code on your blog and place the code below just above the </head> or </head> code:

 <b:if cond='data:view.isSingleItem'>
   <script type='text/javascript'>
      //<![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)}
      //]]>
   </script>
</b:if>

The code above serves to remove the code '&m=1 ' which usually appears when the page is accessed via mobile, because if the code '&m=1 ' is not removed then safelink will not work when visitors access it via the mobile platform. This code also works to redirect visitors via 'http' to 'https'.

Step 11: Now implement the Javascript Code to Encode Url. This script serves to change all external links on the blog to Base64, after adding the script below all external links will be automatically encoded. The easiest way to place the following javascript code just before </body> tag. Look for the tag usually at the bottom of the template and paste the Javascript code below right before the </body> tag.

< b: if cond = 'data:view.isSingleItem' >
   <script type = 'text/javascript' >
   //<![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 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("http")) {
            a_to_vh = true;
         }
         j++;
      }
      if (a_to_vh == false) {
         var encryptedUrl = Base64.encode(a_to_vi);
         var x = Math.floor((Math.random() * 4) + 1);
         var xxx = null;
         if (x == "1") {
            xxx = "/2022/08/test.html"
         }
         if (x == "2") {
            xxx = "/2022/08/test2.html"
         }
         if (x == "3") {
            xxx = "/2022/08/test3.html"
         }
         if (x == "4") {
            xxx = "/2022/08/test4.html"
         }
         a_to_ve[i].href = "https://yourblogname.blogspot.com" + xxx + "?url=" + encryptedUrl;
         a_to_ve[i].rel = "nofollow";
         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>

Replace /2022/08/test.html, /2022/08/test2.html, /2022/08/test3.html, /2022/08/test3.html with your desired specific safelink post and Replace your safelink blog url instead of https://yourblogname.blogspot.com.

Step 12: Copy the following javascript code before </body>

 <script>
   //<![CDATA[
   // Save the domains you don't want to be encrypted

   protected_links = "SoiPro.Com.com,linkedin.com,twitter.com,youtube.com,facebook.com,google.com";
auto_safelink();
//]]>
</script><b: if >

By default all external links will be redirected to the safelink page, add some exception sites such as your facebook blog page and so on in the 'protected_links' section, separate them with a comma (,) if you want to add some exception sites, change the part marked in the code above with desired websites.

Step 13: Save the changes by clicking on this icon

Creating a Specific Auto Safelink Pages or Posts

First of all, create a blogger page or post, it doesn't have to be a static page, the posting page can also be used for this auto safelink. We assume you already understand and can create the page, then edit it in 'HTML Display' by clicking the pencil icon at the bottom of the title when editing the page or post.
We have prepared a template that you can use for the layout of the safelink page, so you only need to copy and paste the HTML code below on the safelink page that you have created.

Step 14:Then you just need to paste the link generator HTML code below into the each specific auto safelink post or page into the HTML Version. Add this code into the specific safelink posts or pages, paste it between paragraphs of your blog article (above). Replace the code marked with your ad code.

 <!-- Ads code Here -->
<div class='text-xs-center margin-bottom-20'>
<p class='text-warning'>Encrypting your link and protect the link from viruses, malware, thief, etc! Made your link safe to visit.</p>
<div class='clearfix'/>
   <div class='col-md-4 text-xs-center' style='margin:0 auto;float:none;'>
      <div class='progress' id='daplong'>
         <progress class='progress progress-striped progress-info progress-animated' data-percentage='100' max='100' value='0'/>
         <button class='btn btn-success' id='download2' onclick='jump(&quot;btn-down&quot;);clickshow()' style='display:none'><strong>Click here for Generate Link</strong></button>
      </div>
      <!-- Ads code Here -->
   </div>
</div>

Step 15: Then add this Download HTML code below into the each specific auto safelink posts or pages, paste it between paragraphs of your blog article (below). Replace the code marked with your ad code.

 <div id='btn-down'/>
<div class='container'>
<div class='row'>
   <div class='col-md-4 float-xs-left text-xs-center ad-column'>
      <div class='row'>
         <!-- Ads code Here -->
      </div>
   </div>
   <div class='col-md-4 text-xs-center'>
      <button class='alert alert-dismissible alert-success btn-lg' id='download3' style='display:none'><i aria-hidden='true' class='fa fa-thumbs-o-up'/> <strong>Well done!</strong> you have successfully gained access to Decrypted Link. <i aria-hidden='true' class='fa fa-hand-o-down slideInDownThumb'/></button>
      <div class='clearfix'/></div>
      <div class='col-md-4 float-xs-right text-xs-center ad-column'>
         <div class='row'>
            <!-- Ads code Here -->
         </div>
      </div>
   </div>
</div>

Step 16: Copy the following Javascript Code and paste it into the each your specific safelink implemented post or page into the HTML Version.

 < script type = "text/javascript" >
var currentURL = location.href;
var str = currentURL;
var res = str.replace("https://yourposturl.blogspot.com/2022/08/your-current-post-url-where-you-are-going-to-paste-it.html?url=", "");

document.write('<div class="text-ts-center"><button type="button" id="download" class="Visit_Link btn btn-success" onclick="changeLink();" style="display: none;"><strong>Download File</strong> <i class="fa fa-download"></i></button></div>'); </script>

Replace your desiered safelink specific post url or page url instead of https://yourposturl.blogspot.com/2022/08/your-current-post-url-where-you-are-going-to-paste-it.html.

Step 17: Now Save or Publish your safelink specific posts or page.

Step 18: Finally your auto safelink on the specific posts or pages has been complatelly implemented on your blogger template.

If you are redirecting your auto safelink posts in different blog follow all the above steps for your specific posts or pages for another blog.

Conclusion

Ok so that 's How to create Safe Links with Blogger on specific posts or pages automatically. I hope you enjoy this article. Please do share this article. Now your safelink page has been completely created, if you follow all the steps correctly then we can guarantee the safelink page is working well. Please try it by clicking the download link on your blog. If there are questions or parts that are not understood, please write questions through the comments column provided. Thank you!

Source:
www.soipro.com

SoiPro Technology

How to create Safe Links with Blogger on specific posts or pages automatically

What is Safelink?

Create a auto Safelink on the specific pages or posts of the Main Blog

How to create Safe Links with Blogger on specific posts or pages automatically

Creating a Specific Auto Safelink Pages or Posts

Conclusion

About the Author

Đăng nhận xét

How To Create Random Password Generator Tool In Blogger

File Robot.txt chuẩn nhất cho Blogspot

How to Create Google Drive Direct Link Generator Tool in Blogger ?

HTML Parser Tool - Best Online Function

Syntax Highlight Online

SoiPro Technology