How to make Safelink on Main Blog in Blogger

What is Safelink ?

Maybe most of the readers of this article already know what 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 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.

Safelink is usually found on blogs / websites with download themes, but what is often encountered is that the safelink is not on the main blog with a different domain. There are some disadvantages of this type of safelink but will not be discussed here. Thinking of the various benefits that can be maximized from safelink, we tried to experiment with loading a 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, it's just that the safelink page remains on the main domain. The scenario is that when visitors want to download certain files on the blog, they will be directed to a certain page of the blog before finally heading to the file download page.

There are many benefits that can be obtained from this version of Safelink, some of which are:

• No need to create a new blog and buy a new domain
• It's easier to customize
• Stay on the main blog, meaning that it automatically increases the number of visitors on the main blog
• Increase blog page rank because visitors increase
• Reducing the bounce rate of the main blog
• Adsense placement means to increase blog income.
• 100% Safe because it is still in the same domain as the main blog

Safelink Demo

Safelink Tutorial on Main Blog

This tutorial will be divided into two parts, the first part is creating the safelink page and the second part is editing the source or blog code. We use blogger because this tutorial is also preferred for blogger users, for other service users you can adjust this tutorial.

Step 1 - Creating a Safelink Page

1. First of all, make a blogger page, it doesn't have to be a static page, the post page can also be used for this safelink. We assume you understand and can create it, then save the page and then edit it again 'in html mode'.

2. We have prepared a template that you can use for the layout of the safelink page, so you only need to copy and paste the script code below on the safelink page that you have created.

<div class='separator' style='text-align:center'>
<div class='ads-top'><!-- Fill AdSense code here--></div>
<div class='safelink' id='safelink'>
<center>
<div class='asbutton outline' id='daplong'>
Wait a minute...</div>
<script>/*<![CDATA[*/ var currentURL=location.href; var str = currentURL; var res = str.replace('https://www.your_domain_name.com/p/safelink.html' + '?url=', ""); function changeLink(){var decodedString = Base64.decode(res); window.open(decodedString,'_blank')}; document.write('<a href="#go-link" id="download-safelink" class="asbutton outline">Click to go to the link</a>'); var linkDL = document.getElementById("download-safelink"); var notif = document.getElementById("daplong"); var waktu = 20; var teks_waktu = document.createElement("span"); linkDL.parentNode.replaceChild(teks_waktu, linkDL); var id; id = setInterval(function () { waktu--; if (waktu < 0) { teks_waktu.parentNode.replaceChild(linkDL, teks_waktu); clearInterval(id); notif.style.display = "none"; linkDL.style.display = "inline-block"; } else { teks_waktu.innerHTML = "Link will appear in " + waktu.toString() + " second"; }}, 1000); /*]]>*/</script></center>
</div>

<div class='separator-text'><!-- Write your article content here --></div>

<div class='blockLink' style='text-align:center'>
<div id='ads-left' class='ads-left'><!-- Fill AdSense code here --></div>

<div id='go-link'>
<a class='asbutton outline' href='javascript:void(0)' onclick='changeLink();' rel='nofollow noreferrer'><i class ='icon demo'> </i>Go to the link</a>
</div>

<div id='ads-right' class='ads-right'><!-- Fill AdSense code here --></div>
</div>

Tip 1. Place your articles and Adsense code in the comment section <!-- Fill AdSense code here -->. The recommended adsense size is responsive for the top and 336x280 on the left and right of the safelink.

Tip 2. Don't forget to copy the page url / link that you created earlier and replace the url https://www.your_domain_name.com/p/safelink.html with the url of your safelink page.

Tip 3. You can also change the sentence on the link button to your liking by changing the sentence 'Click here to go to link' and 'Wait a minute...'and others that we've marked.

Tip 4. Number 20 in the code above is the time parameter (seconds) that the destination link is displayed for, you can change it to be faster or slower. You can also customize the display time text by changing the 'The link will appear in','second'.

Tip 5. It is recommended that your blog support 'https'because this will affect the experience of visitors.

3. Save the page you ignore if in case there is an error message ' Your HTML cannot be accepted: Tag break: BUTTON ' or so by clicking close on the notification , until here the first step is finished and please continue to the second stage. It should be noted that this second part will be a little complicated so pay close attention because if there is even a little error then the safelink will not work.

