티스토리 블로그에 구글 맞춤검색 기능 추가

2018. 6. 3. 17:48 | 댓글 5

구글 맞춤검색

티스토리의 기본 검색 기능이 부실하여 티스토리 검색 기능은 두고 구글 맞춤검색 상자를 추가로 배치하여 사용해왔습니다. 그러다가 이번에 티스토리 스킨을 변경하면서 티스토리 검색 상자를 제거하고 대신 구글 맞춤검색 상자를 추가했습니다.

구글 맞춤검색 설정은 https://www.google.com/cse/ 사이트에 로그인하여 새 검색엔진을 추가하고 적절히 설정한 후에 코드를 복사하여 티스토리의 검색 상자 부분의 코드를 대체하면 됩니다. (티스토리 블로그에 구글 맞춤검색 엔진을 추가하는 자세한 방법은 "티스토리 블로그에 구글 맞춤검색 추가"를 참고해보세요.)

구글 맞춤검색

코드는 다음과 같은 형식입니다.

<script>
  (function() {
    var cx = 'xxxxxxxxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

CSS를 사용하여 레이아웃 스타일을 적절히 변경해주면 완료됩니다.

구글 맞춤검색

블로그에서 검색 기능을 사용하는 방문자는 드물 것 같습니다. 구글 맞춤검색 기능을 추가한 이유는 제가 개인적으로 이용하기 위한 목적이 있습니다. 글 개수가 많아지다 보니 티스토리의 검색 기능을 사용하여 원하는 글을 찾는 데는 한계가 있어서 구글 맞춤검색 기능으로 대체했습니다.


2019년 5월 업데이트:

티스토리 스킨을 Magazine으로 변경하고 티스토리의 기본 검색 기능을 구글 맞춤검색으로 바꾸었습니다. Magzine 스킨에서 구글 맞춤검색 기능을 적용하는 구체적인 방법은 다음 글을 참고해보세요.

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    veneto

    예전에 별도로 검색창을 달았는데 별로라서 뺏지만
    이렇게 블로그 자체검색창처럼 보여서 좋을것 같아요 ㅎㅎ

  2. thumbnail
    열매맺는나무

    제 블로그로 들어가면 우측 상단에 자체 검색창이 있습니다. 처음 얼마동안은 잘 되더니, 언제부턴가 무용지물이에요.
    그래서 그 자리, 지금 그 돋보기 모양은 그대로 두고, 돋보기 아이콘을 누르면 자체 검색창 대신 구글 검색창이 뜨도록 하고 싶습니다.
    그런데 할 줄을 몰라서 지금처럼 사이드 바 맨 위에 올려놓았어요.
    어떤 좋은 방법 있을까요?