티스토리블로그에 구글 애드센스 검색엔진 설치 방법(2편)

티스토리블로그에 구글 애드센스 검색엔진 설치 방법(2편)
티스토리 블로그에 구글 검색엔진을 설치하는 방법을 말씀드립니다. 구글 애드센스 검색엔진(Google Adsense Search Engine)을 블로그에 굳이 달아야 하는 이유는 티스토리 검색엔진보다도 폭 넓은 검색효과를 얻는 점이 있을 수 있다는 점일 것입니다. 그러나, 그보다 더 큰 이유는 방문객이 구글 검색시 노출되는 구글광고를 클릭을 하게되어 실제구매행위를 유발시키게 되어 블로그 수익증가로 연결시킬 수 있기 때문입니다.  


그러나 대부분의 초보 구글 애드센스 가입자들이 봉착하는 문제이지만 저도 처음 접하는 구글 검색엔진을 블로그에 설치하고 싶어도 설치 방법이 결코 쉽지가 않습니다..


그 이유는 여러가지가 있는데, 첫째로  구글 애드센스 계정에 로그인해서 보면 콘텐츠용 애드센스, 검색용 애드센스, 피드용 애드센스, 도메인용 애드센스, 모바일 콘텐츠용 애드센스 등 여러가지 광고유형을 제시하며 어떤 걸 설치할 것인지 혼동스럽기 때문입니다.

두번째, 구글 애드센스의 광고유형을 결정하고 광고링크 단위의 코드를 생성시켜 블로그에 달기 위해서는 직접 코드를 복사해서 블로그의 스킨 편집 / CSS.html  페이지에서 소스사이이에 구글 애드센스의 코드를 삽입시켜야 하는 약간 생소한 과정이 기다리고 있기 때문입니다.

세번째, 티스토리 블로그 스킨이 똑 같지 않기 때문에 소스를 설치해야하는 위치가 조금씩 다르고, 이를 모두 자세히 알려주는 곳은 없기 때문에 결국 스스로 응용해서 설치해야 한다는 결론입니다. 이렇게 수도 없는 시행착오를 겪은 끝에 가까스로 구글 애드센스 검색엔진 설치에 성공을 하게 되었습니다.   


검색엔진은 한번만 설치하면 되는 것이고, 160가지가 넘는 여러가지 스킨에 맞게 일일이 그 설치방법을 알 필요까지는 없는 것이고 블로거가 선택한 블로그 스킨에 검색엔진을 가장 정확하게 구현 시킬 수 있는 방법이라고 생각되어 제 블로그에 설치한 구글 검색엔진 탑재기를 포스팅해 봅니다.


1. 검색용 애드센스 선택
구글 애드센스로 로그인해서 애드센스 설정 모드로 들어가서 '검색용 애드센스'를 선택합니다.

2. 디자인 선택
검색창 디자인을 선택하는 곳인데 가장 위의 것이 무난합니다. 텍스트 상자 길이는 21자 또는 31자로 선택하는데 저는 31자로 했습니다.

검색할 사이트 목록은 대형포탈 및 구글 등이 검색대상 사이트들을 적습니다. 블로그 등도 검색되게 하기 위해서 www대신 *.naver.com로 표기해 줍니다.

선택키워드는 블로그의 주제에 맞는 키워드를 선택합니다.

추가옵션 중 사이트 언어는 한국어로, 웹사이트 인코딩 언어는 유니코드(UTF-8), 구굴도메인에 대한 국가 또는 지역은 한국으로 선택합니다.

3. 검색사이트 목록지정 / 선택 키워드 지정 /추가옵션 선택

4. 검색결과 페이지 열기 
내 사이트에서 검색결과 열기를 선택합니다. 이때 박스가 생기면서 검색결과가 노출되는 블로그위치를 표시하라는 창이 생기는데 당황하지 마시고 블로그아이디.tistory.com/location이라고 적어 넣습니다. 저는 이 기능을 이해 못해서 무지 헤맸었습니다.(매우 중요). 검색결과영역 넓이는 처음엔 795PX이상을 적어 넣으라고 요구하는데 일단 800PX로 적어 넣어 줍니다.

제 블로그는 아이디가 todamga인 관계로  'todamga.tistory.com/location'  라고 입력하였습니다.  여기에서 블로그 주소뒤에 /LOCATION이라고 반드시 적어야만 나중에 구글 애드센스용 검색엔진을 설치하고 구동시킬 때에  이글의 맨 아래에에 제가 적은 블로그내 검색결과화면과  같이 내 블로그 내에서만 구글 검색결과를 노출 시키라는 명령어로 보시면 될 것 같습니다. 

"/Location"을 적어 넣지 않으면 새창 전체화면에 구글 검색결과가 노출되어 방문객이 지속적으로 내 블로그내에 체류하지 않고 다른 페이지로 바로 이탈할 수 있으므로 내 블로그내에서만 구글 검색광고가 노출되나는 명령어이며, 이 글의 맨 아래에 검색결과 구현된 이미지를 보실 수 있습니다.


이것은 구글 검색결과가 포스트 본문의 위치에서 노출되는 넓이를 795PX이상으로 된다는 뜻인데 실제로 본문 포스트 넓이가 795이상되는 스킨도 있지만 이보다 좁은 넓이의 스킨도 있으므로  이점을 미리 이해해 주셔야 합니다. 본문의 넓이는 나중에 원하시는 사이즈로 조절이 가능하니까 일단 패스합니다.

