Hello friends and welcome to our WebSite for tutorial about Safelink in Blogger Website.
 |
| How to make Safelink in Blogger |
Safelink are a nice method to increase user engagement and protect links or divert Traffic so as to maximize AD Revenue.
So Today we will add this in Blogger Website with some codes of JS and CSS.
Let's see what is a Safelink with a quick intro of it-
Safelink - All you need
Safelink is a protect link method to make links of our type and make more use engagement so as to maximize AD Revenue of our AdSense.
Without wasting any more time let's start I didn't safelink in any blogger template.
Steps to add Safelink in any Blogger Template
Install jQuery
Install jQuery to make library's functional. If your theme doesn't have jQuery installed then go to</head>and paste the following code above it.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
<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 is used to remove the ' ?m=1 ' phrase that normally appears when the page is accessed via a mobile device, because if the ' ?m=1 ' code isn't removed, the secure link won't work when the guest arrives. access it via mobile device. This code also works to redirect visitors via ' http ' to ' https '.
Install CSS
Adding Default CSS of our Safelink to make it look good, We will add the below code above]]></b:skin>
/* 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}Install JS
Now go to </body> and paste the below code :<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>Adding HTML
Adding a Safelink Shortner in your Website, create a new page from Page section with a name of safelink and insert the below code there to automate the links to safelink...
<div class='ad-placement'>
<!--[ Insert promo 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'>
<!--[ Insert promo code here ]-->
</div>
</div>Remember to change https://your_blog_address.com to your website!
-
Finally
Now Click on save and check if your code is fully functional or not...
If you face any errors then please do comment below and we will surely reply to you..
Extra Info
By default, all external links will be redirected to the safelink page, to add some exclusions like your facebook blog page etc in the ' protected_links ' section add the page inside the "" and separate it with a comma ( , ) if you want to add more exclusion pages.
The
You can also add 2 or more safelink links by changing the paragraph.
For
Remember to add a comma (,) every time you add a link
The
<b:if cond='data:view.isSingleItem'> tag is used to make the Javascript snippet appear only on post and static pages, it will not appear on other pages.You can also add 2 or more safelink links by changing the paragraph.
var daftarPostingan = [ "https://your_blog_address.com/p/safelink.html" ];
var daftarPostingan = [ "https://your_blog_address.com/p/safelink.html", "https://your_blog_address.com/p/safelink-2.html" ];
Conclusion
So that's how you can easily add a Safelink to your website to protect all the Internal or Redirect links of your website.
© Crangsten | All Rights Reserved
© Crangsten | All Rights Reserved
Some FAQ's related to this Post
How to setup Safelink in Blogger?
Safelink System in Blogger will help you to Redirect users to your desired links so as to protect linking and increase your Ad-Revenue.
Safelink Advantages - you should know
Using Safelink has below some Advantages - • Professional Blog • Protect Links • Maximise Revenue • Increase User Engagement • Increase WebViews • Traffic Recycling