구글 검색창을 블로그 사이드바에 추가하는 HTML 코드

(2024-03-29 업데이트: 보안상의 문제로 실행 결과는 삭제했습니다. 요즘에는 구글 검색창을 다는 것을 구글에서 안 좋아하는 것 같습니다.)


(물론 이런 검색창은 블로그의 사이드바가 아니더라도 어디에서나 사용할 수 있다. 단, blogger.com에서, 템플릿이 아닌 포스트의 본문에 삽입할 때에는, 모든 태그를 1줄로 이어붙어야만 한다. 왜냐하면 blogger.com은 포스트 본문에 있는 모든 행갈이에 <br /> 태그를 강제로 붙여버리기 때문이다.)




구글 검색창을 사이드바에 넣고 싶어서 그동안 여러 번 시도했는데 자꾸 실패했었다. 기술적인 어려움은 없었지만 디자인 상의 어려움이 조금 있었다. 메인 페이지의 Monthly Archives 밑에 구글 검색창을 넣으려 했는데, 그러면 사이드바의 조화가 깨지는 문제가 있었다. 쉽게 말해서 산만해졌다. 더구나 검색창이라는 게, 다른 구성 요소들에 비해, 모양이 '튀어서' 더욱 그랬고, 시선을 분산시키는 위험도 있었다.

그러나 검색창을 꼭 달고 싶었다. 사실, 개인 블로그들까지 성실하게 인덱스해주는 검색엔진이 구글 하나밖에는 없다. MSN Search 도 조금 발전하고는 있지만 사용자가 없어서 별 의미가 없고, 야후 검색은 검색 쪽을 포기한 듯 잘 검색되지 않았다. 국내에는 진정한 의미에서의 검색엔진은 없지만, 있다고 해도 개인 블로그는 인덱스해주지 않았고, 설령 인덱스한다 하더라도 "자사의 서비스"나 "돈을 받은 사이트"를 먼저 출력하기에 개인 블로그는 검색 결과에서 잘 보이지 않았다.

결국, 구글 사용자가 많아지지 않으면, 개인 블로그가 발전하기 힘든 것이 현실이다.

꼭 위와 같은 이유가 아니더라도, 사이드바에 검색창이 하나쯤 있는 것이 좋다고 생각되었다. 그리고 블로거닷컴(blogger.com)의 경우, 화면 최상단에 "네비게이션 바"라는 이름으로, 블로그 검색창이 하나 있는데, 그것이 검색창인지 아닌지 한눈에 알 수 있는 방문객은 드물 것이다.



Monthly Archives 바로 밑이 아닌, 사이드바의 한참 아래에다 붙이면 디자인의 문제가 해결될 것 같았다. 실제로 해보니 그럭저럭 괜찮았다. 사이드바는 충분히 길기 때문에, 구성 요소들을 굳이 상단 한군데에 몰아넣을 필요는 없었다.



다음과 같은 HTML코드가 만들어졌다:

※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함


2006-04-01 2:05오후 업데이트: 코드를 약간 최적화. 현재 버전 1.01

2006-04-01 4:26오후 업데이트: 구글은 기본적으로 한번에 10개씩의 결과만 출력한다. 100개씩 나오도록 하는 옵션이 있지만, 그 옵션을 켜지 않아도 100개씩 나오도록 하는 코드를 넣었다. (버전1.1)




결과는 여기: https://mwultong.blogspot.com/#google_search
(2024-03-29 업데이트: 보안상의 문제로 실행 결과는 삭제했습니다.)


필자의 경우, 위의 코드 바로 위에
<div style="margin-top:1000px;"></div>
이 코드를 추가하여 많은 여백을 주었다. 물론 이 여백은 개인의 취향에 달린 문제다.


그런데 메인페이지의 경우, 항상 1주일 정도 분량의 포스트가 채워져 있기에, 사이드바의 길이가 일정하다. 그러나 아이템 페이지의 경우는 포스트의 길이에 따라 변동이 심하고, 어카이브 페이지의 경우에는 포스트의 양에 따라 사이드바의 길이가 변한다.

그래서 어쩔 수 없이 다음과 같은 코드로, 위의 코드들을 둘러싸서, 메인 페이지만에만 구글 검색창이 나오도록 해두었다.

<MainPage>
...HTML코드...
</MainPage>

참고로, <MainPage> 이런 태그는 블로거닷컴(blogger.com)의 템플릿 전용 태그다.



관련 포스트: "포스트 본문에 구글 로고 추가 HTML 코드"