이번 포스팅은 티스토리 블로그의 검색창을 ultrah 블로그의 검색창(search box)처럼 보다 아름다운(?) 검색창으로 튜닝하는 방법입니다.
티스토리 스킨을 변경하기 전에 스킨 백업은 기본인 것 아시죠? *^^*
01 검색창(search box) 다운로드, 데모, 튜토리얼 제공 사이트에 접속합니다.
02 마음에 드는 검색창을 시연(demo)해보고 다운로드합니다.
04 이미지 파일을 티스토리에 업로드 합니다.
티스토리 관리 > HTML/CSS 편집 > 파일업로드
05 텍스트 에디터(Notepad++ 또는 메모장) 로 html파일을 open합니다.
아래의 빨간색 사각형 부분은 티스토리의 style.css 에 복사할 부분입니다.
주의할 부분은 #search가 티스토리의 내부 css파일에서 사용하는 부분인 것 같으니 #search 부분을 #search_ap와 같이 유일한 id명으로 변경해 줍니다.
(인터넷 익스플로러 7, 8, 9에서 엔터키 검색 오류 : 관련글 보러가기)
06 위의 『style.css 복사할 부분』을 티스토리 관리 > HTML/CSS 편집 >style.css의 제일 아랫 부분에 복사해 둡니다.
07 다음으로 skin.html에서 『<s_search>』로 검색해서 아래의 div 태그안에 『id="search_ap"』부분을 추가해 줍니다.
08 티스토리 관리화면에서 『미리보기』버튼을 클릭하여 제대로 검책창이 변경되었는지 확인을 합니다.
09 『저장』버튼을 클릭합니다.
검색창의 다른 부분을 변경 하고 싶으면 06 에서 추가한 css 파일의 태그의 수치를 변경하면 됩니다.
예)
배경색 변경 : background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
검색창 크기 변경 : width: 200px;