What is Safelink
Perhaps most readers of this article already know what a safelink is, but as a reminder it will be explained back here. Safelink is a page on a website or blog that is enabled to detect whether the intended url / link is safe or not from viruses and malware, in short safelink is a redirect page before the user goes to the intended page.
Safelinks are usually found on blogs / websites with download themes, but what is often encountered is that safelinks are not in the main blog with different domains. There are some shortcomings of this type of safelink but it will not be discussed here. Thinking about the various benefits that can be maximized from safelink, then we try to experiment by loading the safelink page that remains on the main blog and works perfectly.
Safelink Scenarios and Benefits
It works almost the same as other safelinks only the safelink page remains in the main domain. The scenario is when a visitor wants to download a specific file in a blog, they will be redirected to a specific page of the blog before finally heading to the file's download page.
- No need to create a new blog and buy a new domain
- Easier to customize
- Stay in the Main blog, meaning automatically increase the number of visitors on the main blog
- Increase blog pagerank as visitors increase
- Reduce bounce rate from main blog
- Means of adsense placement to increase blog income.
- 100% Secure because it's still in one domain with the main blog
- The disadvantage of this safelink is to convert all external links into encodes and be redirected to the safelink page, including social media links or other blog links (not download sites),the only way is you have to add any site that does not want to be redirected to the safelink in the list of exclusion sites
Safelink Tutorials On Main Blog
Step 1 - Create a Safelink Page
<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>- Put your Adsense articles and code on the marked part.The appropriate adsense size recommendation is size.
- Don't forget to copy the url/link of the page you created earlier and replace the url "https://www.your_blog_ address.com/p/safelink.html" that has been marked, with the url of your safelink page.
- You can also change the sentence on the link button to your liking by changing the sentences 'Get link' and 'Please wait...' and other text that has been marked.
- The number 5 in the code above is the time parameter (seconds) the destination link displays, you can change it to be faster or later. You can also customize the text of the time that appears by changing the 'Link will appear in', 'second' section.
- Recommended your blog support 'https' as this will have an effect with the experation of the visitor as well as affect the functioning of the script.
Step 2 – Add Some CSS and Javascript Code
Note: The second part will be a little complicated so look carefully because if there is a slight error then the safelink will not work.
Please edit your template in the mode 'edit HTML' brief description please click the theme and click edit html as shown below; If you need to backup your template first to avoid editing errors.
Adding CSS code
This CSS code serves to display the layout on the safelink page created at the initial 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}<style>
<!--[ Put above CSS code here ]-->
</style>
</head>Sometimes the </head> code is not found in certain templates, instead you can look for code like this: & lt; / head & gt; or & lt;! - <head /> - & gt; & lt; / head & gt;
Javascript for Redirect ?m=1
Find the code </head> on your blog and place the code below just 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 above code 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 the safelink will not work when when visitors access it through the mobile platform. This code also serves to redirect visitors via 'http 'to' https'. If your blog has not been set support 'https' then you can remove the section that has been in the color block in the code above:
var protocol = window.location.protocol.replace(/\:/g,''); if(protocol == 'http'){ var url = window.location.href.replace('http','https'); window.location.replace(url);}Blogs that are set in 'http' mode will not work if they are opened via 'https'.
Javascript Code for 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 to be as in the example below
https://www.your_blog_address.com/p/safelink.html?url=aHR0cHM6Ly93d3c2NS56aXBweXNoYXJlLmNvbS92L3F3V1FhTDdWL2ZpbGUuaHRtbAThe easiest way to place javascript code is to place it before the tag </body>. Look for the tag at the bottom of the template and paste the Javascript code below just before the </body> tag.
<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 code above with the url of your safelink page
- By default all external links will be redirected to the safelink page, add some exclusion sites such as your blog's facebook page and so on in the 'protected_links'section, separate with commas (,) if you want to add some site exceptions.
- the tag <b:ifcond='data:view.is SingleItem'> serves to make the script appear only on the post page and static, will not appear on other pages.
Add More Than 2 Safelink Pages
You can slightly modify the script above in order to display more than two safelink pages to be selected randomly. The trick is to change the code section:var daftarPostingan = [ "https://www.your_blog_address.com/p/safelink.html" ];var daftarPostingan = [ "https://www.your_blog_address.com/p/safelink.html", "https://www.your_blog_address.com/p/safelink-2.html" ];This is optional, you can add it or decide to keep using one safelink page only.
Video Tutorial
Coming Soon ☺️
At this point, your safelink page has been completely created, if you follow all the steps correctly we can guarantee that the safelink page is working properly. Please test it by clicking the download link on your blog. If there are questions or sections that are not understood, please write down questions through the comments column provided.
It's been updated!!
This article has been updated to make it easier to use and has been tested on other blogs and working properly, if you still find errors there may be something wrong in applying the code.
Reference
www.jagodesain.com