Tutorial on making safelink on the main website/blog domain without creating a new blog
Maybe most of the readers of this article already know what a safelink is, but as a reminder, it will be explained again here.
Safelink is a page on a website or blog that is used to detect whether the destination url/link is safe or not from viruses and malware, in short safelink is a transition page before the user goes to the destination page.
Safelinks are usually found on blogs/websites with download themes, but what is often encountered is that they are not on the main blog with a different domain.
There are several disadvantages of this type of safelink but will not be discussed here. Thinking of the various benefits that can be maximized from safelink, so we tried to experiment with loading the safelink page that remains on the main blog and works perfectly.
Safelink Scenarios and Benefits
The way it works is almost the same as other safelinks, only the safelink page remains on the main domain.
The scenario is that when a visitor wants to download a certain file on a blog, they will be directed to a certain page from the blog before finally heading to the file download page.
There are many benefits to be gained from this version of Safelink, including:
- No need to create a new blog and buy a new domain
- Easier to customize
- Stay on the main blog, which means it will automatically increase the number of visitors to the main blog
- Increase blog pages because visitors are increasing
- Reduce the bounce rate for the main blog
- Placing Adsense means increasing blog income.
- 100% safe because it is still in the same domain as the main blog
- The disadvantage of this secure link is that it encodes all external links and is directed to the secure link page, including social media links or other blog links (not download sites), the only way is that you have to add every site that you don't want to be redirected To the secure link inside
Safelink tutorials on the main blog
This tutorial will be divided into two parts, the first part is to create the secure link page and the second part is to edit the source or blog code. We are using blogger because this tutorial is also preferred for blog users, other users of the service can adapt to this tutorial.
Step 1 - Create a Safelink Page
First of all, create a blog page, it doesn't need 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 modify it in HTML View by clicking the pencil icon at the bottom of the title when editing the page
We have prepared a template that you can use to layout the secure link page, so just copy and paste the HTML code below into the secure link page you created.
<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>Information:
- Put your article and Adsense code in the given section. The recommended size of the appropriate adsense is the size.
- Don't forget to copy the url/link you created earlier and replace the given url with "https://your_blog_address.com/p/safelink.html" with the url of the secure link page.
- You can also change the sentence on the link button according to your desires by changing the sentence "Get link", "Please wait..." and other highlighted text.
- The number 5 in the code above is the time parameter (in seconds) to display the destination link, you can change it to be faster or slower. You can also customize the text of the time that appears by changing the "Link will appear in the Second" section.
- It is recommended that your blog supports "https" as this will affect the experience of the visitors and affect the functionality of the script.
- Save the page you are ignoring if there is an error message "Your HTML cannot be accepted: end tag: BUTTON" or similar by clicking close notification, until the first stage completes here and please proceed to the second stage.
Step 2 - Add some CSS and Javascript Code
It should be noted that this second part is going to be a bit complicated so look carefully because if there is a slight error the secure link will not work
Please edit your form in Edit HTML mode In short, please click on the topic and click on Edit html as shown in the image below; If you need to backup the template first to avoid editing errors.
Adding CSS code:
This CSS code serves to display the layout on the safelink page that was created in the early stages.
/* Safelink */
:root {
--link-outline-color: #48525c ;
--link-bg-color: #204ecf ; // Warna background tombol link
}
.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> tag. If it is difficult to place the CSS code above, you can find the </head> code and place the CSS code right above the </head> code with a note that you must use the <style>...</style> code. The result is something like this:
<style>
<!--[ Isi Kode CSS diatas ]-->
</style>
</head>
Sometimes the </head> code is not found in certain templates , instead you can look for code like this: </head> or <!--<head/>--></head>
Javascript for Redirect ?m=1
Find the </head> code on your blog and place the code below just above the </head> 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 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 the 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 has not been set to support ' https ' then you can delete the part that has been color-blocked 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 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 as in the example below:
https://www.miusm-tech.com/p/safelink.html?url=aHR0cHM6Ly93d3c2NS56aXBweXNoYXJlLmNvbS92L3F3V1FhTDdWL2ZpbGUuaHRtbAThe easiest way to place javascript code is to place it before the </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>/*<![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 part marked 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 them with commas ( , ) if you want to add multiple exclusion sites.
tag <b:if cond='data:view.isSingleItem'> functions to make the script only appear on post pages and is static, will not appear on other pages.If you have added please click Save Theme in your template.
Adding More Than 2 Safelink Pages:
You can slightly modify the script above so that it can display more than two safelink pages that will be chosen randomly. The trick is to change the code section:
var daftarPostingan = [ "https://your_blog_address.com/p/safelink.html" ];Add a new url separated by a comma ( , ) so that the code becomes as below; You can also add some other safelink pages
var daftarPostingan = [ "https://your_blog_address.com/p/safelink.html", "https://your_blog_address.com/p/safelink-2.html" ];This is optional, you can add it or decide to keep using only one safelink page
Up here 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.
It's been updated!!
This article has been updated to make it easier to use and has been tested on other blogs, 100% working, if you still find errors there may be something wrong in implementing the code