Mẹo làm Blog: Làm một công cụ tìm kiếm

Bạn mến,

Google Search là một công cụ tìm kiếm vốn dĩ rất hữu hiệu. Nay với kỹ thuật Ajax, Google tung ra thêm một độc chiêu mới, cho phép chúng ta tìm kiếm trong nhiều trang khác nhau tùy theo cách bạn thiết kế, kết quả khác nhau hiện ra khi bạn đổi tabs.




Sau đây là cách làm:

Bước 1: Lấy API key từ http://code.google.com/apis/ajaxsearch/signup.html. Rất dễ lấy, chỉ cần viết tên blog vào, rồi check hộp đồng ý tuân theo các điều kiện Google đặt ra là xong .

Bước 2: Thêm vào đoạn mã sau, ngay sau dòng ] ] ></b:skin> tag.
Nhớ thế key chỗ in đậm với API key của bạn.


<script

src='http://www.google.com/maps?file=api&amp;v=2&amp;key=wW9cday6o7K3g' type='text/javascript'/>
<script

src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=wW9cday6o7K3g' type='text/javascript'/>
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>
<link href='http://www.google.com/uds/css/gsearch_darkgrey.css' rel='stylesheet' type='text/css'/>

<style type='text/css'>
/* primary colors */
.app_gsvsc { color : rgb(153, 170, 221); }
.search-form-complete_gsvsc div.search-form-save_gsvsc { color : rgb(170, 221, 153); }
div.search-form-save_gsvsc { color : #202020; }

/* selected tag */
div.tag-selected_gsvsc { color : rgb(170, 221, 153); }

/* hover colors */
div.more_gsvsc:hover { color : rgb(170, 221, 153); }
div.tag-control_gsvsc:hover { color : rgb(170, 221, 153); }
.search-form-complete_gsvsc div.search-form-save_gsvsc:hover { color : rgb(170, 221, 153); }
.footerBox_gsvsc a:hover { color : rgb(170, 221, 153); }
.playerBox_gsvsc a.title_gsvsc:hover { color : rgb(170, 221, 153); }

/* secondary colors */
div.more_gsvsc { color : rgb(204, 204, 204); }
div.tag-control_gsvsc { color : rgb(204, 204, 204); }
.searchForm_gsvsc { color : rgb(204, 204, 204); }
.search-form-input_gsvsc { color : rgb(204, 204, 204); }
td.edit-form-input_gsvsc input { color : rgb(204, 204, 204); }
div.edit-form-submit-box_gsvsc { color : rgb(204, 204, 204); }
.footerBox_gsvsc a { color : rgb(204, 204, 204); }
.playerBox_gsvsc a.title_gsvsc { color : rgb(204, 204, 204); }
div.edit-tag_gsvsc { color : rgb(204, 204, 204); }

/* special settings, not called out in standard color overrides */
.tiny-results_gsvsc div.tiny-video-result_gsvsc { border-color : #000000; }
.results_gsvsc div.video-result_gsvsc { border-color : #000000; }
.search-form-input_gsvsc {
color : #676767;
background-color : #e0e0e0;
}
.gsc-control {
  width: 100%;
}

</style>
  <script type='text/javascript'>
    var coreSearch;


    function SolutionLoad() {

    var controlRoot = document.getElementById("searchControl");

    // create the search control
    coreSearch = new GSearchControl();
    coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);
    coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);

    // prep for decoupled search form
    var searchFormElement = document.getElementById("searchform");
    var drawOptions = new GdrawOptions();
    drawOptions.setSearchFormRoot(searchFormElement);
    drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

    // populate - web, this blog, all blogs
    var searcher = new GwebSearch();
    searcher.setUserDefinedLabel("The Web");
    coreSearch.addSearcher(searcher);

    searcher = new GblogSearch();
    searcher.setUserDefinedLabel("Blogsphere");
    coreSearch.addSearcher(searcher);

    searcher = new GblogSearch();
    searcher.setSiteRestriction("http://hoctro.blogspot.com/");
    searcher.setUserDefinedLabel("Hoctro's Place");
    coreSearch.addSearcher(searcher);

    searcher = new GblogSearch();
    searcher.setSiteRestriction("http://googleblog.blogspot.com/");
    searcher.setUserDefinedLabel("Google Blog");
    coreSearch.addSearcher(searcher);

    searcher = new GwebSearch();
    searcher.setSiteRestriction("http://www.blogger.com/");
    searcher.setUserDefinedLabel("Blogger");
    coreSearch.addSearcher(searcher);

    coreSearch.draw(controlRoot, drawOptions);

    }

    function doCoreSearch(q) {
      coreSearch.execute(q);
    }


    registerLoadHandler(SolutionLoad);

    function registerLoadHandler(handler) {
      var node = window;
      if (node.addEventListener) {
        node.addEventListener("load", handler, false);
      } else if (node.attachEvent) {
        node.attachEvent("onload", handler);
      } else {
        node['onload'] = handler;
      }
      return true;
    }
  </script>



Bước 3: Thêm 2 phụ tùng này vào trang bạn, theo cách tôi chỉ ở đây, chương B.4.


<b:widget id='HTML41' locked='false' title='Search Bar' type='HTML'>
<b:includable id='main'>
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <div id='searchform'>Loading...</div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

<b:widget id='HTML42' locked='false' title='Search Results' type='HTML'>
<b:includable id='main'>
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <div id='searchControl'>Loading...</div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>



Bước 4: Chuyển các phụ tùng đến nơi bạn thích, tùy ý.


Đôi khi bạn thấy cửa sổ này hiện ra, đừng ngại và cứ ấn OK.



Bạn cũng có thể thế tên của blog tôi bằng blog bạn ở các chỗ in đậm:


    searcher = new GblogSearch();
    searcher.setSiteRestriction("http://hoctro.blogspot.com/");
    searcher.setUserDefinedLabel("Hoctro's Place");
    coreSearch.addSearcher(searcher);


Chỉ có thế thôi! Chúc bạn thành công!


Thân ái,

Hoctro
10 tháng 12 năm 2006