블로그내의 연관글을 검색하여 보여주고 싶다던가,

다른 관련 있는 블로그 혹은 사이트에서 관련주제를 검색하여 보여주고 싶을때,

간편하게 구글 블로그 검색 바를 블로그에 추가할 수 있습니다.

우선 구글 API를 이용하기 위해선 API키를 받아야 합니다.

아래 링크에서 구글 API키를 받으세요.

구글 API키 받기(http://code.google.com/apis/ajaxsearch/signup.html)

그리고 블로그 검색 바 생성 마법사를 이용해서 코드를 생성합니다.

구글 블로그 검색 바 생성 위자드(http://www.google.com/uds/solutions/wizards/blogbar.html)

구글 블로그 검색 바 생성 마법사  (Google blogbar wizard) [블로그 검색,blog search]

블로그 검색 바 마법사의 각종 옵션을 선택하고 3번의 Generate Code를 누르시면 블로그 검색 바 코드가 생성되죠.

코드가 생성되면 블로그 검색 바 코드를 '<body>'태그 안의 원하는 부분에 붙여넣으세요.

그럼 블로그내에 블로그 검색 바가 추가됩니다.:D

생성된 블로그 검색 바 스크립트 예제.

[code javascript]
<!-- ++Begin Blog Bar Wizard Generated Code++ -->
  <!--
  // Created with a Google AJAX Search Wizard
  // http://code.google.com/apis/ajaxsearch/wizards.html
  -->

  <!--
  // The Following div element will end up holding the actual blogbar.
  // You can place this anywhere on your page.
  -->
  <div id="blogBar-bar">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>

  <!-- Ajax Search Api and Stylesheet
  // Note: If you are already using the AJAX Search API, then do not include it
  //       or its stylesheet again
  //
  // The Key Embedded in the following script tag is designed to work with
  // the following site:
  // http://dorajistyle.pe.kr
  -->
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-blbw&key=YOUR_APIKEY"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/css/gsearch.css");
  </style>

  <!-- Blog Bar Code and Stylesheet -->
  <script src="http://www.google.com/uds/solutions/blogbar/gsblogbar.js?mode=new"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/blogbar/gsblogbar.css");
  </style>

  <script type="text/javascript">
    function LoadBlogBar() {
      var blogBar;
      var options = {
        largeResultSet : false,
        title : "월풍도원(月風道院) 블로그 검색 바",
        horizontal : true,
        orderBy : GSearch.ORDER_BY_DATE,
        autoExecuteList : {
          executeList : ["여행", "소프트웨어", "스윙댄스", "무술","블로그 검색"]
        }
      }

      blogBar = new GSblogBar(document.getElementById("blogBar-bar"), options);
    }
    // arrange for this function to be called during body.onload
    // event processing
    GSearch.setOnLoadCallback(LoadBlogBar);
  </script>
<!-- ++End Blog Bar Wizard Generated Code++ -->
[/code]

혹시 블로그 검색 바에 검색할 사이트의 범위를 제한하고 싶다면 option란에 아래처럼 siteRestriction를 추가하시면 됩니다.

[code javascript]
      var options = {
    siteRestriction : "http://dorajistyle.pe.kr/",
        largeResultSet : false,
        ...
      }
[/code]

구글 블로그 검색 바에 대해 더 자세히 알고 싶으시다면, 아래의 블로그 검색 바 페이지를 방문하세요.

구글 블로그 검색 바 가이드 (http://www.google.com/uds/solutions/blogbar/reference.html)

세로 블로그 검색 바 (Vertical blog search bar) [블로그 검색,blog search]

세로 블로그 검색 바 예제

가로 블로그 검색 바 (Horizontal blog search bar) [블로그 검색,blog search]

가로 블로그 검색 바 예제

블로그 검색 바의 스타일 시트를 손보면, 위의 예제 처럼 자신의 블로그에 맞게 블로그 검색 바를 꾸밀 수 있습니다.

간단하죠?

이제 블로그에 블로그 검색 바를 달아보세요!:D


----

Open english content




by


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    광고를 클릭해주시면,
    블로그 운영에 큰 도움이 됩니다!