이 숫자는 나중에 변경시엔 변경가능합니다. 참고로 저는 변경시에 670PX로 입력했습니다. 제 사이드바의 넓이는 173PX이니 본문 넓이 + 사이드바 넓이는 670+173=843이 됩니다.


광고위치는 가운데의 맨위와 맨아래로 선택합니다.

5. 제출 및 코드가져오기
빨간 박스 우측의 콤보박스를 클릭하고 제출 및 코드가져오기를 클릭합니다.

6. 검색창 코드 및 검색결과 코드 생성확인
제출 및 코드 가져오기를 클릭하면  아래와 같은 검색창코드와 검색결과 코드가 생성됩니다.
이 두가지 코드를 얻기 위해서 지금까지 고생하신 것입니다.

7. 검색창 코드 및 검색결과코드 붙여넣기
여기까지는 구글 애드센스 검색엔진 광고설정과정이고 이후부터는 티스토리의 관리자 페이지에서 위의 6번에서 확인한 검색창코드와 검색결과 코드를 skin.html페이지에 붙여 넣으면 됩니다.


이제는 제1편에서 경험하신 블로그 관리자 페이지의 스킨선택으로 들어갑니다. 여기서 HTML/CSS편집페이지로 들어갑니다.


A. 검색창 코드 붙여넣기
검색창을 블로그에 만드는 작업인데 검색모듈의 <s_search>와 </s_search>사이에 아레와 같이 코드를 붙여넣기를 해 주세요. 붉은 색으로 표시된 부분은 직접 적어 넣어 주셔야 하고, 나머지 부분은 위의 검색창코드를 복사하셔서 붙여넣으시면 됩니다.

<!-- 검색 모듈 -->         <div id="searchBox">          <s_search> <!--구글 검색엔진창 코드 시작--> <!-- [s_search> <div class="input_box"> <input type="text" name=""onkeypress="if(event.keyCode==13}{}" class="input_search"/> <input value="검색" type="image" src=./images/btn_search.gif" onclick=""class="input_btn"/> </div> </s_serch]--> <form action="http://todamga.tistory.com/location" id="cse-search-box">   <div>     <input type="hidden" name="cx" value="partner-pub-21200861234567810:yfy7dsgyey9" />     <input type="hidden" name="cof" value="FORID:11" />     <input type="hidden" name="ie" value="UTF-8" />     <input type="text" name="q" size="31" />     <input type="submit" name="sa" value="7#cva70;&#xhj9c9;" />   </div> </form> <script type="text/javascript" src="http://www.google.co.kr/cse/brand?form=cse-search-box&amp;lang=ko"></script>     <!--구글 검색엔진창 코드 끝-->     </s_search>         </div>        </s_sidebar_element>

B. 검색결과코드 붙여넣기
두번째로 검색결과 코드를 붙여 넣는 것인데 </s_list>와<s_rplist>사이에 구글 검색결과코드를 붙여넣기 합니다. 혹시 다른 스킨에서는 제 스킨에서와 달리 <s_rplist> 대신 <s_list>로 되어 있는 스킨도 있으니 당황하지 마시고 <s_rplist> 바로 위에 아래 그림처럼 검색결과 코드를 붙여넣는 다는 것만 명심하시기 바랍니다. 메모장에 붙여 넣기 후 skin.html을 복사해서 붙여 넣기 하신 후 <s_list>를 찾기만 하면 우리의 작업은 거의 끝나는 것입니다.

</s_list> <!--구글광고 검색결과 코드 시작 --> <div id="cse-search-results"></div> <script type="text/javascript">   var googleSearchIframeName = "cse-search-results";   var googleSearchFormName = "cse-search-box";   var googleSearchFrameWidth = 670;   var googleSearchDomain = "www.google.co.kr";   var googleSearchPath = "/cse"; </script> <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script> <!--구글광고 검색결과 코드 시작 -->         <s_rplist>

위의 모든 과정이 끝나면 저장하시고 블로그를 확인해 보세요.
제 블로그의 경우 구글 검색엔진으로 검색시에 내페이지에서 검색하기를 선택한 관계로 우측 사이드바도 정상적으로 위치하고 우측에 구글 검색결과가 노출됩니다.



검색엔진 설치 후 내페이지내에서의 검색결과

제 블로그에서 위의 방법으로 설치된 구글 검색엔진이 잘 작동되고 있다는 검색결과가 위에 보이네요. 완벽하다고는 말씀드릴 수 없지만, 저의 구글 애드센스 탑재경험기 글을 보시고 꼭 설치에 성공하시기 바랍니다.


[관련글]

2010/11/05 구글 애드센스 1일 수익, 첫 1달러 달성 (4)

2010/11/04 구글 애드센스 핀번호(Pin Number) 도착

2010/11/01 모바일용 애드센스 설치 성공!! (6)

2010/10/30 구글 모바일용 애드센스 설치방법(1편) (2)

2010/10/26 다음 실시간 검색 에 노출된 트위터의 트윗 효과 보고 (4)

2010/10/20 [방문유입팁] 구글검색엔진에 메타태그 구글봇(Boogle-Bot) 설치효과 (2)

2010/10/19 구글 애드센스 수익 지급보류? (8)

2010/10/15 검색엔진 구글(Google) 에 쇼핑몰 등록하기

2010/10/12 [검색유입 팁] 구글 검색엔진(Google_Bot)에 메타태그 설치방법

2010/09/24 티스토리블로그에 구글 애드센스 검색엔진 설치 방법(2편) (1)

긴 구글 검색엔진 설치작업을 잘 마치셨다면
아래의 손꾸락 한번 눌러 주시면 감사하겠습니다.