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

워드프레스 정보를 제공하는 블로그 Avada 2018. 6. 3. 17:48 • 댓글:

구글 맞춤검색

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

구글 맞춤검색 설정은 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 스킨에서 구글 맞춤검색 기능을 적용하는 구체적인 방법은 다음 글을 참고해보세요.