이번 페이지에서는 티스토리 블로그에 구글을 통해서 블로그 내부를 검색할수 있는 검색창 만드는 법을 소개할까 합니다
물론, 티스토리 자체에서 멋진 검색기능을 제공합니다, 그런데 왜 , 설치하려고 하나.?
만약 ,
- 최근 티스토리라는 블로그 서비스를 알게 되었고, 직접 HTM / CSS를 수정하는것이 재미있어졌다. 그래서 광고도 달아보고, 좀더 재미있는것을 찾아보고자 한다.
- 티스토리가 검색창이 별로다, 내가 원하는 검색엔진을 통해서 내 블로그를 검색하고 싶다, 그것도 구글로
- 애드센스를 이용을 하고 있는데, 티스토리 검색창을 대체해서 검색용 애드센스를 달아보고 싶다.
만약, 이러한 조건중 일치하는것이 있거나 , 비슷한 생각을 하시고 계시다면, 이번 기회에 한번 바꾸어 보세요!
조건,
- 티스토리 이용자이고,
- 애드센스 서비스를 이용하고 있어야 한다.(... 일단은 제가 애드센스를 이용해서 바꾸었기 때문에, 애드센스 기준으로 설명합니다.
티스토리 검색과는 어떤것이 다른가?
최근, 제가 피쉬 리더기에 대한 그을 올렸습니다. "피쉬"라는 단어를 가지고 티스토리 차게 검색과, 구글을 이용한 검색을 할경우 어떻게 달라지는지 사진으로
비교해보겠습니다.
왼쪽은 티스토리 자체 검색기능을 이용해서 검색한결과이고, 오른쪽은 구글을 이용해서 검색한 결과입니다. 그럼 이제, 어떻게 달라질것인지 보았고, 실전으로 들어가 보겠습니다.
먼저, 이글은 애드센스 검색창 기준으로 설명하고 있으므로 , 애드센스에 로그인을 하시고, 검색용 애드센스로 들어가시면 되겠습니다.
검색유형에서 선택한 사이트만으로 클릭하십시오, 만약 전체웹으로 하실경우 , 나중에 검색하실때, 블로그 내부의 결과값만이 아닌,
외부 검색값도 나올수 있기때문입니다.
선택한 사이트를 클릭하셨으면, 자신의 블로그 주소를 넣어주시면 됩니다. 그리고 선택 키워드 쪽에는 자신의 블로그 주요 태그를 적어주시면 되겠습니다.
그리고 사이트 언어는 한국어, 유니코드, 한국, 을 해주시면 되겠습니다. SafeSearch는 자신의 블로그 성향에 따라 체크 여부를 고르시면 되겠습니다.
궁금증이 유발될수 있는곳이 언어쪽을 보면 EUR-KR 한국어가 있습니다. 하필 왜 유니코드인가? 다른컴퓨터에서 테스트를 해보지는 않았으나, 제가 테스트를 한바로는
EUR-KR로 하실경우 검색후 한글이 깨지시는것을 보실수 있습니다.
검색용 애드센스 창이 나오면, 자신의 블로그의 맞춰서 모양과, 텍스트 상자 길이를 정하시면 되겠습니다..
검색결과 페이지 열기
http://자신의 블로그 주소/search , 결과 영역, 600(이것은 나중에, 검색창을 적용하시고, 자신의 블로그에 맞추셔야 합니다. 만약 저의 블로그와 같은 스킨을
사용하시고 계시다면 600을 추천합니다)
광고위치 및, 광고 색상을 설정하십시오.
검색엔진 이름 지정에, 작명하고 싶은 이름을 적으시면 됩니다.(이해가 안가시는 분들을 위해, 쉽게 생각해서 워드프로세서나, 한글 같은 프로그램을 예로 들면, 저장하기 할때 이름을 지정하시는것이라고 생각하시면 쉽게 되겠습니다.)
제출 및 코드 가져오기를 클릭하시면 되겠습니다.
코드가 2개가 나오게 됩니다. 이것을 HTML /CSS 직접 수정가서 넣어주시면 되겠습니다.
먼저 첫번째 소스, 직접 수정 페이지에 가셔서 <s_search> </s_search> 를 찾으세요!
그리고 s_search를 아래오 같이 변경해주세요, 이런식으로 하는 이유는 나중에 구글 검색창을 잘못 입력하였을경우 기본 검색창을 복원하기 위해 주석차리 하는 것입니다.
이렇게 하셨으면 바로 아래 1번째 코드를 넣으시면 됩니다.
<!-- [s_search>
<div class="input_box">
<input type="text" name="" value=""
onkeypress="if (event.keyCode == 13) { }" class="input_search" />
<input value="검색" type="image" src="./images/btn_search.gif" onclick="" class="input_btn" />
</div>
</s_search]-->
<form action="http://redeyesofangel.tistory.com/search" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-3752401904178417:8t7dlh704d0" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="20" />
<input type="submit" name="sa" value="검색" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=ko"></script>
두번째 코드를 넣는 방법을 알려드리겠습니다.
<s_list> </s_list> 를 찾습니다. 그리고 그 사이에 이번에는 위에처럼 주석처리 이런거 필요없고, 2번째 코드를 넣으시면 되겠습니다.
예를 들면 이렇게 되겠습니다.
<s_list>
<div id="cse-search-results"></div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 600;
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>
<div class="article_etc search">
<div class="article_head">
<h3 class="title">''에 해당되는 글 건</h3>
</div>
<ol class="article_post">
<s_list_rep>
<li>
<span class="date"></span>
<span class="title">
<a href=""></a> <span class="count"></span>
</span>
</li>
</s_list_rep>
</ol>
</div>
</s_list>
이렇게 하시면 검색창이 구글 검색창으로 대체되신것을 보실수 있습니다.
'Information' 카테고리의 다른 글
| 현재 파이어폭스 사용중인 확장. (0) | 2009.04.18 |
|---|---|
| 부울 대수 (0) | 2009.03.15 |
| 블로그에 한번에 사람 많이 오게 하는 방법은? (0) | 2009.01.19 |
| USB 흔적지우기 (29) | 2008.10.03 |
| 큐로보(Qrobo).com (2) | 2008.08.10 |
| 천안 군장점[휘장,마크] 위치 (2) | 2008.05.17 |