Hello visitor how are you, I hope you are doing great 😃. So today topic is all about Creating Safelink On Main Blog and Redirecting All The External Links to Safelink Page.
Before Starting to read the article First just know about :
What Is Safelink ?
A Safelink is a template or you can moreover say a script which is used for encryption of any links in the given number of codes and automatically embedding the links in texts or codes.
And if anyone tries to access the 🔗 link which is encrypted by safelink then they have to go through the encryption suppose you have to wait for some times for getting your desired link.
Safelink in a manner helps both the blog owners and visitors in a way that if readers/visitors visit the encrypted page then the blog owner get the views and revenue if the blog is monetized and the visitors gets the desired links that he wants.
Two types of Blogger Safelink
Usually there are two types of Safelink we can use on blogger. They are Page Safelink and Template Safelink.
The Page Safelink is installed on normal blog and when it works it just use the code given to create all links in encryption. This types of Safelink auto shorten all types of url if any url is not given in exception tag.
The Template Safelink is a type of template where we have to install the theme and there after we have to manually insert the links to shorten the url.
But here is an interesting 🤔 thing to know that nowadays developers have combine this two methods and created some redesigned templates which you can get easily on Google.
So today we are going to describe the Page Safelink method in a described manner. So keep reading till last to create a Safelink on your main blog page.
Page Safelink Benefits and Structure
The Page Safelink works same as the Template Safelink but the Page Safelink is created on main blog page so it remains on the same blog and we don't have to install on any other domain etc.
Structure of a Page Safelink is when visitors want to download something from your blog, they will be redirected to the Safelink Page that is created for encrypting all the links before getting the link of downloadable thing.
There are many benefits of Page Safelink the benefits of Page Safelink are described below 👇🏻👇🏻👇🏻👇🏻
- There is no need to create new blog and buy a new domain.
- Very easy to customized.
- Visitors stay on the same blog, automatically increasing the number of visitors.
- Page rank can increase because of the increased in visitors.
- Bounce rate of your blog can be decrease.
- And placement of adsense can increase the revenue also.
- It is safe because it is installed on main blog and in the same domain.
The disadvantage of the page safelink is that it will redirect all the links of the website even if you want to go home. You have to go thorugh Safelink if the links are not add on to exception. To not redirected to safeling you have to add site link to tha exception list on script.
Creating Safelink Page On Main Blog
Follow the below given steps carefully to create a Safelink on page in main blog. The steps will be divided in two parts. Fisrt we have to create the safelink page, then we have to go to second part where we will edit the blog source code or theme.
Note : Before Proceeding to below steps please take out the backup of your theme and blog.
Step 1 - Creating a Safelink Page
- So login to your blogger account.
- Go to your blogger dashboard, then on pages.
- Now click on new page and give the name of Page, you can give any name but as we are creating safelink so you can name the page as Safelink.
- Now switch to
'HTML view'section on page by clicking on the ✏️ pencil icon. - Now we alerady have script for for Safelink Page you just need to copy the code from below 👇🏻👇🏻 given box and paste it in the html mode ..
COPY THE CODES FROM BELOW AND PASTE IT ON THE SAFELINK PAGE THAT YOU HAVE 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>
Code Explanation:
- After pasting the above code do not forgot publish the page.
- Now open the page and Place your ads code and the article section in the marked section. The size for the ads on the top is responsive and 336×280 on left and right side of the Safelink.
- And place your page url in the marked section of your url
"https://www.your_blog_ address.com/p/safelink.html". Get your url link after publishing the page copy that link and paste it there. - Now you can change the marked part as per your requirement what you want to write there like
'Get link'and'Please wait...'and other texts. - You can also change the time parameter to get the desired link to for creating. You can change no
'Number 5'to any number that you want to take time. And you can also change the time text like'Link will appear in','second'etc. - It is recommended to enable
'https'in your blog because of visitors effect and script function.
Now save the page and ignore if any kind of html error 'HTML you can notaccept: Tag broke: BUTTON' or anything, after the completion of this step 1 now proceed to step 2.
You should now proceed further with caution. Because the second step is little bit complicated and pay close attention to every steps carefully. Even a little bit mistake can make error than the Safelink will not work.
Step 2 : Final Methods for Safelink
Now go to your theme section, then click on edit html. Before doing this step backup your template to rollback to previous.
Follow the below steps carefully.
Adding Css code for Safelink
This css code will help in layout section of Safelink Page and to hide the Safelink Widget to appear on blog.
/* Safelink */
:root {
--link-outline-color: #48525c ;
--link-bg-color: #204ecf ; // Link button background color
}
.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}You can change the css code as per your requirements like resizing text on link etc.
Css codes in blogger tag with <b:skin>... </b:skin> . If you don't know how to place and where to place the css codes you can find the code </head> and paste the css code directly above the </head> code with the note that it must be under the style code like <style>... </style> . This will look like this below 👇🏻👇🏻👇🏻
<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 code for Safelink Page
Now look for the code </head> on your template and then copy the below code and place it on above </head> .
<b:if cond='data:blog.pageType == "static_page"'>
<script>/*<![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);}; 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 is for to delete the code "& m = 1" which is appeared when we browse from mobile, if that code is not deleted the "&m = 1" the Safelink will not work with mobile when visitors visit the page from mobile. The code also enable to redirect the 'http' to 'https'.
If your blog is not setup on 'https' then you can delete the below given section from the above code.
var protocol = window.location.protocol.replace(/\:/g,''); if(protocol == 'http'){ var url = window.location.href.replace('http','https'); window.location.replace(url);}Suppose a blog is setup on "https" then it will not work on "http" and also same in the vice versa. So check the appropriate according to the blog.
Blogs that are set in 'http' mode will not work if they are opened via 'https'.
Javascript code for encrypted url
This scrip given below now change all the external links on the blog to Base64, after adding the script all encoded links 🔗 will look like below 👇🏻👇🏻
https://www.your_blog_address.com/p/safelink.html?url=aHR0cHM6Ly93d3c2NS56aXBweXNoYXJlLmNvbS92L3F3V1FhTDdWL2ZpbGUuaHRtbA
Very easy way to place the javascript code is before the end of </body> tag. Now you can look for this tag at the bottom of the template and just copy and paste the code above </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 to your blog Safelink page url you have created in the first step.
After completing all the setps, by default it will redirect all the external links to the safelink page, add some exclusion site such as your blogs address, Facebook adress and social media adresses and so on in the given field 'protected_links' section with seperate commas , if you want to add site exceptions.
The tag <b:ifcond='data:view.is SingleItem'> is given to serves to make the script appear only on the post page and static, and it will not appear on other pages.
Now at last click on Save Template.
Trick To Add More Than 2 Safelink Pages
Now if you want to display more than two Safelink Pages to be selected randomly, you can slightly modify the script. The main trick is to change the code section slightly :
var daftarPostingan = [ "https://www.your_blog_address.com/p/safelink.html" ];
Now add a new url separated by a comma (,) so that the code should look like below given code ; you can also add some other safelink Pages.
var daftarPostingan = [ "https://www.your_blog_address.com/p/safelink.html", "https://www.your_blog_address.com/p/safelink-2.html" ];
This trick is optional, you can add it or decide it later to keep using one safelink page only.
Now all the setps is done. Now you must have created Safelink on main blog in page for Redirecting all the pages.
I hope you have successfully follow all the steps and created a Safelink Page. If you have any problem facing during the medot. You can comment below and rate the article for me and visit again to see more of these types of posts.