이 블로그에는 현재 최근 공개된 Book Club이라는 티스토리 스킨이 적용되어 있습니다. 이번에 스킨을 변경하면서 수정을 최소화하기 위해 노력했습니다. 몇 가지 수정 사항 중에 하나로 티스토리 검색 아이콘을 제거하고 대신 구글 맞춤 검색 기능을 추가했습니다.
Book Club 스킨을 적용하면 오른쪽 상단에 검색 아이콘이 표시되고, 아이콘을 클릭하면 그림과 같이 검색 내용을 입력할 수 있는 상자가 나타납니다.
티스토리 검색 기능보다는 구글 검색 기능을 추가하면 사용자가 검색하는 검색어에 대하여 보다 관련성 있는 검색 결과를 제공할 수 있습니다.
간단한 수정으로 쉽게 구글 맞춤 검색 기능을 추가할 수 있습니다. 구글 맞춤 검색으로 대체한 후의 스크린샷입니다.
검색할 내용을 입력한 후에 검색 아이콘을 누르면 팝업으로 검색 결과가 표시됩니다.
구글 맞춤 검색 기능을 사용하면 여러 사이트의 검색 결과를 표시하도록 여러 개의 사이트를 추가할 수 있습니다.
[참고*구글 맞춤검색이 프로그래밍 검색 엔진으로 명칭이 변경되었습니다. 구글 애드센스 승인을 받은 경우 구글 애드센스 사이트에서 검색엔진 광고를 생성하여 수익을 창출할 수 있습니다. 적용 방식은 아래와 거의 동일합니다. 자세한 방법은 구글 검색용 애드센스(AFS) 광고 설치 방법을 참고해보세요.*]
맞춤 검색엔진 추가
구글맞춤검색(CSE) 기능을 추가하려면 먼저 구글맞춤검색 사이트(https://cse.google.co.kr/)에 접속하여 맞춤 검색엔진을 추가해야 합니다.
CSE 사이트에 접속한 후에 Edit search engines 아래의 Add 버튼을 클릭합니다. (저는 왜 UI가 영어로 표시되는지 모르겠네요. 한글로 표시되는 경우 "추가" 버튼을 클릭하면 될 것 같습니다.)
위의 그림과 같은 화면이 표시되면 적절히 기입하고 Create(만들기) 버튼을 클릭합니다. 검색할 사이트 필드에는 예시를 참고하여 사이트를 추가하면 됩니다.
- 개별 페이지: www.example.co.kr/page.html
- 전체 사이트: www.example.com/*
티스토리의 경우 다음과 같이 추가하면 됩니다.
- avada.tistory.com/*
만들기 버튼을 클릭하면 다음과 같은 화면이 표시됩니다.
그림에서 Receive code(코드 받기)를 클릭합니다.
제시된 코드를 복사합니다. CSE의 첫 화면으로 이동하면 새로 추가한 맞춤 검색엔진이 등록되어 있는 것을 확인할 수 있습니다.
여기에서 검색엔진 이름을 클릭하여 새로운 사이트를 추가하거나 레이아웃을 변경하는 등의 작업을 할 수도 있습니다.
북클럽(Book Club) 스킨에 맞춤 검색엔진 코드 추가하기
구글 CSE 코드를 받았다면 이제 내 티스토리 스킨에 적용할 차례입니다.
티스토리에 로그인한 후에 왼쪽 메뉴에서 꾸미기 > 스킨 편집을 클릭합니다. html 편집을 클릭하면 스킨 편집 화면이 표시됩니다. HTML 탭에서 다음 코드를 찾습니다.
<div class="search">
<s_search>
<input type="text" name="" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13) { }">
<button type="submit" onclick="">검색</button>
</s_search>
</div>위의 코드를 위에서 받은 CSE 코드로 대체합니다.
<script async src="https://cse.google.com/cse.js?cx=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxxxx"></script>
<div class="gcse-search">CSS 탭을 클릭하고 다음 CSS 코드를 추가합니다.
/* 구글 맞춤 검색 */
#___gcse_0 {
width: 250px;
margin-top: -15px;
}
.gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus {
height: 33px;
}저장하고 테스트해보면 구글 맞춤 검색 기능이 잘 작동할 것입니다. 레이아웃은 CSS를 통해 조정할 수 있습니다.
다른 티스토리 스킨에도 비슷하게 적용이 가능합니다.