블로그내의 연관글을 검색하여 보여주고 싶다던가,
다른 관련 있는 블로그 혹은 사이트에서 관련주제를 검색하여 보여주고 싶을때,
간편하게 구글 블로그 검색 바를 블로그에 추가할 수 있습니다.
우선 구글 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]](http://ss.textcube.com/blog/0/4536/attach/XQa1SRXZ6w.jpg)
블로그 검색 바 마법사의 각종 옵션을 선택하고 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]](http://ss.textcube.com/blog/0/4536/attach/XYw6mokhar.jpg)
세로 블로그 검색 바 예제
![가로 블로그 검색 바 (Horizontal blog search bar) [블로그 검색,blog search]](http://ss.textcube.com/blog/0/4536/attach/XcO2aq0Yg2.jpg)
가로 블로그 검색 바 예제
블로그 검색 바의 스타일 시트를 손보면, 위의 예제 처럼 자신의 블로그에 맞게 블로그 검색 바를 꾸밀 수 있습니다.
간단하죠?
이제 블로그에 블로그 검색 바를 달아보세요!:D
----
Open english content
by 月風
