구글블로그 사용법: 블로그 검색기 코드 예
구글 블로그에 사용할 수 있는 검색기는 몇 가지가 있다.하나는, 블로그 맨 위에 기본적으로 표시되는 네비게이션 바에 있는 검색기이다.
이 검색기는 블로거(블로그스팟) 자체 검색기 인 듯하다. 장점은 빠르고 최근의 글도 검색이 된다는 점이다. 단점은 네비게이션 바의 맨 왼쪽에 조그마하게 달려 있어 사용하기가 좀 불편하고, 네비게이션 바를 표시할 때에만 쓸 수 있다. 이 검색기는 검색결과를 목록 형태가 아니라 글을 펼쳐서 나열한다.
두 번째는, 대시보드 > 레이아웃 > 가젯추가 에서 추가할 수 있는 검색기이다.
이 검색기는 구글의 검색기와 연동되어 작동하므로, 최근의 글은 검색이 되지 않는 단점이 있다. CSS코드를 사용하여 블로그에 어울리도록 꾸밀 수 있는 장점이 있다. 이 검색기는 구글 검색기와 마찬가지로 글을 목록형태로 보여거나 또는 글을 펼쳐 보여줄 수 있다.
세 번째는, 구글 커스텀 서치이다.
이 검색기를 사용하려면, 구글 계정의 커스텀 서치에서 검색기를 만들고, 코드를 가져와 HTML 가젯을 통하여 추가하면 된다. 여러가지 옵션을 설정하여 블로그의 특성에 맞게 꾸밀 수 있는 장점이 있다. 반면에 이 검색기 코드를 넣으면 로딩되는 시간이 상당히 걸리는 단점이 있다. 검색결과는 목록형태로 보여 준다.
네 번째는, 인터넷을 통해 코드를 구할 수 있는 검색기이다.
인터넷을 찾아 보면, 다양한 구글 블로그 검색기 코드를 볼 수 있고 기능과 모양 등을 잘 꾸려 놓은 것들도 많이 있다.
실제로 검색을 해보면, 글을 펼쳐 보여주는 블로그 자체 검색기가 편할 때도 있고, 검색되는 글이 많을 때는 목록형태로 보여주는 검색기가 편할 때도 있으므로, 어느 것이 좋다고 할 수는 없겠다.
아래는 HTML 가젯을 통하여 추가할 수 있고, CSS코드로 꾸밀 수 있는 검색기 가운데 가장 단순한 검색기 코드이다. 블로그 자체를 검색하여 글을 펼쳐 보여준다.
[구글 블로그 검색기 코드 예]
<style>
#searchbox {
background: transparent;
padding: 0px;
width: 100%;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: #fff;
border-width: 1px;
border-style: solid;
border-color: #D9D9D9;
font: bold 14px Arial,Helvetica,Sans-serif;
color: #000000;
width:70%;
padding: 6px 0px 6px 20px;
}
#button-submit {
background: #bdd859;
border: 1px solid #eee;
padding: 8px 0px 7px 0px;
width: 21%;
cursor: pointer;
font: bold 12px Arial, Helvetica;
color: #333;
text-shadow: 0 1px 0 #fff;
}
#button-submit:hover {
background: #4f5356;
}
#button-submit:active {
background: #5b5d60;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="search word here..." />
<input id="button-submit" type="submit" value="Search" />
</form>
#searchbox {
background: transparent;
padding: 0px;
width: 100%;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: #fff;
border-width: 1px;
border-style: solid;
border-color: #D9D9D9;
font: bold 14px Arial,Helvetica,Sans-serif;
color: #000000;
width:70%;
padding: 6px 0px 6px 20px;
}
#button-submit {
background: #bdd859;
border: 1px solid #eee;
padding: 8px 0px 7px 0px;
width: 21%;
cursor: pointer;
font: bold 12px Arial, Helvetica;
color: #333;
text-shadow: 0 1px 0 #fff;
}
#button-submit:hover {
background: #4f5356;
}
#button-submit:active {
background: #5b5d60;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="search word here..." />
<input id="button-submit" type="submit" value="Search" />
</form>