Blogger에는 기본적으로 상단에 Navbar가 존재한다. 이 Navbar에도 검색창이 존재하긴 하지만, 많은 사람들이 블로그를 꾸미는 과정에서 이 Navbar를 없앤다.

그리고 가젯(Gadget)중에서 이미 검색창이라는 것이 있는데, 이 검색창은 기본 가젯이며 커스터마이징이 다소 힘들고 검색시 불필요한 팝업이 뜨기 때문에 사용이 꺼려진다.

따라서 간단하게 Navbar의 검색창을 구현하면서, 커스터마이징이 비교적 쉬운 나만의 검색창을 만들어보도록 하자.

기본적으로 Navbar의 검색 기능은 /search라는 경로에 q라는 이름의 파라미터(parameter)로서 검색 쿼리(Search query)를 get 방식으로 보내는 형식이다.

이 점에 착안해서 매우 간단하게 검색 기능을 구현할 수 있다. HTML의 form 태그를 통해 보내버리면 되는 것이다. 그러면 자동적으로 블로그의 메인 페이지에 검색 결과에 해당하는 게시물들만 보이게 된다.

귀차니스트들을 위해 이 블로그에서 직접 사용중인 소스코드를 공유한다.
블로그의 레이아웃 설정에서 (되도록이면 sidebar쪽에) 가젯 추가를 선택하고 HTML/JavaScript 가젯을 선택한다.

가젯의 제목은 대충 Search 정도로 하고 내용 부분에 다음의 소스 코드를 복사 및 붙여넣기 하면 완성이다.

Source Code

<!-- arkainoh.blogspot.com -->
<style>
.input-group-addon:hover {
cursor:pointer;
}
</style>
<form name="mysearchbar" action="/search" method="get">
<div class="input-group">
<input name="q" type="text" class="form-control"/>
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-search" onclick="document.mysearchbar.submit()"></span>
    </div>
</div>
</form>
<a href="https://arkainoh.blogspot.com" text-decoration="none" style="float:right"><font color="#d3d3d3" size="1">@Arkainoh</font></a>
<br />