테터툴즈 검색과 구글 검색 함께 사용하기 (in 티스토리)
- 개발관련팁
- 2007. 1. 17.
※경고※ 아래 내용은 구글 애드센스 약관에 위배되는 내용을 포함하고 있습니다.
자신의 책임하에 이용하시기 바랍니다.
현재 나의 블로그 위에 보면 위 그림과 같은 검색창이 떠 있다. 검색어를 입력하고 <테터>버튼을 누르면 기존의 테터툴즈가 제공하는 검색을 사용할 수 있고, <구글>버튼을 누르면 구글 사이트 검색을 이용하여 내 웹페이지를 검색할 수 있다.
구글 사이트 검색(Google Site Search)이란 검색을 위한 구글 애드센스의 옵션으로, 내 웹 사이트의 페이지 안에서 방문자가 검색할 수 있도록 하는 기능이다. 현재 구글에서는 구글 검색창 달기 서비스를 통해 내 웹서버에 있는 내용을 구글 검색 엔진을 통해 무료로 검색할 수 있도록 하고 있다. 구글 사이트 검색이란 여기서 한걸음 더 나아가, 구글 애드센스와의 연계를 통해, 사용자가 사이트 검색을 통해 검색을 하면 수익을 얻을 수 있도록 하고 있다. (즉, 달아두면 좋다)
구글 사이트 검색을 이용하기 위해서는 우선 구글 애드센스에 가입한 뒤, <애드센스 설정>에서 <검색을 위한 애드센스>를 택한다. 마법사를 통해 자신에게 맞는 설정을 고른 뒤, 구글에서 만들어준 코드를 가져와 우선 스킨 아무 곳에나 복사한다. (티스토리 사용자들은 사이트 인코딩에서 한국어 대신 UTF-8을 골라야 한다)
스킨을 저장한 다음, 블로그를 살펴보면, 위 그림과 같이 구글 특유의 썰렁한 검색 창이 나타난다. 이 검색창을 그대로 사용할 수는 없으니 테터툴즈 스킨에 맞도록 이쁘게 바꿔보자. 우선 구글 검색창에 아무 영어단어를 입력하고, 자신의 도메인을 선택한 뒤, 검색을 해본다.
주소창을 살펴보면, 아래와 같은 주소로 되어 있다.
http://www.google.com/custom?domains=xlos.tistory.com&q=search&sitesearch=xlos.tistory.com&sa=%EA%B5%AC%EA%B8%80&client=pub-5312697752264678&forid=1&ie=UTF-8&oe=UTF-8&cof=GALT%3A%23008000%3BGL%3A1%3BDIV%3A%23336699%3BVLC%3A663399%3BAH%3Acenter%3BBGC%3AFFFFFF%3BLBGC%3A336699%3BALC%3A0000FF%3BLC%3A0000FF%3BT%3A000000%3BGFNT%3A0000FF%3BGIMP%3A0000FF%3BLH%3A50%3BLW%3A500%3BL%3Ahttp%3A%2F%2Fhome.postech.ac.kr%2F%7Exlos%2Flogo.gif%3BS%3Ahttp%3A%2F%2Fxlos.tistory.com%3BFORID%3A1&hl=ko
여기서 붉은 색으로 칠해진 코드를 복사해둔다.
그리고 다시 테터툴즈 스킨 편집을 누른 다음,
<s_search>
<input type="text" size=10 class = searchform name="" value="" onkeypress="if (event.keyCode == 13) { }"/>
<input value="테터" type="button" onclick="" class="submit"/>
</s_search>
이 구문을 찾는다. 만약 이 구문이 없다면, 자신의 스킨에 맞도록 위 구문을 적절한 곳에 복사한다. 위 구문이 스킨에 있다면, 블로그에서 테터툴즈 검색을 이용할 수 있다는 뜻이다. 이제 검색 버튼 옆에 구글 사이트 검색을 위한 버튼을 붙여보자.
<input value="구글" type="button"
onclick="try{
q = new String(document.getElementsByName('search')[0].value.replaceAll('%', '%25'));
q = new String (encodeURI(q));
window.location.href='http://www.google.com/custom?domains=xlos.tistory.com&q=' +
q +
'&sitesearch=xlos.tistory.com&sa=%EA%B5%AC%EA%B8%80&client=pub-5312697752264678&forid=1&ie=UTF-8&oe=UTF-8&cof=GALT%3A%23008000%3BGL%3A1%3BDIV%3A%23336699%3BVLC%3A663399%3BAH%3Acenter%3BBGC%3AFFFFFF%3BLBGC%3A336699%3BALC%3A0000FF%3BLC%3A0000FF%3BT%3A000000%3BGFNT%3A0000FF%3BGIMP%3A0000FF%3BLH%3A50%3BLW%3A500%3BL%3Ahttp%3A%2F%2Fhome.postech.ac.kr%2F%7Exlos%2Flogo.gif%3BS%3Ahttp%3A%2F%2Fxlos.tistory.com%3BFORID%3A1&hl=ko';
return false;}catch(e){window.alert(e);}" class="submit"/>
파란 부분은 자신의 도메인에 맞도록 수정하고, 빨간 부분은 아까 복사해뒀던 코드를 붙여넣자.
모두 마치고 난 뒤에는 아래와 같이 테터툴즈 스킨과도 잘 어울리며, 수익도 올릴 수 있는 블로그 검색창이 보일 것이다.
자신의 책임하에 이용하시기 바랍니다.
현재 나의 블로그 위에 보면 위 그림과 같은 검색창이 떠 있다. 검색어를 입력하고 <테터>버튼을 누르면 기존의 테터툴즈가 제공하는 검색을 사용할 수 있고, <구글>버튼을 누르면 구글 사이트 검색을 이용하여 내 웹페이지를 검색할 수 있다.
구글 사이트 검색(Google Site Search)이란 검색을 위한 구글 애드센스의 옵션으로, 내 웹 사이트의 페이지 안에서 방문자가 검색할 수 있도록 하는 기능이다. 현재 구글에서는 구글 검색창 달기 서비스를 통해 내 웹서버에 있는 내용을 구글 검색 엔진을 통해 무료로 검색할 수 있도록 하고 있다. 구글 사이트 검색이란 여기서 한걸음 더 나아가, 구글 애드센스와의 연계를 통해, 사용자가 사이트 검색을 통해 검색을 하면 수익을 얻을 수 있도록 하고 있다. (즉, 달아두면 좋다)
구글 사이트 검색을 이용하기 위해서는 우선 구글 애드센스에 가입한 뒤, <애드센스 설정>에서 <검색을 위한 애드센스>를 택한다. 마법사를 통해 자신에게 맞는 설정을 고른 뒤, 구글에서 만들어준 코드를 가져와 우선 스킨 아무 곳에나 복사한다. (티스토리 사용자들은 사이트 인코딩에서 한국어 대신 UTF-8을 골라야 한다)
스킨을 저장한 다음, 블로그를 살펴보면, 위 그림과 같이 구글 특유의 썰렁한 검색 창이 나타난다. 이 검색창을 그대로 사용할 수는 없으니 테터툴즈 스킨에 맞도록 이쁘게 바꿔보자. 우선 구글 검색창에 아무 영어단어를 입력하고, 자신의 도메인을 선택한 뒤, 검색을 해본다.
주소창을 살펴보면, 아래와 같은 주소로 되어 있다.
http://www.google.com/custom?domains=xlos.tistory.com&q=search&sitesearch=xlos.tistory.com&sa=%EA%B5%AC%EA%B8%80&client=pub-5312697752264678&forid=1&ie=UTF-8&oe=UTF-8&cof=GALT%3A%23008000%3BGL%3A1%3BDIV%3A%23336699%3BVLC%3A663399%3BAH%3Acenter%3BBGC%3AFFFFFF%3BLBGC%3A336699%3BALC%3A0000FF%3BLC%3A0000FF%3BT%3A000000%3BGFNT%3A0000FF%3BGIMP%3A0000FF%3BLH%3A50%3BLW%3A500%3BL%3Ahttp%3A%2F%2Fhome.postech.ac.kr%2F%7Exlos%2Flogo.gif%3BS%3Ahttp%3A%2F%2Fxlos.tistory.com%3BFORID%3A1&hl=ko
여기서 붉은 색으로 칠해진 코드를 복사해둔다.
그리고 다시 테터툴즈 스킨 편집을 누른 다음,
<s_search>
<input type="text" size=10 class = searchform name="" value="" onkeypress="if (event.keyCode == 13) { }"/>
<input value="테터" type="button" onclick="" class="submit"/>
</s_search>
이 구문을 찾는다. 만약 이 구문이 없다면, 자신의 스킨에 맞도록 위 구문을 적절한 곳에 복사한다. 위 구문이 스킨에 있다면, 블로그에서 테터툴즈 검색을 이용할 수 있다는 뜻이다. 이제 검색 버튼 옆에 구글 사이트 검색을 위한 버튼을 붙여보자.
<input value="구글" type="button"
onclick="try{
q = new String(document.getElementsByName('search')[0].value.replaceAll('%', '%25'));
q = new String (encodeURI(q));
window.location.href='http://www.google.com/custom?domains=xlos.tistory.com&q=' +
q +
'&sitesearch=xlos.tistory.com&sa=%EA%B5%AC%EA%B8%80&client=pub-5312697752264678&forid=1&ie=UTF-8&oe=UTF-8&cof=GALT%3A%23008000%3BGL%3A1%3BDIV%3A%23336699%3BVLC%3A663399%3BAH%3Acenter%3BBGC%3AFFFFFF%3BLBGC%3A336699%3BALC%3A0000FF%3BLC%3A0000FF%3BT%3A000000%3BGFNT%3A0000FF%3BGIMP%3A0000FF%3BLH%3A50%3BLW%3A500%3BL%3Ahttp%3A%2F%2Fhome.postech.ac.kr%2F%7Exlos%2Flogo.gif%3BS%3Ahttp%3A%2F%2Fxlos.tistory.com%3BFORID%3A1&hl=ko';
return false;}catch(e){window.alert(e);}" class="submit"/>
파란 부분은 자신의 도메인에 맞도록 수정하고, 빨간 부분은 아까 복사해뒀던 코드를 붙여넣자.
모두 마치고 난 뒤에는 아래와 같이 테터툴즈 스킨과도 잘 어울리며, 수익도 올릴 수 있는 블로그 검색창이 보일 것이다.