본문 바로가기

티스토리 Book Club 스킨 수정: 구글 맞춤 검색 추가

2019.09.01 댓글 8

이 블로그에는 현재 최근 공개된 Book Club이라는 티스토리 스킨이 적용되어 있습니다. 이번에 스킨을 변경하면서 수정을 최소화하기 위해 노력했습니다. 몇 가지 수정 사항 중에 하나로 티스토리 검색 아이콘을 제거하고 대신 구글 맞춤 검색 기능을 추가했습니다.

Book Club 스킨을 적용하면 오른쪽 상단에 검색 아이콘이 표시되고, 아이콘을 클릭하면 그림과 같이 검색 내용을 입력할 수 있는 상자가 나타납니다.

티스토리 북클럽 스킨 검색 기능

티스토리 검색 기능보다는 구글 검색 기능을 추가하면 사용자가 검색하는 검색어에 대하여 보다 관련성 있는 검색 결과를 제공할 수 있습니다.

간단한 수정으로 쉽게 구글 맞춤 검색 기능을 추가할 수 있습니다. 구글 맞춤 검색으로 대체한 후의 스크린샷입니다.

구글 맞춤 검색 기능

검색할 내용을 입력한 후에 검색 아이콘을 누르면 팝업으로 검색 결과가 표시됩니다.

구글 맞춤 검색 기능 - 티스토리 블로그

구글 맞춤 검색 기능을 사용하면 여러 사이트의 검색 결과를 표시하도록 여러 개의 사이트를 추가할 수 있습니다.

맞춤 검색엔진 추가

구글맞춤검색(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의 첫 화면으로 이동하면 새로 추가한 맞춤 검색엔진이 등록되어 있는 것을 확인할 수 있습니다.

구글 맞춤 검색 기능 추가 - CSE 사이트

여기에서 검색엔진 이름을 클릭하여 새로운 사이트를 추가하거나 레이아웃을 변경하는 등의 작업을 할 수도 있습니다.

북클럽(Book Club) 스킨에 맞춤 검색엔진 코드 추가하기

구글 CSE 코드를 받았다면 이제 내 티스토리 스킨에 적용할 차례입니다.

티스토리에 로그인한 후에 왼쪽 메뉴에서 꾸미기 > 스킨 편집을 클릭합니다. html 편집을 클릭하면 스킨 편집 화면이 표시됩니다. HTML 탭에서 다음 코드를 찾습니다.

<div class="search">
     <s_search>
      <input type="text" name="[##_search_name_##]" value="[##_search_text_##]" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }">
      <button type="submit" onclick="[##_search_onclick_submit_##]">검색</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를 통해 조정할 수 있습니다.

다른 티스토리 스킨에도 비슷하게 적용이 가능합니다.

참고:

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글8