Create Safelink Page On Main Blogger Website - UNPLUG.DOC

Create Safelink Page On Main Blogger Website All Template Working Script Lets Started

What is Safelink?

Perhaps most of the readers of this article already know what a secure link is, but as a reminder it will be explained here. Safelink is a page on a website or blog that is enabled to detect whether or not the desired URL / link is safe against viruses and malware, in short, safelink is a redirect page before the user goes to the desired page.

Safe links are generally found on download themed blogs / websites, but what is often found is that safe links are not on the main blog with different domains. There are some shortcomings of this type of secure link, but they will not be discussed here. Thinking of the various benefits that can be maximized with safelink, we tried to experiment by loading the safelink page which remains on the main blog and works perfectly.

Safelink Benefits

It works almost the same as other safe links, only the safe link page remains on the main domain. The scenario is when a visitor wants to download a specific file on a blog, they will be redirected to a specific page on the blog before finally heading to the download page for the file.

There are many benefits that can be obtained from this version of safelink, some of them are:

It is not necessary to create a new blog and buy a new domain.

Easier to customize

Stay on the main blog, which means that the number of visitors on the main blog automatically increases.

Increase blog pagerank as visitors increase  Reduce the bounce rate of the main blog

Adsense placement means to increase blog income.

100% safe because you are still on a domain with the main blog

The downside of this secure link is to convert all external links to encodings and get redirected to the secure link page, including social media links or other blog links (not download sites), the only way is to add any sites that do not want to be redirected to the safe link in the list of opt-out sites

Safelink Tutorials On The Main Blog

This tutorial will be divided into two parts, the first part creates a safelinknya page / page and the second part edits the source or blog code. We use bloggers, therefore this tutorial is also preferable to blogger users as users of other services can customize this tutorial.

Step 1: Create A Secure Link Page

First, creating a blogger page doesn't have to be a static page, the post page can also be used for this secure link. We assume you already understand and can create the page, then edit it in 'HTML View' by clicking the pencil icon at the bottom of the title when editing the page.

Change Link With Your Page Link URL

We have prepared a template that you can use to design your secure link page, so you only need to copy and paste the HTML code below into the secure link page that you created.

HTML CODE

<div class='ad-placement'>
  <!--[ Your_ad_code_here ]-->
</div>
<div class='safelink-button' id='safelink'>
  <div style='text-align: center'>
    <div class='asbutton 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="asbutton">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='asbutton' href='javascript:;' onclick='changeLink();' rel='noreferrer noopener' target='_blank'>Get link</a>
  </div>
  <div class='ad-placement'>
    <!--[ Your_ad_code_here ]-->
  </div>
</div>

Place your articles and Adsense code in the marked part. The corresponding Adsense sizing guideline is sizing.

Remember to copy the URL / link of the page you created earlier and replace the tagged URL https: //www.your_blog_address.com/p/safelink.html 

with the URL of your trusted links page. ...

You can also change the sentence on the link button to your liking by changing the “Get Link” and “Wait ...” sentences and other text that was checked.

The number 5 in the above code is the time parameter (in seconds) that the destination link displays, you can change it to be faster or later. You can also customize the displayed time text by changing the "Link will appear in", "second" section.
Recommended your blog to support https as it will irritate the visitor as well as affect how the script works.

Save the page again if the error message "HTML you cannot accept: tag is broken: BUTTON" or so appears by clicking the "Close" button in the notification until the first step is completed here, and please go to the second stage.

Step 2 - Add some CSS and Javascript code

The second part is going to be a little tricky, so watch carefully because if there is a small mistake, the secure link won't work.
Please edit your template in the short description mode “Edit HTML”, click on the topic and click on “Edit HTML” as shown below; If you need to back up your template first to avoid editing errors. 

Adding CSS code This CSS is used to display the layout on the trusted links page that was created in the first place.

CSS CODE

/* Safelink */
:root {
--link-outline-color: #48525c ;
--link-bg-color: #204ecf ;
}
.asbutton{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}
.asbutton.outline{color: var(--link-outline-color);background-color: transparent;border: 1px solid #ebeced}
.asbutton.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 .asbutton{display: none}
#getLink:target .asbutton{display: inline-flex}

You can edit this section, for example, resize the text in the link or so on.

In Blogger, the css is tagged with <b: skin> ... </ b: skin>. If you have difficulty placing the css code above, you can find the </head> code and place the CSS code directly above the </head> code, with a note that you need to use the <style> ... </style> code. The result is something like this:

<style>

<! - [Put CSS code here] ->

   </style>

</head> Sometimes </head> code is missing from certain templates, instead you can search for code like this: & lt; / head & gt; or & lt;! - <head /> - & gt; & lt; / head & gt;

Javascript to redirect ? m= 1

Find the </head> code on your blog and place it just above the </head> code:

CSS CODE

<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 above code serves to remove the '& m = 1' code that usually appears when accessing the page through a mobile phone, because unless the '& m = 1' code is removed, the secure link will not work when visitors access it via a mobile phone. Platform. This code also serves to redirect visitors via http to https. If your blog does not have https support configured, you can delete the section that was in the color block in the above code :

Javascript code to encode url

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

The easiest way to place javascript code is to place it before the </body> tag. Find the tag at the bottom of the template and paste below the Javascript code just before the </body> tag

CSS CODE

<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>

Change the marked part in the above code to the URL of your Trusted Links page.

By default, all inbound links will be redirected to the Trusted Links page, add some exclusion sites like your facebook page etc. to the "protected_links" section, separating them with commas (,) if you want to add some exclusions for sites.

the <b: ifcond = 'data: view.is SingleItem'> tag is used to ensure that the script appears only on the publication page and static, does not appear on other pages.

If you have added, click on "Save Theme" in your template.

Add more than 2 pages of safe links

You can slightly modify the above script to display more than two pages of safe links, which are randomly selected. The trick is to change the section of code :

var daftarPostingan = [ "https://www.your_blog_address.com/p/safelink.html" ];

Add a new URL, separated by a comma (,), to make the code look like the following; You can also add some other trusted link pages

var daftarPostingan = [ "https://www.your_blog_address.com/p/safelink.html", "https://www.your_blog_address.com/p/safelink-2.html" ];

At this point, your safe links page is completely complete. If you follow all the steps correctly, we can ensure that the Trusted Links page is working correctly. Please check it out by clicking the download link on your blog. If there are questions or sections that you do not understand, write the questions in the comment column.