구글 애드센스 맞춤검색 엔진 티스토리 적용하기

  안녕하세요. 춘삼이의 블로그입니다.

  며칠전 제 블로그도 드디어 애드센스 승인을 받아서 광고를 게재할 수 있게 되었습니다. 데스크탑 페이지에서는 상단 우측에 1개, 하단에 2개를 게재하고 있는데요. 아직은 블로그 운영 초보자에 방문자도 별로 없지만 그래도 하나하나 진행해 나가고 있다는 사실이 기쁘네요.

  지금 달고 있는 광고에 더해서 google 맞춤검색 엔진을 추가하려고 하는데요. 아직 사이트내 검색 기능은 필요 없을 것 같고 전체 웹 검색 기능을 추가하는 과정을 같이 공유하려고 해요. 사이트 내 검색 기능은 블로그 글이 300개 이상이 될 때 쯤 추가할까 생각중이예요.

검색용 애드센스 신청 및 새 맞춤검색 엔진 생성

  일단 구글 애드센스에 로그인 해 주시구요.

 

  1. 로그인 후에 위처럼 구글 애드센스 페이지에서 내 광고 – 좌측 사이드 바에서 기타 제품을 선택하면 메인 화면에 기타 제품들이 표시됩니다. 그 중에서 검색용 애드센스 시작하기를 선택해 주세요.

  2. 검색용 애드센스가 추가 되고 나면 위와 같이 좌측 사이드 바에 검색이라는 항목이 새로 생성되는데요. 맞춤검색 엔진을 선택 후 우측 메인 화면에서 새 맞춤검색 엔진을 선택해 주세요.

  3. 위의 화면은 새로운 맞춤검색 엔진을 생성하는 화면의 모습인데요.

       (1) 이름 : 자신이 생각하는 검색엔진의 이름을 입력

       (2) 검색 범위 : 저의 경우는 전체 웹이구요. 사이트내 검색인 경우 선택한 사이트만을 선택하시면 되요.

       (3) 키워드 : 키워드의 경우 필수사항은 아닙니다. 전 IT 위주로 다루기 때문에 IT라는 키워드만 넣었습니다.

       (4) 국가는 대한민국, 사이트 언어는 한국어, 인코딩은 유니코드(UTF-8)을 선택해 주세요.

       (5) 결과 표시 : 검색 결과를 어떻게 나타낼지를 선택할 수 있습니다.(전 일단 같은창으로)

       (6) 검색 결과가 표시되는 창에서 로고와 목적 URL 그리고 로고가 표시되는 위치를 지정할 수 있습니다.(저는 아직 로고가 없어서 별 의미는 없는 항목이네요.)

       (7) 내용을 다 입력하신 후에 저장 및 코드 생성을 실행하시면 완성된 검색창 코드가 팝업으로 표시됩니다.

맞춤검색 엔진 티스토리 사이드바에 적용

  블로그 돌아다니다 보면 다양한 위치에 적용들 하고 계시던데, 저는 일단 사이드바에 적용해 볼게요.

  티스토리 관리자 페이지에서 꾸미기 - html/css 편집을 선택하시구요. html 코드 창에 보시면  <s_sidebar_element>~~~~</s_sidebar_element> 이런 형태의 코드가 많이 있는데 이게 사이드바에 지정된 모듈들의 코드입니다. 아까 맞춤검색 엔진 코드가 생성된 코드를 복사해서 html편집 창에 붙여넣고 위아래로 s_sidebar_element 시작과 끝 태그를 넣어주면 됩니다.

  최종적인 코드는 아래와 같은 형태입니다.

 

<s_sidebar_element> <form action="http://www.google.co.kr" id="cse-search-box">   <div>     <input type="hidden" name="cx" value="파트너 ID" />     <input type="hidden" name="ie" value="UTF-8" />     <input type="text" name="q" size="17" />     <input type="submit" name="sa" value="&#xac80;&#xc0c9;" />   </div> </form> <script type="text/javascript" src="http://www.google.co.kr/coop/cse/brand?form=cse-search-box&amp;lang=ko"></script> </s_sidebar_element>

  말로는 좀 복잡한 것 같아도 실제 해보시면 별로 어렵지 않아요. 최종 완료 화면은 아래 그림과 같습니다.

---

  - 사이드바 크기에 맞추기 위해 맞춤검색엔진 생성 항목 중 검색창 스타일 - 텍스트상자 길이는 [17]로 조정했습니다. 애드센스 상에서 생성 따로 하실 필요는 없고 그냥 텍스트로 바꿔가면서 사이즈 조정하면 되요. 애드센스 초기값은 [55]예요.