구글검색을 내스킨에 맞쳐 꾸며보기

많은분들이 구글광고를 하고 구글검색을 하실겁니다.
여기서는 구글검색을 하는것을 가정하에 꾸며보는 방법을 알려드리겠습니다.

우선 사이드바에 구글검색을 단다고 가정합니다.

그럼 스킨에 어울리게 사이드바에 본인의 html 부분에서 사이드바에 해당하는곳을 그대로 복사해서 사용하는것이 좋습니다.

그럼 사이드바에 다른 메뉴와 똑같이 사용할수 있습니다.

먼저 구글코드를 먼저 보여드리고 설명들어갑니다.
<s_sidebar_element><!-- 구글검색 -->
<div id="gsearch" class="widget">
	<h2>Search</h2>
	<ul>
		<li class="gsearch">
			<script type="text/javascript" src="http://www.google.com/jsapi"></script>
			<script type="text/javascript">
				google.load('search', '1');
				google.setOnLoadCallback(function() {
				google.search.CustomSearchControl.attachAutoCompletion(
				'partner-pub-2595844119737003:hxn6csyfbj6',
				document.getElementById('q'),
				'cse-search-box');
				});
			</script>
			<form action="http://www.google.co.kr/cse" id="cse-search-box">
			<div>
				<input name="cx" value="partner-pub-2595844119737003:hxn6csyfbj6" type="hidden">
				<input name="ie" value="UTF-8" type="hidden">
				<input name="q" id="q" autocomplete="off" size="25" type="text">
				<input name="sa" value="검색" class="btSearch" type="submit">
			</div>
			</form>
			<script type="text/javascript" src="http://www.google.co.kr/cse/brand?form=cse-search-box&amp;lang=ko"></script>
		</li>
	</ul>
</div>
</s_sidebar_element>
 여기서 20번줄과 21번줄에 하이라이트가 되있을겁니다. 즉 id 는 구글 자체에 정해져있는것이고 21번줄에 class는 하나 추가해서 넣어준것입니다.
그래서 저는 여기에 css 몇줄 추가해서 블로그의 스킨과 비슷하고 어울리게 만들었습니다.
너무 많이 수정하는것은 안되는걸로 알고 있습니다. 뭐 정확한것은 확인하지 못했구요. 즉 구글것은 너무 많이 건드는것은 좋지 않다고 생각됩니다.

우선 css 코드를 보시면 대략 이해가 가실겁니다.
/* 구글검색 */
#q {
	background-color:#F7F7F7 !important;
	border:1px solid #DDDDDD !important;
	padding:5px !important;
}
.btSearch {
	background-color:#F8F5E8;
	border:1px solid #CCCCCC;
	color:#333333;
	height:24px;
	width:32px;
	cursor:pointer;
}
 btSearch 라는 클래스명은 아무걸로나 사용해도 됩니다. 그리고 q라는 아이디는 변경하시면 안되고 그냥 q라는 id를 이용하되 css 부분만 수정해서 사용하면 됩니다.


뭐 다르게도 만들수도 있지만 대략 어울리는거 같네요. 여러분들도 틀에 박힌 구글검색보다는 수정해서 좀더 산뜻한 검색창을 만들어 보세요.

참고


개    개