애드센스 검색과 티스토리 검색을 동시에 하기

애드센스에 가입을 했으면 애드센스를 블로그에 삽입을 해야겠습니다.
본 게시물은 애드센스에서 제공하는 광고중 검색용 애드센스를 생성, 추가, 적용하는 방법을 다룹니다.

Step.1.애드센스에 접속한 후 로그인 합니다.
http://www.google.com/adsense

Step.2.애드센스 설정 > 광고 가져오기 로 이동합니다.

위의 화살표가 가르키고 있는 검색용 애드센스를 클릭합니다.

Step.3.코드얻기
이제부터 3단계에 걸쳐 검색용 코드를 얻기 위한 작업이 시작됩니다.

Step.3.1.검색창 옵션 선택
이번 단계에서는 검색을 시작하기 위한 검색창의 옵션을 결정합니다.

1.검색옵션
검색대상을 결정합니다.
현재 Google의 웹검색과 Google 웹검색과 3개의 지정된 사이트의 검색을 지원하고 있습니다.

2.검색창스타일
표시될 검색창의 스타일을 결정합니다. 실시간 보기가 지원되므로 이것저것 클릭해보며 마음에 드는 검색창스타일을 결정합니다.

3.추가옵션
사이트에서 사용하는 언어를 선택합니다.
>> 한국어를 선택합니다.
페이지의 인코딩을 선택합니다.
>> 티스토리의 경우 UTF-8을 선택하지 않으면 정상적으로 출력되지 않습니다.

Step.3.2.검색결과스타일
검색된 결과를 어떻게 보여줄 것인가를 결정합니다.

4.검색결과페이지 스타일
로고이미지
>> 로고의 이미지 경로를 지정합니다.
로고목적
>> 로고 이미지를 클릭했을 때 이동할 URL을 지정합니다.
팔레트
>> 실시간 보기가 지원되므로 이것저것 바꾸어가며 마음에 드는 검색결과페이지 스타일을 결정한다.
* 추가옵션 > 검색결과 페이지에서 내 사이트에서 검색결과 얻기를 선택하면 적용되지 않는다.

5.추가옵션 > 검색결과 페이지
같은창에 Google 검색결과 얻기, 새 창에 Google 검색결과 얻기
>> 모두 Google 사이트로 이동
내 사이트에서 검색결과 얻기
>> 검색창을 부착한 사이트에 머무릅니다. 티스토리의 경우 스킨의 수정이 필요합니다.

6.추가옵션 > 사이트 맞춤형 검색
사이트내의 컨텐츠와 관련된 검색결과를 제공합니다.

7.추가옵션 > 사용자정의 채널
채널을 사용하여 검색용 애드센스의 심층적인 보고서를 볼 수 있습니다.
채널에 대한 보다 자세한 내용은 아래의 URL을 참고하세요.
채널: https://www.google.com/adsense/support/bin/topic.py?topic=152

Step.3.3.검색 코드 얻기
이제 홈페이지에 삽입할 코드를 얻을 수 있다.

8.검색창 코드
>> 검색창을 표시하는 코드입니다.

9.검색결과코드
>> "Step.3.2.검색결과스타일" 의 "추가옵션 > 검색결과 페이지" 에서 "내 사이트에서 검색결과 얻기"를 선택했을 경우에 제공됩니다. 티스토리 내에서 검색결과를 표시하기 위해서는 이 코드를 이용하여 스킨을 수정해야 합니다.

Step.4.스킨수정
이제 티스토리의 스킨을 수정해보도록 합시다.

Step.4.1.검색창표시
우선 검색창을 표시하기 위해서 "Step.3.3.검색 코드 얻기"에서 제공된 검색창 코드를 스킨의 적절한 위치에 삽입합니다.

필자의 경우 위의 코드 처럼 사이드바에 추가하였습니다. 사이트바로 설정하면 나중에 드래그&드롭으로 넣고 빼기가 가능하기 때문에 편리합니다. 아 그리고 구글에서 제공되는 코드만으로는 동시에 검색이 되지 않아서 제가 만든 함수가 있는데 그 함수는 아래와 같습니다.

Step.4.2.검색결과표시
다음으로 검색결과를 Google을 통해서 보여주기 위해서"Step.3.3.검색 코드 얻기"에서 제공된 검색결과코드를 스킨의 적절한 위치에 삽입합니다.

필자의 경우 위의 코드 처럼 검색결과가 페이징번호의 아래에 표시되도록 하였습니다.

위의 코드가 적용된 제 티스토리(jedison.tistory.com)에서 검색을 하게 되면 아래와 같이 나옵니다.

위의 이미지는 struts 2를 검색어로 검색했을 때의 결과입니다.
보시다시피 티스트로리 내의 컨텐츠와 구글에서 검색된 컨텐츠가 동시에 표시됩니다.

10.검색창

11.검색결과