구글 블로그 html 세이프 링크

블로그를 운영하는 대부분의 사람들이 세이프링크(Safelink)가 무엇인지 잘 모르고 있을 겁니다. 세이프링크는 블로그 페이지의 URL 링크가 바이러스 및 맬웨어로부터 안전한지 여부를 감지하는 데 사용되는 페이지입니다. 예를 들면 세이프링크는 방문자가 블로그에서 특정 파일을 다운로드하려는 경우 파일 다운로드 페이지로 이동하기 전에 블로그의 특정 페이지로 이동하는 것입니다.

Safelink는 일반적으로 다운로드 페이지가 있는 블로그 / 웹 사이트에서 찾을 수 있습니다. 하지만 문제는 블로그 기본 도메인에 세이프링크 페이지가 없어서 방문자의 이탈률이 늘어나게 됩니다. 이 포스팅에서는 세이브링크를 통해 구글 블로그에서 방문자를 남아있게 하고 다양한 이점이 있는 세이프링크 페이지를 만드는 방법을 알려드리겠습니다.

목차

1. 세이프링크 작동 원리 및 장단점
2. STEP 1 - 페이지 만들기
3. STEP 2 - CSS 및 자바스크립트 코드 추가
4. 2개 이상의 세이프 링크 페이지 추가

세이프링크 작동 원리 및 장단점

세이프 링크 작동 원리은 다른 safelink와 거의 유사하며 safelink 페이지만 기본 도메인에 남습니다. 작동 과정은 방문자가 블로그에서 특정 파일을 다운로드하려고 할 때 최종적으로 파일 다운로드 페이지로 향하기 전에 블로그에서 특정 페이지로 연결되는 것입니다.

가장 큰 장점은 방문자가 블로그에 더 오래 머물 수 있도록 체류 시간을 늘릴 수 있다는 것입니다.

Safelink Demo

세이프링크에서 얻을 수 있는 많은 이점이 있으며 그 중 일부는 다음과 같습니다.

• 새 블로그를 만들거나 도메인을 구입할 필요가 없습니다.
• 내 블로그에 페이지를 만들고 내가 원하는 디자인으로 꾸밀 수 있습니다.
• 방문자가 블로그에 머무르면서 블로그 방문자 수가 자동으로 증가합니다.
• 방문자 증가로 검색 결과에서 블로그 페이지 순위가 증가합니다.
• 애드센스 광고를 배치하면 블로그 수입을 늘릴 수 있습니다.
• 기본 블로그와 동일한 도메인에 있기 때문에 바이러스 및 맬웨어로부터 100% 안전합니다.

세이프 링크의 단점은 모든 외부 링크를 인코딩하여 변환하기 safelink 페이지로 리디렉션 한다는 것입니다 (소셜 미디어 링크 또는 기타 블로그 링크 포함). 유일한 방법은 세이프 링크를 사용하지 않을 사이트를 수동으로 추가해야 한다는 것입니다. 세이프링크로 리디렉션되길 원하지 않는다면 예외 사이트 목록을 추가합니다.

블로그에 세이프링크 페이지 만들기

이 튜토리얼은 두 부분로 나누어질 것입니다. 첫 번째 단계는 블로그에 세이프 링크 페이지를 만들 것이고, 두 번째 단계는 소스 또는 블로그 코드를 수정하는 것입니다. 이 방법은 구글 블로그(Blogger)를 사용하는 사람뿐만 아니라 다른 플랫폼의 이용자도 이 방법을 적용할 수 있습니다.

STEP 1 - 페이지 만들기

우선 새 페이지를 만든 후 아래의 소스 코드를 복사하여 붙여 넣습니다.

<div class='ad-placement'>
  <!--[ Your_ad_code_here ]-->
</div>

