http://exploit15.egloos.com/3962283


블로그에 구글 맞춤검색(Google Custom Search Engine, CSE) 적용 후기 Blog

이글루스에서 제공하는 검색기능이 워낙 병맛이라 그동안 블로그에서 아예 제외해버렸다. 특정 단어를 검색하면 그 단어가 포함된 글은 모두 나와야 하는게 아닌가? 어떤 글은 나오고 어떤 글은 안나오고. 무슨 기준인지도 모르겠고 암튼 마음에 들지 않았다.

하지만 웹에서 검색이란 필수불가결한 기능이다. 이 블로그를 방문하는 많지 않은 사용자도 그렇고 당장 나 자신도 가끔 필요할때가 있다. 그렇다고 병맛나는 이글루스의 검색을 사용하고 싶지는 않아서 구글 맞춤검색을 도입해봤다.

구글 맞춤검색이라 함은 이글루스의 검색 위젯과 비슷한 형태로 구글에서 개별 사이트에 제공해 주는 검색기능이다. 검색대상을 사이트별, 페이지별로 세세하게 지정해 줄수 있다. 개인 블로그에 적용한다면 해당 블로그내에서만 검색해주는 말그대로 맞춤검색인 것이다. 유료버전도 있지만 무료버전도 개인이 사용하기에는 충분히 훌륭하다.

구글 맞춤검색은 아래 사이트에서 등록하면 된다.
구글 맞춤검색

구글계정이 없으면 구글 가입부터 해야한다.

입력하라는거 대충 입력해주고 디자인을 적당히 선택해주면 된다.
검색대상 사이트는 아래와 같이 입력하면 해당 블로그의 모든 데이터가 검색대상에 포함된다.

