티스토리 검색창에 구글 검색엔진을 맛깔나게 달자!

티스토리의 검색창을 업데이트 했단다. 속도를 향상시키기 위해 제목과 내용을 검색하지 않고, 제목만 검색하도록.
(이걸 업데이트라고 부르다니... 대단한 개념이다)

검색기능이 마음에 안 들면 안 쓰고 구글 맞춤 검색으로 대체하면 된다.

이미 티스토리 검색을 구글 맞춤 검색으로 대체하는 방법은 많이 알려져있다.
그 중 지존은 물론 도아님의 구글 맞춤검색(CSE) 활용하기(무려 총 10부작의 레퍼런스 급 포스트임)

이 포스트의 내용을 기본으로 하여 티스토리에만 딱 적용할 수 있는 방법을 설명한다.


1. 본문 폭 확인

검색 결과는 블로그 본문 자리에 표시된다.
검색 결과를 깔끔하게 표시할 수 있도록 블로그 본문의 폭을 확인한다.

2. 구글 맞춤검색 만들기

Google 맞춤검색 엔진에서 맞춤검색을 하나 만든다.
물론, 구글 계정은 있어야 하며, 기존에 만들어진 엔진을 사용해도 무방하다.

자신의 블로그만 검색하고, 불필요한 광고는 표시되지 않도록 설정한다.
우선은 아래 두 옵션을 지정한다.

- 내가 지정한 사이트만 검색합니다 (그리고, 자신 블로그의 주소를 입력)
- 표준형 - 무료이며 검색결과 페이지에 광고가 게재됩니다

http:// 는 생략, 광고는 만든 뒤에 제어판에서 제거 가능.

3. 구글 맞춤검색 코드 확인

사용하려는 검색엔진의 제어판으로 가서 코드 가져오기 메뉴를 선택한다.
호스팅 옵션을 3가지 중에 선택할 수 있는데, 이 중 iframe을 사용하여 내 웹사이트에서 결과 호스팅을 선택한다.

검색결과를 표시할 사이트의 URL을 블로그주소/search로 지정하고, 위치는 상단 및 하단으로 지정한다.

http://zoc.kr/search 에 주목

이 두 칸에 보여지는 코드를 티스토리 스킨의 적절한 위치에 삽입하면 된다.

4. 티스토리 스킨 삽입 #1: 검색창 코드 삽입

스킨에서 <s_search> ~ </s_search>를 찾는다.
보통 아래와 비슷하게 생겼다.

<s_search>
  <input type="text" id="s" name="[#\#_search_name_##]" value="[#\#_search_text_##]" onkeypress="if (event.keyCode == 13) { [#\#_search_onclick_submit_##] }" class="textfield"/>
  <input value="검색" id="searchsubmit" type="button" onclick="[#\#_search_onclick_submit_##]" class="switcher"/>
</s_search>

이 부분을 삭제하거나 주석처리하고 3번의 검색창 코드를 삽입한다.
위에서 보여준 코드를 삽입하면 아래와 비슷한 모양이 된다.

<!-- s_search><input type="text"> (중간생략) </s_search -->
<form action="http://zoc.kr/search" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="004973987472116625829:zhzclh3abgs" />
    <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="검색" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=ko"></script>

5. 티스토리 스킨 삽입 #2: 검색결과 코드 삽입

스킨에서 <s_list>를 찾는다.
보통 아래와 비슷하게 생겼다.

<s_list>
	<div id="searchlog">
		<div class="boxcaption"><h3 class="title">Search results for '[#\#_list_conform_##]'</h3></div>
(이하생략)

이 부분은 삭제하지 않고, <s_list> 아래에 3번의 검색결과 코드를 삽입한다.
위에서 보여준 코드를 삽입하면 아래와 비슷한 모양이 된다.

이 부분을 삭제해버리면 태그로 검색할 때 정상적으로 출력되지 않기 때문에 삭제하면 안된다.

<s_list>
<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 705;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
(이하는 원래 코드와 동일)
	<div id="searchlog">

이 때 표시한 6행의 705 대신에 1번에서 적은 본문의 폭을 적으면 좀 더 깔끔한 결과를 볼 수 있다.

검색 화면은 아래와 같다.
물론, 검색어는 제임스 본드. ^^;