Tạo SafeLink Trên Blog Chính


Xin chào các bạn, trong bài viết này mình sẽ hưỡng dẫn tới các bạn cách làm Safelink trên blog chính của mình nhé

Thực Hiện

Bước 1: Tạo trang Safelink

Đầu tiên các bạn vào phần Trang sau đó nhấn chọn Tạo trang mới sau đó đặt tên là safelink, sau đó chèn đoạn HTML này vào rồi nhấn Lưu lại


<div class='ad-placement'>
  <!--[ Chèn mã quảng cáo ở đây ]-->
</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'>

  <!--[ Viết nội dung của bạn ở đây ]-->

</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'>
    <!--[ Chèn mã quảng cáo ở đây ]-->
  </div>
</div>

Ghi chú: Nhớ thay đổi https://your_blog_address.com thành trang web của bạn nhé!


Tiếp đó bạn copy đường dẫn tới trang safelink của bạn lại nhé

Bước 2: Thêm CSS và Javascript

Các bạn chọn vào Giao diện -> Chỉnh sửa HTML sau đó chèn đoạn CSS này lên trên thẻ ]]></b:skin> hoặc trong cặp thẻ <style></style>

/* 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}

Tiếp đến là chèn mã Javascript này lên trên thẻ đóng </head>

<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>

Đoạn mã trên dùng để xóa cụm '?m=1' thường xuất hiện khi trang được truy cập qua thiết bị di động, vì nếu mã '?m=1' không bị xóa thì liên kết an toàn sẽ không hoạt động khi khách truy cập vào nó qua thiết bị di động. Mã này cũng hoạt động để chuyển hướng khách truy cập qua 'http' đến 'https'. Nếu blog của bạn chưa được bật 'https' thì bạn có thể xóa phần này trong đoạn mã trên:
var protocol = window.location.protocol.replace(/\:/g,''); if(protocol == 'http'){ var url = window.location.href.replace('http','https'); window.location.replace(url);}

Ghi chú: Một số trang web đang để chế độ http thì sẽ không hoạt động nếu như đường dẫn là https nhé


Lưu ý:Phần này các bạn phải làm chính xác nhé, sai một ly nó ứ chạy đâu đấy, đừng có than phiền à nha! Ahihi

Đoạn Javascript này dùng để thay đổi liên kết bên ngoài trên blog thành Base64, sau khi thêm đoạn javascript bên dưới thì các liên kết bên ngoài sẽ được mã hóa tự động như trong ví dụ bên dưới
https://quangsangblog.com/p/safelink.html?url=aHR0cHM6Ly93d3c2NS56aXBweXNoYXJlLmNvbS92L3F3V1FhTDdWL2ZpbGUuaHRtbA

Cách bạn sẽ chèn đoạn này ở trên thẻ đóng </body> nhé!


<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>

Theo mặc định, thì tất cả các liên kết bên ngoài sẽ được chuyển hướng đến trang safelink, để thêm một số trang loại trừ như trang facebook blog của bạn, v.v. trong phần 'protected_links' hãy thêm trang vào trong cặp dấu "" và hãy phân tách nó bằng dấu phẩy ( , ) nếu bạn muốn thêm nhiều trang loại trừ.
Thẻ <b:if cond='data:view.isSingleItem'> có tác dụng để cho đoạn Javascript chỉ xuất hiện trên các trang đăng và tĩnh, nó sẽ không xuất hiện trên các trang khác.
À quên còn phần được tô màu xanh dương ấy, các bạn hay thay thành đường link dẫn tới trang safelink của bạn đã được copy ở trước đó nhé
Các bạn cũng có thể thêm 2 hoặc nhiều được link safelink hơn bằng cách thay đổi đoạn
var daftarPostingan = [ "https://your_blog_address.com/p/safelink.html" ];
thành
var daftarPostingan = [ "https://your_blog_address.com/p/safelink.html", "https://your_blog_address.com/p/safelink-2.html" ];
Nhớ thêm dấu phẩy (,) mỗi khi thêm một liên kết nào đó nhé

Kết Thúc

Vậy là từ nãy tới giờ mình đã hưỡng dẫn bạn tạo safelink chạy trực tiếp trên blog chính rồi nhé, à hình như có gì sai sai nè, nhớ nhấn Lưu lại nhé các bạn và cùng hưởng thụ thành quả thôi nào

Tham khảo:
www.jagodesain.com