티스토리 검색창에 구글 검색엔진을 맛깔나게 달자!
(이걸 업데이트라고 부르다니... 대단한 개념이다)
검색기능이 마음에 안 들면 안 쓰고 구글 맞춤 검색으로 대체하면 된다.
이미 티스토리 검색을 구글 맞춤 검색으로 대체하는 방법은 많이 알려져있다.
그 중 지존은 물론 도아님의 구글 맞춤검색(CSE) 활용하기(무려 총 10부작의 레퍼런스 급 포스트임)
이 포스트의 내용을 기본으로 하여 티스토리에만 딱 적용할 수 있는 방법을 설명한다.
1. 본문 폭 확인
검색 결과를 깔끔하게 표시할 수 있도록 블로그 본문의 폭을 확인한다.
2. 구글 맞춤검색 만들기
물론, 구글 계정은 있어야 하며, 기존에 만들어진 엔진을 사용해도 무방하다.
자신의 블로그만 검색하고, 불필요한 광고는 표시되지 않도록 설정한다.
우선은 아래 두 옵션을 지정한다.
- 내가 지정한 사이트만 검색합니다 (그리고, 자신 블로그의 주소를 입력)
- 표준형 - 무료이며 검색결과 페이지에 광고가 게재됩니다
http:// 는 생략, 광고는 만든 뒤에 제어판에서 제거 가능.
3. 구글 맞춤검색 코드 확인
호스팅 옵션을 3가지 중에 선택할 수 있는데, 이 중 iframe을 사용하여 내 웹사이트에서 결과 호스팅을 선택한다.
검색결과를 표시할 사이트의 URL을 블로그주소/search로 지정하고, 위치는 상단 및 하단으로 지정한다.
http://zoc.kr/search 에 주목
이 두 칸에 보여지는 코드를 티스토리 스킨의 적절한 위치에 삽입하면 된다.
4. 티스토리 스킨 삽입 #1: 검색창 코드 삽입
보통 아래와 비슷하게 생겼다.
<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>
<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번에서 적은 본문의 폭을 적으면 좀 더 깔끔한 결과를 볼 수 있다.
검색 화면은 아래와 같다.
물론, 검색어는 제임스 본드. ^^;
Categoy: 컴퓨터야그/블로그 관련
-
-
저같은 경우에 구글 검색은 좀 불편하던데요.
글만 검색하는 것이 아니라, 태그나 "카테고리 다른 글"에 있는 목록까지 검색하는 바람에 상관없는 글이나 똑같은 글이 결과에 여러번 노출되는 현상때문에요. -
맞아요...제목만 검색이 되는 티스토리 검색--;; 이거이거 필요했었는데 딱!! 조커님이 해답을 주시네요~
저도 한번 적용해 보아야겠습니다. -
-
-
앞서 포스팅된 좋은 글을 참고했을 뿐입니다. [link=http://offree.net]도아 님[/link]께 특히 감사를... ㅎㅎ
-
-
-
티스토리 검색이 제목만 검색했었군요 --+ 말도 안되는...
전부터 구글 검색 달까 말까 고민했었는데 이거 보고 바로 달려고 합니다.
항상 감사드려요 !! -
움... 어제 2차도메인 적용하면서 기존 도메인과의 연결고리가 어긋난 건지 엉뚱한 글도 검색결과로 노출되네요. 해당 글과는 아무 상관없는 내용이 검색결과 써머리에 일부분으로 나오기도 하고. 기본 검색으로 할 경우, 그사이에 업뎃한 것인지 제목이나 태그 외에 본문내용에 있어도 결과로 잡아내내요. 다시 기본검색으로 돌아왔습니다. ^^;;;
-
저런... 검색엔진에 등록하면 내용을 읽어들어는(크롤링이라던가요?) 데 시간이 하루 이틀 걸립니다.
그 이후엔 제대로 검색할 겁니다. ^^;
-
-
-
-
아무도 안알려주는 티스토리 디자인 총망라!
왼쪽의 사진은 저의 블로그 대문 사진입니다. 깔끔하죠?? 아직 부족한 점이 많이 있는 블로그지만 이렇게 만드는데에도 많은 우여곡절을 겪었습니다. 이 우여곡절을 겪고 계시는 초보 블로거님들을 위해(저도 초보지만;;) 정보를 모아 보려고 합니다. 링크는 되도록 최초로 게시한 분의 게시물로 링크를 걸어두었고, 적용 사진을 보시면 무슨 내용인지 알기 쉽게 적용 화면 스크린샷을 함께 올릴 예정입니다. 계속 업데이트될 예정이니 즐겨찾기 해두면 좋겠죠? 다음뷰..
앍! 이걸로 바꿔달까봐요 ㅠ.ㅠ