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

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

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

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

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


1. 본문 폭 확인

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


2. 구글 맞춤검색 만들기

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

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

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

사용자 삽입 이미지

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



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

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

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

사용자 삽입 이미지

http://zockr.tistory.com/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://zockr.tistory.com/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번에서 적은 본문의 폭을 적으면 좀 더 깔끔한 결과를 볼 수 있다.

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

사용자 삽입 이미지

Trackback 1 Comment 25
  1. Favicon of http://minimonk.tistory.com BlogIcon 구차니 2009.10.22 09:53 address edit & delete reply

    앍! 이걸로 바꿔달까봐요 ㅠ.ㅠ

  2. Favicon of http://dis1.tistory.com BlogIcon 개뿔 2009.10.22 11:43 address edit & delete reply

    저같은 경우에 구글 검색은 좀 불편하던데요.
    글만 검색하는 것이 아니라, 태그나 "카테고리 다른 글"에 있는 목록까지 검색하는 바람에 상관없는 글이나 똑같은 글이 결과에 여러번 노출되는 현상때문에요.

    • Q P 2009.10.22 17:56 address edit & delete

      그래도 제목만 검색되는 것보단 낫겠죠.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.10.22 23:38 address edit & delete

      설치하셨군요. ㅎㅎ

      참고로, 혹시 광고가 보이는 것이 불편하다면, 제어판에서 광고를 안 나오도록 수정할 수 있습니다.

  3. Favicon of http://loveash.cc BlogIcon 애쉬™ 2009.10.22 14:59 address edit & delete reply

    맞아요...제목만 검색이 되는 티스토리 검색--;; 이거이거 필요했었는데 딱!! 조커님이 해답을 주시네요~
    저도 한번 적용해 보아야겠습니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.10.22 19:15 address edit & delete

      고고씽이죠!

  4. Favicon of http://blog.portablea.com BlogIcon demun 2009.10.25 11:24 address edit & delete reply

    와우 이것도 좋은데요.이것도 함 적용해봐야겠습니다.
    좋은 정보 감사합니다.

  5. Favicon of http://johnsmith.tistory.com BlogIcon 존스미스 2009.10.25 13:08 address edit & delete reply

    대단하십니다 :D

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.10.25 15:34 address edit & delete

      앞서 포스팅된 좋은 글을 참고했을 뿐입니다. [link=http://offree.net]도아 님[/link]께 특히 감사를... ㅎㅎ

  6. ㅁㅁㅁ 2009.11.04 19:11 address edit & delete reply

    앗.. 전 왜 안되죠.. 제 블로그 글 검색이 안되고 빈페이지가 나오네요..

  7. Favicon of http://koc2000.tistory.com/ BlogIcon koc/SALM 2009.11.10 05:15 address edit & delete reply

    조커 님께서 알려주신 방법대로 설치하였습니다. 고맙습니다. :D [emo=091]

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.11.10 09:09 address edit & delete

      잘 쓰세요!!!

  8. Favicon of http://mbcvoice.tistory.com/ BlogIcon funnyvoice 2009.12.18 01:02 address edit & delete reply

    정말유용한 팁이군요...감사합니다

  9. Favicon of http://youthink.me BlogIcon 고영혁 2009.12.20 13:44 address edit & delete reply

    티스토리 검색이 제목만 검색했었군요 --+ 말도 안되는...
    전부터 구글 검색 달까 말까 고민했었는데 이거 보고 바로 달려고 합니다.
    항상 감사드려요 !!

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2009.12.20 13:57 address edit & delete

      그저 구글이 진리인 겁니다. ^^;

  10. Favicon of http://youthink.me BlogIcon 고영혁 2009.12.20 15:14 address edit & delete reply

    움... 어제 2차도메인 적용하면서 기존 도메인과의 연결고리가 어긋난 건지 엉뚱한 글도 검색결과로 노출되네요. 해당 글과는 아무 상관없는 내용이 검색결과 써머리에 일부분으로 나오기도 하고. 기본 검색으로 할 경우, 그사이에 업뎃한 것인지 제목이나 태그 외에 본문내용에 있어도 결과로 잡아내내요. 다시 기본검색으로 돌아왔습니다. ^^;;;

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2009.12.22 21:15 address edit & delete

      저런... 검색엔진에 등록하면 내용을 읽어들어는(크롤링이라던가요?) 데 시간이 하루 이틀 걸립니다.
      그 이후엔 제대로 검색할 겁니다. ^^;

  11. Favicon of http://stringsitsc.tistory.com BlogIcon 스트링 2009.12.22 19:05 address edit & delete reply

    이제까지 구글 맞춤검색에서 기본적으로 제공하는 위젯만 썼었는데 이게 더 예쁘네요.
    감사합니다~ 블로그 구독할께요^^

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2009.12.22 21:16 address edit & delete

      잘 쓰세요~

  12. Favicon of http://popeye.textcube.com BlogIcon popeye 2009.12.25 04:24 address edit & delete reply

    참 좋은 팁이네요.
    시간 나실 때, 검색창의 크기와 버튼을 바꾸는 방법도 부탁드립니다. ^^

  13. 와우! 2010.01.07 14:35 address edit & delete reply

    감사합니다!
    이글 정말 도움되네요!!
    제 블로그로 가져갑니다^^

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2010.01.07 19:17 address edit & delete

      퍼가지 마시고 링크하기 바랍니다.
      그리고, 이런 글을 쓸 때는 블로그 주소를 밝히는 게 예의인 것 같군요.

  14. Favicon of http://webplantip.com BlogIcon 어라 2010.01.08 11:27 address edit & delete reply

    위의 방법대로 했는데 검색이 되지 않고 페이지만 리로드 됩니다. ;; 이럴 땐 어떻해야 하나욤??