26. 사이드바에 검색 모튤 설치 방법 - Cooltime의 블로그 초보탈출 설명서

안녕하세요. 쿨타임입니다.

'블로그 초보 탈출' 카테고리에 어떤글을 쓸까? 고민하고 있었는데, 이번에도 ILoveCinemusic님께서 문의를 주셨네요.

혹시 앞으로도 문의사항이 있으면 댓글 달아주시면 감사하겠습니다.

이번글은 사이드바에 '블로그 검색창'을 설치하는 방법에 대해서 다루도록 하겠습니다.

정확히 표현하면 '검색 모듈'이라고 해야겠네요.

이번글은 조금 어려울 수 도 있고 블로그 스킨마다 CSS가 많이 다르기 때문에 조금 응용도 하셔야 될 듯 합니다.

* 스킨자체에 '검색 모듈(사이드바)'가 있을 경우 생략하셔도 됩니다.

사이드바에 검색 모듈 설치 방법

 

ILoveCinemusic님께서 문의 하신 정확한 내용은 블로그 상단에 있는 '블로그 내 검색창'을 사이드바에 설치하고 싶다고 하셨습니다.

검색창은 스킨 자체에서 사이드바에 검색 모듈이 있는 경우도 있지만 대부분 상단에 위치해있기 때문에 

대부분의 스킨에 아래 방법이 적용가능할 듯 합니다.

그럼 상단에 설치해있는 검색창을 사이드바로 옮겨보도록 하겠습니다.

이번글은 HTML과 CSS를 수정해야되기 때문에 따라하기 전에 꼭 스킨 저장을 하고 나서 진행해주세요.

티스토리 관리센터 -> HTML/CSS에서 skin.html 내용을 보도록 하겠습니다.

일단 'searcBox'라고 검색합니다.

그러면 HTML 상단쪽에 위와 같은 혹은 비슷한 내용의 소스를 볼 수 있습니다.

<div id="searchBox"> 부터  </s_search> 아래의 </div> 까지 잘라내기 해줍니다.

* </div>라는 소스는 많이 존재하기 때문에 위치확인을 정확히 하시길 바랍니다.

* 잘라내기를 하는 이유는 HTML에 두개의 searchBox가 존재하면 두번째 검색창은 반응을 안하기 때문입니다.

searchBox에 관련된 소스를 잘라내기 하셨다면, 이제는 div id="sidebar" 라고 검색을 해줍니다.

그러면 <s_sidbar_elemunt> 라는 소스들을 많이 볼 수 있습니다.

만약 위치를 파악하셨다면 적당한 위치(</s_sidbar_elemunt> 아래에) 위 이미지 처럼 직접

<s_sidbar_elemunt> 

<!-- 블로그 검색 모듈 -->

 </s_sidbar_elemunt>

이라고 입력하면 '블로그 검색 모듈'이라는 사이드바 모듈(스킨 자체 위젯)이 생성된것입니다.

[참고 : <!-- 이름 --> 안의 이름이 모듈 이름이 됩니다. ]

아직 내용은 입력안했죠?

이미지 처럼 </s_sidbar_elemunt> 위쪽에 아까 잘라내기 한 searchBox 의 소스를 붙여넣기 해주시면 됩니다.

그리고 저장을 눌러줍니다.

* 모듈을 추가 생성시 사이드바 위젯 순서가 초기화되니 주의하시길 바랍니다.

티스토리 관리센터 -> 사이드바에 보시면 위 이미지 처럼 '블로그 검색 모듈'이라는 기본위젯(모듈)이 생성된것을 볼 수 있습니다.

저장을 눌러주고 블로그 홈화면으로 넘어갑니다.

사이드바에 검색 모듈이 설치되었습니다.

하지만 어딘가 많이 부족하죠?

테두리 색이 없어서 구분하기 어렵고 검색창 폭이 넓어서 검색아이콘이 아래로 내려온걸 확인 할 수 있습니다.

이제 CSS를 수정해서 검색창을 조금더 손보도록 하겠습니다.

* 만약 원하시는대로 적용되었다면 CSS를 수정하지 않으셔도 됩니다.

↑ Style.css 수정전 ⓐ

↑ Style.css 수정 후 ⓑ

관리센터 -> HTML/CSS에서 CSS화면을 보도록 하겠습니다.

style.css에서 #searchBox라고 검색해줍니다.

그러면 ⓐ 이미지처럼 몇개의 searchBox를 볼 수 있습니다.

제 스킨의 CSS에서는 검색창의 넓이와 높이가 지정 안되어 있네요.

그래서 직접 입력했습니다.

#serchBox input { width:130px, height:14px; }

혹시 #serchBox의 내용중에 넓이와 높이가 지정하는 소스가 입력되어 있다면 px만 수정해주셔도 됩니다.

저는 넓이를 130px로 지정하니 검색아이콘과 일자로 되더군요.

넓이는 블로그 사이드바 넓이에 맞게 수치를 조금씩 수정하면서 적용해주시면 될것입니다.

넓이가 맞추어졌다면 이제는 검색창에 테두리를 넣도록 하겠습니다.

제 CSS에는 border가 none;이라고 되어 있네요.

이녀석은 border-bottom-color:#ff 라고 수정하시면 됩니다.

* ff는 검은색을 표현합니다.

* 만약 border-소스-color:#색 이라는 소스가 있다면 색부분만 ff로 수정해주시면 됩니다.

* ⓑ 이미지의 초록색 줄 친곳을 참고해주세요.

* 혹시 CSS를 입력해도 변화가 없다면 오타를 확인해주시고 그래도 안되시면 여기저기 하나 하나 집어넣으시면서 수작업으로 하나하나 확인해보시면 됩니다.

* 검색창 배경색 지정은 background-color 입니다.

제 설명이 조금 부족했으면 댓글 달아주세요.

약간 응용이 빠르신분은 어떤식으로 HTML과 CSS가 어떻게 흘러가는지를 눈치챌듯 하네요.

설정이 끝났으면 확인을 누르고 블로그 홈으로 가도록 하겠습니다.

짜잔~

이제 원하는대로 사이드바에 검색 모듈이 설치가 안료되었습니다.

혹시 사이드바에 검색모듈 설치 성공을 하셨다면 꼭~ '공감'버튼 하나 눌러주시고 댓글 남겨주시면 감사하겠습니다.

앞으로도 유용한 정보를 많이 올리도록 노력하겠으니 재방문 많이 해주세요 ^-^