<div class='safelink-button' id='safelink'>
  <center>
    <div class='button outline' id='safelink-wait'>잠시만 기다려주세요...</div>
    <script>/*<![CDATA[*/ var currentURL = location.href; var str = currentURL; var res = str.replace('https://www.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">링크 얻기</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 = "링크는 " + time.toString() + " 초 후에 나타납니다."; }}, 1000); /*]]>*/</script>
  </center>
</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'>링크로 이동</a>
  </div>

  <div class='ad-placement'>
    <!--[ Your_ad_code_here ]-->
  </div>
</div>

+ 새 페이지 > HTML 보기에 위 코드를 복사 붙여넣기 후 아래 단계를 따릅니다.

1. 각각의 표시된 영역에 내용이나 애드센스 코드를 넣으십시오.
2. https://your_blog_address.com/p/safelink.html를 페이지 URL 링크로 변경합니다.
3. 링크 얻기, 잠시만 기다려주세요..., 링크는, 초 후에 나타납니다.는 원하는대로 변경할 수 있습니다.
4. 위 코드에서 숫자 5 는 시간 second (초)입니다. 링크 얻기 버튼과 함께 표시되고 시간을 빠르게 하거나 느리게 변경할 수 있습니다.

 

STEP 2 - CSS 및 자바스크립트 코드 추가

이 두 번째 부분은 약간 복잡합니다. 약간의 오류가 있어도 세이프링크가 작동하지 않으니 아래 단계를 따라 천천히 진행해주세요.

구글 블로그 대시보드 > 테마 > HTML 편집을 클릭하십시오. 편집하다가 오류가 발생할 수 있기 때문에 먼저 테마를 백업해두는 것이 좋습니다. 구글 블로그 백업 및 복원하는 방법을 알아보세요.

CSS 코드 추가

이 CSS 코드는 처음 STEP 1에서 만든 세이프링크 페이지에 레이아웃을 표시하는 역할을 합니다. 필요한 경우 코드를 편집할 수 있습니다. 예를 들면 텍스트의 크기 변경, 배경 색상 변경 등..

먼저 html 테마 편집기에서 Ctrl + F로 ]]></b:skin>를 검색하고 검색한 코드 위에 다음 CSS 코드를 배치합니다.

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

리디렉션 용 자바스크립트 ?m=1

블로그에서 </head> 코드를 찾아 </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>

위 코드는 모바일을 통해 페이지에 접속했을 때 표시되는 '&m=1' 코드를 제거하는 역하를 합니다. '&m=1' 코드를 제거하지 않으면 방문자가 모바일 플랫폼을 통해 페이지에 접속했을 때 세이프 링크가 작동하지 않기 때문입니다. 이 코드는 'http'를 통해 'https'로 방문자를 리디렉션하는 역할도 합니다. 블로그 도메인이 'https'를 지원하지 않는 경우 위 코드에서 표시된 부분을 삭제할 수 있습니다.

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

'http' 모드로 설정된 블로그는 'https'를 통해 열리면 작동하지 않습니다.

URL을 인코딩하는 자바스크립트 코드

이 스크립트는 블로그의 모든 외부 링크를 Base64로 변경하는 역할을 합니다. 아래에 스크립트를 추가하면 모든 외부 링크가 아래의 예처럼 자동으로 인코딩 됩니다.

https://urliveblogger.blogspot.com/p/safelink.html?url=aHR0cHM6Ly93d3c2NS56aXBweXNoYXJlLmNvbS92L3F3V1FhTDdWL2ZpbGUuaHRtbA

자바스크립트 코드를 배치하는 가장 쉬운 방법은 </body> 태그 앞에 배치하는 것입니다. 일반적으로 템플릿 하단에서 </body> 태그 바로 앞에 자바스크립트 코드를 붙여 넣습니다.

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

위의 코드에 표시된 부분을 세이프 링크 페이지의 URL로 변경하십시오.

기본적으로 모든 외부 링크는 세이프 링크 페이지로 리디렉션되며, 블로그의 facebook 페이지 등과 같은 일부 사이즈를 제외시키려면 'protected_links' 섹션에 추가하고, 여러 개를 추가하려면 쉼표(,)로 구분하십시오.

<b:if cond='data:view.isSingleItem'> 태그 기능은 스크립트가 게시물 페이지에만 표시되고 정적이며 다른 페이지에는 표시되지 않습니다.

완료했으면 테마 저장을 클릭합니다.

2개 이상의 세이프 링크 페이지 추가

위의 코드를 약간 수정하여 무작위로 두 개 이상의 세이프 링크 페이지를 표시할 수 있습니다. 코드를 변경하는 방법은 다음과 같습니다.

var daftarPostingan = [ "https://your_blog_address.com/p/safelink.html" ];

아래와 같이 새로운 URL을 추가하고 쉼표 (,)로 구분합니다.

var daftarPostingan = [ "https://your_blog_address.com/p/safelink.html", "https://your_blog_address.com/p/safelink-2.html" ];

이것은 선택 사항입니다. 추가하거나 하나의 세이프 링크 페이지만 계속 사용하도록 결정할 수 있습니다.

모든 단계를 올바르게 수행했으면 safelink 페이지가 제대로 작동할 것입니다. 블로그의 다운로드 링크를 클릭하여 사용해 보세요. 질문이나 이해되지 않는 부분이 있으면 제공된 댓글란을 통해 질문을 남겨주십시오.

업데이트 됨!!
이 문서는 더 쉽게 사용할 수 있도록 업데이트되었으며 다른 블로그에서 100% 작동하는 테스트를 거쳤습니다. 그래도 오류가 발견되면 코드 구현에 문제가 있을 수 있습니다.

---