Blogger is one of the major used blogging platforms out there and a lot of bloggers out there are just starting out blogging using Blogger or Blogspot. However, blogger though simple is quite limited and lacks some tools which can easily make blog reach out to resources and capture as many visits as possible.
It is not easy to grow an audience on blogger because this platform does not have tools or does not support plugins like wordpress which can help style the blog and further increase the frequency of visits to the site.
Safelink or automatic download redirect is a script template which is known to increase page views and revenue to monetize a website or blog. When this safelink will be used in blogger, we are always forced to start or create a new blog to redirect all download links to increase page views and revenue.
Hopefully, now you don't have to create a new blog for this because in today's article, I will show you how to create an automatic safelink redirect on your blogger blog and without creating a new blog for safelink.
What is Safelink and How Does it Work?
A Safelink template or script is simply a collection of JavaScript code designed to encrypt any link by automatically syncing or embedding the link into some text or post.
When someone tries to access an encrypted link, that person has to go through safelink to get the link encrypted into this code set and often, safelink will ask you to wait a few seconds to try to access your link.
Safelink helps both people (both owner client/visitor) in such a way that owner receives page views and revenue from his visitors if he monetizes his website and visitor gets the link or content he is looking for on that website.
Blogger Safelink Types Blogger
There are 2 types of safelinks in blogger, namely safelink templates and safelink pages.
The Safelink template is an entire site on its own and links manually entered in the field are required for shortening.
The Safelink page is the page that carries the code that calls the code installed in the html section of the website. This safelink automatically shortens all links that are not added in the domain exclusions section.
Some developers have modified several templates and combined these two types of templates into one. We have the Safelink Ezafe template . This is a blog site template whose code has been modified and the safelink feature is included. If you want to get this type of template, you can visit Here
Today I'm interested in making a simple article about Safelink Main Blog which will automatically link all your links on your main site.
How to Create Auto Safelink on Main Blog
The process of creating an auto safelink for your main blog is very simple. You just need to install three sets of code in Pages which you will create on your blogger dashboard, one in-between tags <head> </head>and another in-between tags <body> </ body>. So, we will do this in 3 parts. Let's do that now.
Installing Code Page
- Open your blogger dashboard on the left navigation, click Pages
- Create a new page and name it whatever you want. But since we are going to create a safelink, I would suggest you to name your page Safelink so that the url on your page is https://yourdomain.com/p/safelink.html. Switch to HTML mode and copy and paste the code below
<div class='ad-placement'>
<!--[ Masukkan kode Iklan Anda di sini ]-->
</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://www.yourdomain.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 = 20; 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'>
<!--[ Konten artikel Di Sini ]-->
</div>
<div class='safelink-create' style='text-align:center'>
<div class='ad-placement'>
<!--[ Masukkan kode Iklan Anda di sini ]-->
</div>
<div id='getLink'>
<a class='button' href='javascript:;' onclick='changeLink();' rel='noreferrer noopener' target='_blank'>Get link</a>
</div>
<div class='ad-placement'>
<!--[ Masukkan kode Iklan Anda di sini ]-->
</div>
</div>In the code above, replace https://www.yourdomain.com/p/safelink.html with your safelink page link. Or simply replace yourdomain.com with your own domain if you named your page Safelink. once done, publish your page. Replace <!-- Enter your Ad code here --> with your Ad code and replace <!-- Article content Here --> with some of your own text.
Adding CSS & Scripts
- Go to your blog dashboard and click on Themes, then click on the orange drop-down button named CUSTOMIZE and select Edit HTML.
- You will be taken to the html section of your blog. Click anywhere in the code and then use the search feature press the button Ctrl + Fto call the find function. You will be shown a small bar above your site's HTML and there, Please enter the code </head>to search for the </head>. This is where you will place the code given below. In some templates you have to look for the tag <head/>This is the template code like median ui. This is the latest template with parsed html and js code for fast loading.
- Copy and paste the code below right above the code </head>
<style>
<!--[ Isi Kode CSS diatas ]-->
/* 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>
<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>Adding Javascript
- Still in the HTML section of your blog, press Ctrl + Fto call search and type </body>to find the body tag. Better yet, you can scroll up to the HTML code tag of your blog and you will see the tag </body>and place the Javascript given below right above the code.
- Replace all highlighted links with https://www.yourdomain.com/p/safelink.html with your safelink links.
- If you feel the steps have been applied, please save the theme, see the results
<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://www.yourdomain.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 = "javascript:;,blogger.com,paypal.me,whatsapp.com,youtube.com,telegram.me,google.com,twitter.com,pinterest.com,facebook.com"; auto_safelink(); </script>
</b:if>There is a code area called protected_links , here you can add domains that you don't want to pass through safelinks before accessing. When you add a domain, enter a comma (,). Example protected_links = "javascript:;,blogger.com,paypal.me,whatsapp.com,youtube.com,telegram.me,google.com,twitter.com,pinterest.com,facebook.com,yourdomain.com, I'm new just add these domains to protected_link distinguishing or separating them with commas.
Closing
Make sure you replace the safelink page URL correctly if there is a URL that has not been replaced it will not work but an error. So that's the article from How to Create Automatic Safelinks on the Main Blogger Blog. If you have any questions about it, comment below. I will gladly take the time to help you.
Reference:
https://www.jagodesign.com/2019/01/tutorial-make-safelink.html