자바스크립트 구글 검색어 하일라이트 / Javascript Google Keyword Highlighter

이번에 소개할 자바스크립트(Javascript)는 구글(www.google.com) 검색 후 블로그 링크를 클릭하여 블로그로 접속하면 해당 블로그의 포스트 내용 중, 구글 검색어(google keyworkd)에 해당되는 단어에 하일라이트(Highlighter)를 표시하는 스크립트 입니다.

쉽게 말해서 "구글 검색어 하일라이트" 자바스크립트가 적용된 블로그에서는 구글 검색을 통해서 유입되는 방문자에게 구글 검색어에 해당되는 단어를 하일라이트 형식으로 표시를 하게됩니다. 사용자 입장에서는 자신이 검색한 단어를 한눈에 알아 볼 수 있어 도움이 되리라 생각됩니다.

그리고 구글 검색어가 여러 단어일 경우 검색어 별로 하일라이트되는 색이 다르게 표시됩니다. 즉, 검색어마다 구분을 지어 표시하게됩니다. 참고로 구글의 경우 검색어와 검색어의 구분은 공백으로 구분이 됩니다.
 

우선 all4cs.tistory.com 블로그의 포스팅을 예를 들어 설명하겠습니다.
 

[실제 적용예]
1.구글(www.google.com)에 접속한 후 검색어 입력란에 "C# 프로그램 종료 Process Get name"를 입력한 후 검색하였을 경우 아래와 같이 검색 결과 화면이 나오게 됩니다. 

[ 구글검색 클릭 ]좌측 링크 클릭시 아래 결과 화면으로 이동합니다.

2. 첫번째 검색결과(필자의 포스트)를 클릭하여 접속하면 아래 그림과 같이 검색시 입력한 검색어에 색깔별로 블럭을 보여주게 됩니다.

[ 구글 검색어 결과 보기 ] 클릭하시면 바로 확인 가능합니다. 

원본 소스의 경우 한글이 지원되지 않아 한글지원이 가능토록 수정해서 소개합니다. 아래 설명을 따라 천천히 해보시면 어렵지 않게 여러분의 블로그에 적용할 수 있으리라 생각됩니다.

Tistory 기준으로 설명하지만 이번 "구글 검색어 하일라이트" 스크립트는 수정없이 바로 적용만 하면 되오니 다른 사이트의 블로거들께서는 자신의 블로그에 맞게 추가하시면 될 듯합니다.

[블로그에 적용법] 

1) 아래에 첨부된 "google.js"를 다운 받습니다.

google.js

2) 관리자 메뉴에서 [HTML/CSS 편집] 메뉴로 진입합니다.

3) [파일업로드]로 이동하셔서 다운받은 "google.js" 파일을 업로드 합니다.
   ( 링크 주소는 "./images/google.js"가 됩니다.)

4) 업로드가 완료되면 [HTML/CSS]로 이동합니다.

5) "skin.htm" 입력란에서 </title> 다음에 아래 내용을 추가합니다.
     ("Ctrl + F" 하신후 찾기를 하시면 편합니다.)

   <script src="./images/google.js"></script>

6) 저장을 하고 확인합니다. 

google.js

다시 언급하지만 스크립트 수정없이 바로 적용만 하면 되오니 다른 사이트의 블로거들께서는 자신의 블로그에 맞게 추가하시면 될 듯합니다. 유용하게 사용하세요.

자바스크립트 구글 검색어 하일라이트 / Javascript Google Keyword Highlighter

http://all4cs.tistory.com - 두그미의 사는 이야기