Step 2 - Add Safelink Script Code in Template

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 ' edit HTML ' mode. In short, please click on the theme and click edit html as shown below; If necessary, backup your template first to avoid editing errors

1. Add Safelink CSS

This CSS code serves to display the layout on the safelink page and to hide the safelink widget from appearing on the blog.

/* Safelink */
.asbutton.outline{display: inline-flex;display: -webkit-inline-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;align-items: center;-webkit-align-items: center;margin-bottom: 10px;padding: 9px 20px;border-radius: 10px;font-size: .8rem;line-height: 1.3rem;background-color: #282828;color: #fff;border: 1px solid #fff;}
.asbutton.outline{background-color:#282828;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
.safelink span{display: block;font-size: 12px}
.blockLink{display: flex;display: -webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;align-items: center;-webkit-align-items: center}
.blockLink > div{display: block;width: 35%;}
.blockLink > div#go-link{width: 30%;}
.blockLink > div#go-link a{display: none;margin: 0}
.blockLink > div#go-link:target a{display: inline-flex}
.ads-top{margin: 0 0 20px 0;text-align: center}
#HTML99,#HTML99 .widget-content{border: 0 !important;margin: 0 !important;padding: 0 !important}
/* Responsive */
@media screen and (max-width: 768px){.blockLink > div{width: 100% !important;margin: 0 0 15px;text-align: center}.blockLink > div:last-child{margin: 0}}

If you have trouble finding a place to put the css code above you can search for the code </head> and put the css code right above the code </head> with notes must be squeezed in the code <style> --- </style>. It looks like this:

<style>
<!-- Fill in the CSS code above -->
</style>

Sometimes the </head> code is not found in certain templates, instead you can look for code like this: </head&gt or &lt;!-<head/>&gt;&lt;/head&gt;.

2. Add Safelink Javascript

Look for the code </head>on your blog and place the code below just above the code </head>:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<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 code above serves to delete the code'&m=1'which usually appears when the page is accessed via mobile, if code '&m=1' not deleted, safelink will not function when visitors access it via the mobile platform. This code also serves to redirect visitors through 'http'to'https'. If your blog has not been set up support 'https'then you can delete the section;

var protocol=window.location.protocol.replace(/\:/g,''); if(protocol=='http'){ var url=window.location.href.replace('http','https'); window.location.replace(url);}

• Blog is set in mode 'http' will not work if opened via'https'and the reverse mode applies 'https' will not work if opened via'http'.

3. Create a New Widget

Look for the sidebar widget section of your template which is usually tagged with code <b:section> or <b:widget> please look for your template code like this. Add a new widget by copying and pasting the code below.

If you have trouble please find the code </b:widget></b:section> on your template and place the code below right in the middle of that code to be </b:widget> fill in the code below </b:section>.

<b:widget cond='data:view.isSingleItem' id='HTML99' locked='false' title='Safelink' type='HTML' version='1'>
  <b:widget-settings>
    <b:widget-setting name='content'/>
  </b:widget-settings>
  <b:includable id='main'>
    <div class='widget-content'>
      <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 encode = document.getElementById('encode'), decode = document.getElementById('decode'), output = document.getElementById('output'), input = document.getElementById('input'); 
      var User_ID = ""; 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.your_domain_name.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 = "nofollow noreferrer"; a_to_vb++; a_to_vc += i + ":::" + a_to_ve[i].href + "\n"; }} var a_to_vj = document.getElementById("anonyminized"); var a_to_vk = document.getElementById("found_links"); 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>
      <script>/*<![CDATA[*/ protected_links = "facebook.com,instagram.com,twitter.com";auto_safelink(); /*]]>*/</script> 
    </div>
  </b:includable>
</b:widget>

• Put your safelink page url back in the marked section.
• By default all external links will be directed to the safelink page, add a few exclusion sites such as your blog's facebook page and so on in the section 'protected_links', separate with commas (,) if you want to add some exception sites.
• cond = 'data: view.isSingleItem' make the widget appear only on post pages and static, will not appear on other pages.

4. Click Save Theme on your template.

Add More Than 1 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_domain_name.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://www.your_domain_name.com/p/safelink.html", "https://www.your_domain_name.com/p/safelink-2.html" ];

This is optional, you can add it or decide to keep using one safelink page only.

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.

Reference
www.jagodesain.com

You May Like These Posts:

Go to Link