폭 795px 이하에서 애드센스 맞춤 검색 결과 적용하기(CSE)

구글 애드센스의 맞춤 검색을 사용할 경우 검색 결과를 전체 페이지나 새창 혹은 본문 폭이 800px 정도를 가진다면 별무리 없이 구글 검색을 사용하지만 본문 폭이 795px 이하의 사이트에서 전체 창이나 새 창이 아닌 레이아웃에서 검색 결과를 보여주고 할 때 고급 CSE를 이용하여 사이즈 제한 없이 사용할 수가 있습니다.

맞춤 검색 설정시에 내 웹 사이트에 iFrame 사용으로 할 경우 795가 최소 폭으로 그 이하 폭으로 줄일 수가 없습니다. 그러나 더 많은 고급검색 기능 이용하기를 클릭하면 구글 맞춤 검색 고급 설정 페이지로 이동하고 코드를 발급 받아 적용하면 페이지 폭에 관련 없이 적용됩니다.

검색결과 표시 URL 설정해주면 CSE 설정시에 편합니다. 티스토리의 경우 http://블로그.tistory.com/search 입니다.

애드센스에서 설정한 일반 코드를 사용하면 블로그의 본문 폭이 728px 인데 폭을 넘어서 레이아웃이 겹쳐 버려 아주 흉합니다.

고급 CSE 페이지 입니다. 티스토리 사이드바 또는 헤더에 검색 창을 넣을 경우에는 두 페이지를 선택하고 저장 및 코드 생성을 클릭하여 코드를 설치하면 본문 폭에 상관없이 구글 검색 창을 설치 가능합니다.

레이아웃을 고르고 저장 및 코드 생성을 첫 번째로 검색창 코드를 생성합니다. 생성된 코드를 복사하여 블로그에 적용하고 다음 : 검색결과에 대한 코드 가져오기를 선택합니다. 애드센스 맞춤 검색에서 검색 결과 주소를 입력하지 않았다면 상단에 검색 결과 세부 정보에서 검색 결과 페이지 주소를 입력해야 합니다.

검색결과 코드를 복사한 뒤 <s_list>...</s_list> 사이에 넣어 적용합니다. <s_list>...</s_list>에 넣어야 http://블로그.tistory.com/search 페이지에 적용되어 노출이 됩니다.

<s_list><!--검색 결과 -->
<div class="searchList"> 
    <h3><span class="from">[$$_list_conform_$$]</span><span class="lcnt"> +[$$_list_count_$$]</span></h3>  
    <ol> 
    <s_list_rep>   
        <li>
        <span class="date">[$$_list_rep_regdate_$$]</span> : <a href="[$$_list_rep_link_$$]">[$$_list_rep_title_$$]</a> 
        <span class="cnt">[$$_list_rep_rp_cnt_$$]</span> 
        </li> 
    </s_list_rep>
    </ol> 
<!-- 구글 검색 결과 -->
<script>
  (function() {
    var cx = 'partner-pub-9601546875621120:9783453381';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
<!-- 구글 검색 결과 -->
</div>
</s_list><!--검색 결과 끝 -->

테마에서 검색 버튼 등의 디자인을 바꿀 수 있습니다.

CSE 페이지에서 생성한 코드를 적용하여 좁은 폭에서도 레이아웃 침범 없이 깔끔하게 적용 되었습니다. 구글 CSE 코드 적용 후 익스플로러와 크롬에선 정상적인  저의 파이어폭스 환경 문제인지 정상적으로 검색이 이루어 지질 않네요.