라비아

티스토리 검색창을 블로그 상단으로 올려봤습니다




블로그를 처음 개설했을 때보다 글을 작성하는 빈도수가 점점 줄어드는 것 같네요ㅋㅋ
그래도 1일 1회 포스팅이 블로그건강에 좋다고하니 뻘글이라도 매일 하나씩은 작성하도록
해봐야겠습니다.

오늘 편집해본 스킨부분은 바로 검색창 부분입니다.
대부분의 블로그들의 검색창은 사이드바에 위치해있더군요. 물론 컨텐츠가 별로 없거나
검색창 필요성 여부를 별로 느끼지 못할때에는 상관이 없겠지만, 내용 자체가 많은 블로그이거나
정보성 컨텐츠가 많이 실려있을 경우에는, 이 검색창을 눈에 잘 띄는곳에 두면 방문자들이 이용하기에
더 편리하지 않을까 하는 생각입니다.

검색창 편집에 관한 정보를 얻기위해 웹서핑과 타 블로그에 방문하여 찾아보았는데
생각보다 어렵더군요. 파일을 업로드해야하고 소스부분을 많이 변경해야되는 것 같았습니다.
그래서 저는 기존에 있는 소스를 이용하여 검색창의 이동과 간단한 디자인편집을 해봤습니다.



혹시라도 소스를 잘못건드릴 수 있으니 이전스킨을 미리 저장해두는 것이 좋겠죠 ㅋ 

우선 css 편집창에서 아래와 같은 부분을 찾아줍니다.



위 부분이 바로 검색창의 높이와 너비, 색 등을 편집할 수 있는 부분입니다.
px 앞부분 숫자들만 바꿔주면 되니까 별로 어렵지 않을 겁니다 ㅋ

검색창 수정이 끝났다면, 
기존에 사이드바에 있던 검색창을 블로그 맨 위로 올려야겠죠?



위 사진처럼 검색모듈 부분을 찾으면 검색창에 관련된 소스가 나옵니다.
위에 표시된 <!--검색모듈 소스--> 부분에 원래는 관련 소스가 있어야 하죠ㅋ
그 부분의 내용들을 잘라내고 헤더부분의 타이틀부분 근처에 옮겨주시면 됩니다.



헤더 부분이 블로그 상단 부분인데요,
블로그제목 옆에 검색창을 달기위해서 테이블태그를 이용하여 타이틀과 검색창을
나란히 위치하도록 해본 것입니다. 또한 검색창 소스의 위치를 헤더 아랫부분으로 옮기더라도
검색기능은 정상적으로 작동하더라구요 ㅋㅋ



제 블로그 상단에 위와같은 검색창이 생겼습니다.
앞으로 어떻게 편집할 지 모르지만, 혹시라도 검색창을 블로그 최상단으로 옮겨보고싶으신 분들은
참고하셔도 좋을 것 같네요ㅎ