Sunday, November 12, 2006

구글 아작스 서치를 탭모드로 변경 Google Ajax Search Changed in Tabbed Mode

블로그 사이드바에 있는 Google Ajax Search를 Linear모드로 사용했는데, GSearchControl Draw Modes를 참고하여 탭모드로 변경했다.

블로거 베타에서 이를 수정하려면 아래의 코드와 같이 수정하면 되는데, 이전에 Google Ajax Search API Key를 얻어야 하고, 제공하는 코드도 복사해서 블로거 베타에서 HTML/Javascript 구성요소를 추가하고 붙여넣기를 해야 한다. 참고로 The "Hello World!" of Google's Ajax API Search in Beta [by Hoctro's Place]글도 읽어 보자.

</head>전에 아래 링크를 삽입한다.

<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>
</head>

아래는 탭모드 또는 리니어모드로 Google Ajax Search를 볼 수 있게 수정한 템플릿 코드다. 이렇게 하려면 GSearcherControl Draw Modes에 명시된대로, 구글에서 제공한 코드의 일부를 수정해야 하는데, 아래 코드의 색칠된 부분을 참고한다.
To view results from Google Ajax Search in tabbed form or linear form, some code provided by Google needs to modify as below blue colored as per GSearcherControl Draw Modes.

<b:widget id='HTML1' locked='false' title='Google AJAX Search' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAA6j4d0
3_0McO_mHyyMwIq1BTTh8T3PYR5NfOcK8cDGLH5MXcz1xQ-6yRwN1rrsTqV0TZDMnL
VBHb7Sw' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>
//<![CDATA[

function OnLoad() {
// Create a search control
var searchControl = new GSearchControl();

// create a drawOptions object
var drawOptions = new GdrawOptions();

// Add in a full set of searchers
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());

// Set the Local Search center point
localSearch.setCenterPoint("");

// Tell the searcher to draw itself in tabbed mode
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
// If draw in Lenear Mode, commented above code with "//"
// and de-commented below code
// Lenear Mode로 수정하려면 위의 탭모드를 코멘트처리하고,
// 아래 코드의 코멘트처리부분을 삭제한다.

// drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR);

searchControl.draw(document.getElementById("searchcontrol"),drawOptions);

// Execute an inital search
searchControl.execute("");
}

//]]>
</script>
<body onload='OnLoad()'>
<div id='searchcontrol'/>
</body>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Update: Revised above Google Ajax Search Code as red colored to meet the blogger template. (2006.11.18)

Update-2: Added English comment to some post as italic blue colored for foreigners.
Hum.. translations seems to be poor. (2006.11.28)

No comments:

Post a Comment