exploit15.egloos.com/*

비단 자신의 블로그뿐만 아니라 검색에 포함시키고 싶은 사이트가 있으면 계속 추가해주면 된다.
특정 사이트가 아니라 전체 웹을 대상으로 할수도 있지만 그런 기능을 굳이 블로그에 넣을 필요는 없을 것이다.

사이트 등록후에 관리화면에서 제외 주소도 입력할 수 있다. 태그나 댓글같은건 굳이 검색대상에 포함시키고 싶지 않아서 아래와 같이 제외 사이트를 설정했다.

exploit15.egloos.com/tag/*
exploit15.egloos.com/m/*

사이트 등록을 완료하면 블로그에 삽입할 코드를 보여준다.
아래 글을 참고해서 위젯으로 만들어 블로그에 추가하면 된다.
이글루스 팁 - 구글 통계를 이용해보자

처음에는 사이드바에 검색기능을 달고 검색결과는 메인 페이지에 보여주고 싶었다. 의도와는 달리 사이드바에 검색결과가 나왔다. 인터넷을 검색해봤지만 대부분 새창으로 검색결과가 보이는 형태였다. 나는 새창 말고 내 블로그안에 보이고 싶었다. 그래서 구글 맞춤검색 도움말과 웹서핑을 통해서 방법을 찾아봤다. 무려 두시간정도를 헤매고 이리저리 시도해봤지만 결국엔 성공하지 못했다;; 오기도 발동했지만 귀차니즘이 더 커서 그냥 메인페이지 상단에 넣기로 했다.

이전에도 경험했지만 와이드 위젯 두개가 동시에 적용이 안된다. 왜 그런지는 모르겠다. 기존에 이미 구글 통계 추적 코드를 와이드 위젯으로 쓰고 있던터라 그 위젯에 끼워 넣었다. 일단 작동은 에러없이 잘된다. 폰트가 이쁘진 않지만 폰트를 변경하니 CSS코드가 대거 붙어 버려서 걍 기본으로 쓸련다.

좀 더 이쁘게 꾸미고 싶다면 관리화면에서 폰트나 색깔 등을 변경하면 거기에 맞는 코드를 생성해준다. 그외에도 많은 설정항목이 있지만 귀찮아서 패스했다.

*팁 : 검색버튼 옆에 있는 x를 클릭하면 검색결과가 없어진다.

전반적으로 만족스럽다.
검색 대상 사이트를 마음대로 설정할 수 있다는 점과 구글 검색의 다양한 조건식을 사용할 수 있다는 점에서 충분히 가치가 있다고 본다.

*ps
사이트바에 검색창이 나오고 메인화면에 검색결과가 나오게 할려면 자신의 CSE설정 디자인 메뉴에서 레이아웃을 변경해 주면 된다.
페이지를 로딩할때 자바스크립트가 동적으로 검색창 및 검색결과화면을 만들기때문에 약간의 로딩시간과 css편집하기가 어려웠다. 그래서 그냥 단순링크방식으로 변경했다.

반응형

http://asurabalblata.tistory.com/28


관리자 모드로 들어가셔서 html/css편집에 들어가주세요




반응형

http://www.cmsfactory.net/node/400


티스토리 블로그의 오른쪽 위를 보면 티스토리 관련 메뉴들을 모아 놓은 메뉴바(툴바)가 있습니다. 이 메뉴바의 모양은 관리자 모드의 [화면설정 > 화면출력]에서 수정할 수 있는데, 아예 안보이게 하는 기능은 없습니다.

이 메뉴바가 블로그 운영에 필요하다면 그대로 사용하면 되지만, 그 자리에 다른 내용을 넣거나 배너 등을 달고 싶으면 메뉴바가 없는게 나을 때가 있습니다. 만약 이 메뉴바가 필요 없다면 어떻게 하면 될까요?

메뉴바를 아예 불러오지 못하게 할 수는 없지만, 화면에서 안보이게 할 수는 있습니다. style.css 파일에 아래의 코드를 넣으면 됩니다.

#tistorytoolbarid {display: none;}

그러면 아래처럼 툴바(메뉴바)가 사라집니다.

반응형

http://www.favicon.cc/

반응형

http://blog.shar.kr/22 



들어가며

티스토리 블로그에 구글 맞춤검색을 적용하는 방법에 대한 포스팅입니다.
들어가기에 앞서 미리 블로그의 포스트들에 대한 정보가 구글에 등록되어 있어야 검색이 이루어지므로, 사이트맵의 정보가 담긴 XML을 제작하시거나, 간편히 구글에 RSS 피드를 등록해 주시기 바랍니다.

블로그 RSS 피드 등록 - http://blogsearch.google.co.kr/ping

이 포스트를 작성하면서 보니, iframe 을 이용한 호스팅 방식이 사라지고, '2페이지', 혹은 '검색 결과만'으로 변경된 모양입니다.
덕분에 어거지로 기존에 생성되었던 코드를 이용하여 적용시키는 식으로 포스트를 작성하게 되어 전체적인 내용이 다소 지저분해진 점 미리 양해 부탁드립니다.


구글 맞춤 검색엔진 생성

구글 맞춤 검색엔진은 다음 링크에서 만들 수 있습니다.
구글 맞춤검색 - http://www.google.co.kr/cse/

맞춤검색 엔진 만들기를 클릭하세요.

이름, 설명, 검색할 사이트를 알맞게 채우시고, 버전은 표준형을 선택한 뒤 다음 단계로 넘어갑니다.

디자인을 설정하는 단계입니다.
검색창은 어차피 스킨의 검색창 디자인을 사용할 것이기 때문에 검색 결과의 디자인만 보고 다음으로 넘어가도록 합니다.

드 생성이 완료되었다고 나오는데 무시하고 '디자인'을 클릭합니다.

제가 예전에 만들었을 때에는 iframe 설정 옵션이 있었는데, 이번에 포스팅을 하면서 보니 iframe 옵션이 사라졌다고 합니다. 하지만 기존에 생성되었던 코드를 이용하면 되므로 별 상관은 없습니다.
여기서는 일단 '2페이지'나 '검색결과만'을 선택하고 저장하도록 합니다.

아직 블로그에 삽입 할 맞춤 검색엔진 코드가 완성이 된 것이 아니므로, 구글 맞춤검색 페이지를 닫지 말아주시기 바랍니다.

 


티스토리 스킨 수정

맞춤 검색엔진의 코드는 티스토리의 스킨을 수정하면서 완성시키도록 하겠습니다.

검색 결과를 출력할 부분

찾기를 이용하여 부분을 찾도록 합니다.


찾았다면 HTML 구조에 유의하여 </div> 위에다가 다음 코드를 붙여 넣습니다.

<!-- Google CSE 검색결과 부분 시작 -->
<div id="cse-search-results"></div>
<script type="text/javascript">
    var googleSearchIframeName = "cse-search-results";
    var googleSearchFormName = "cse-search-box";
    var googleSearchFrameWidth = 가로너비; // 반드시 자신의 블로그 너비에 맞게 수정해 주세요!!
    var googleSearchDomain = "www.google.co.kr";
    var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
<!-- Google CSE 검색결과 부분 끝 -->
위 코드를 붙여넣은 다음, 반드시 googleSearchFrameWidth 의 값을 자신의 블로그 너비에 맞도록 수정해 주시기 바랍니다.

붙여넣은 코드 예시

여기서 주의하실 것은, 기존에 존재하는 검색 결과 출력 부분의 코드를 지워버리면 태그가 정상 작동하지 않는다는 문제점이 존재합니다.

만약, 구글 검색시마다 나오는 ""에 해당하는 글 0건이라는 글귀가 보기 싫다면, 이 부분을 다음과 같이 변경해 주시기 바랍니다.
[변경 전]
<div class="searchList"> <!-- 본문 검색 결과 리스트 -->
    <h3>&quot;&quot;에 해당되는 글 건</h3>
    <ol>
        <s_list_rep>

[변경 후]
<div class="searchList"> <!-- 본문 검색 결과 리스트 -->
    <script language="javascript">
        var str = "";
        if (str != "") { document.write("                    <h3>&quot;&quot;에 해당되는 글 건</h3>"); }
    </script>
    <ol>
        <s_list_rep>
※ 이 부분은 스킨의 구조에 따라 약간씩 차이가 있을 수 있습니다.

이는 검색 단어를 나타내주는 치환자인 이 존재할 경우에만 해당 문구를 출력해 주는 스크립트로, 이 상태에서는 태그를 선택했을 경우에만 "~"에 해당하는 글 X건이라는 글귀가 보여지게 됩니다.

검색창 부분

찾기를 이용하여 <s_search>를 찾도록 합니다.


찾으셨다면 기존에 존재하는 검색창은 주석처리( <!-- 와 --> 로 감싸면 됩니다.) 해 버리시고, 다음의 코드를 붙여 넣도록 합니다.
검색 고유 ID는 구굴의 검색엔진 제어판에서 맞춤검색엔진 v2 에 해당하는 아이디를 쓴다
<!-- Google CSE 검색창 부분 시작 -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('search', '1');
    google.setOnLoadCallback(function() {
        google.search.CustomSearchControl.attachAutoCompletion(
        '검색엔진 고유 ID',
        document.getElementById('q'),
        'cse-search-box');
    });
</script>
<form action="http://자신의 주소/search" id="cse-search-box">
    <input type="hidden" name="cx" value="검색엔진 고유 ID" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input id="스킨의 검색창 id" class="스킨의 검색창 스타일 클래스" type="text" name="q" />
</form>
<!-- Google CSE 검색창 부분 끝 -->

검색엔진의 고유 ID는 구글 맞춤검색 제어판의 '기본사항'에서 확인하실 수 있습니다.
다음 이미지를 참조하셔서 '기본사항' 하의 검색엔진 고유 ID 를 복사하여 위 코드를 적절히 수정하도록 합니다.


이제 블로그에 설치가 완료되었습니다.
새로 변경된 방식으로 설치하는 것은 먼저 적용해 본 후에 추가하도록 하겠습니다.


반응형

+ Recent posts