포털의 경우는 많은 정보를 포함하고 있어, 아무리 카테고리로 분류를 해도 이용자들이 원하는 정보를 찾기가 쉽지 않습니다.
그래서, 검색창을 상단 중앙에 위치 시켜 포털 방문자에게 원하는 정보를 쉽게 찾을 수 있도록 해주고 있습니다.
블로그는 개인적인 정보를 포함하는 경우가 많기도 하고, 글이 많지도 않기 때문에 검색 보다는
카테고리 분류를 중요시하기 때문에, 검색창은 보통 사이드바에 위치하게 되어 있습니다.
하지만, 블로그가 정보전달을 위주로 한고 글이 많다면, 검색은 중요할 수도 있습니다.
티스토리의 검색창을 포털처럼 블로그 최상단으로 옮기는 방법입니다.
원 소스는 "티비의 세상구경"을 운영하시고 계신 티비님이십니다.[원문 보러가기]
이 글은 나중에 스킨을 변경할 때 제가 보기 위해 작성해 두는 것입니다.
티스토리의 검색창을 상단으로 올리는 방법을 정리하면 다음과 같습니다.
1. 검색창 이미지 제작(테두리 배경, 검색버튼)
2. skin.html에 소스 추가
3. css에 소스 추가
1. 검색창 이미지 제작
원소스 제작자인 티비님의 블로그에 가시면 티비님께서 제작하신 검색창 이미지가 있습니다.
티비님 블로그에서 이미지를 다운 받아서 사용하셔도 되고, 직접 만들어서 사용하셔도 됩니다.
필요한 이미지는 테두리가 되는 배경 이미지와 검색버튼 이미지 2개 입니다.
이미지를 보면 아시겠지만, 검색창이 중앙쪽으로 가도록 검색 테두리 앞쪽으로 투명한색으로 만들어져 있습니다.
전체 크기는 749X39로 제작되어 있네요.
쉽게 적용하기 위해서는 사이즈 변경을 하지 않는 것이 편하겠지만, 자신의 블로그 폭이 특별하게 크거나 작다면 사이즈 조절을 해야 겠죠.
이미지를 만드셨다면, 자신의 티스토리 계정에 올려줍니다.
2. skin.html에 소스 추가
티스토리 스킨마다 다르지만, <body> 테그 바로 밑에 <div id="header"> 나 <div id="head_container"> 등이 있습니다.
상단을 구성하는 소스들로 이 소스 바로 밑에 아래의 소스를 추가해 줍니다.
빨간색의 자신이 올린 배경 이미지 경로값은 1번에서 업로드된 이미지를 클릭하면, 왼쪽의 미리보기 창에 해당이미지가 보이며 해당 이미지에서 오른쪽 마우스 클릭을 하면 경로값을 확인 할 수 있습니다.
이미지의 사이즈를 변경 하셨다면, 소스의 첫번째 줄도 변경해 주어야 겠죠.
- 검색창의 상/하를 조절하고 싶다면 top값을 변경하면 됩니다.
- 검색창의 좌/우 이동은 1번에서 배경 이미지를 조절하고 그에 맞춰 width를 변경하면 됩니다.
- 검색창의 높이를 조절하려면 배경 이미지를 변경하고, 그에 맞춰 height를 변경하면 됩니다.
3. style.css 소스 추가
style.css에서 검색창의 속성관련 소스를 추가해 줍니다.
빨간색의 이미지 경로값은 [검색] 버튼 이미지의 경로값입니다. 2번과 같이 미리보기 창에서 경로를 확인하고 붙여 넣습니다.
검색창의 크기를 변경하기 위해 배경 이미지를 바꾸었다면, 그 크기에 맞춰 searchBox의 크기도 조절해 주어야 겠죠.
위쪽의 소스는 검색어가 입력되는 실제 창의 크기를 지정하고, 색상을 지정하게 되어 있습니다.
아래쪽의 소스는 [검색] 버튼의 크기와 위치를 지정하고 있습니다.
그래서, 검색창을 상단 중앙에 위치 시켜 포털 방문자에게 원하는 정보를 쉽게 찾을 수 있도록 해주고 있습니다.
블로그는 개인적인 정보를 포함하는 경우가 많기도 하고, 글이 많지도 않기 때문에 검색 보다는
카테고리 분류를 중요시하기 때문에, 검색창은 보통 사이드바에 위치하게 되어 있습니다.
하지만, 블로그가 정보전달을 위주로 한고 글이 많다면, 검색은 중요할 수도 있습니다.
티스토리의 검색창을 포털처럼 블로그 최상단으로 옮기는 방법입니다.
원 소스는 "티비의 세상구경"을 운영하시고 계신 티비님이십니다.[원문 보러가기]
이 글은 나중에 스킨을 변경할 때 제가 보기 위해 작성해 두는 것입니다.
| 검색창 상단으로 올리기 |
티스토리의 검색창을 상단으로 올리는 방법을 정리하면 다음과 같습니다.
1. 검색창 이미지 제작(테두리 배경, 검색버튼)
2. skin.html에 소스 추가
3. css에 소스 추가
1. 검색창 이미지 제작
원소스 제작자인 티비님의 블로그에 가시면 티비님께서 제작하신 검색창 이미지가 있습니다.
티비님 블로그에서 이미지를 다운 받아서 사용하셔도 되고, 직접 만들어서 사용하셔도 됩니다.
필요한 이미지는 테두리가 되는 배경 이미지와 검색버튼 이미지 2개 입니다.
이미지를 보면 아시겠지만, 검색창이 중앙쪽으로 가도록 검색 테두리 앞쪽으로 투명한색으로 만들어져 있습니다.
전체 크기는 749X39로 제작되어 있네요.
쉽게 적용하기 위해서는 사이즈 변경을 하지 않는 것이 편하겠지만, 자신의 블로그 폭이 특별하게 크거나 작다면 사이즈 조절을 해야 겠죠.
이미지를 만드셨다면, 자신의 티스토리 계정에 올려줍니다.
2. skin.html에 소스 추가
티스토리 스킨마다 다르지만, <body> 테그 바로 밑에 <div id="header"> 나 <div id="head_container"> 등이 있습니다.
상단을 구성하는 소스들로 이 소스 바로 밑에 아래의 소스를 추가해 줍니다.
|
<div id="searchBox" style="background-image: url(자신이 올린 배경 이미지의 경로값); <s_search> |
빨간색의 자신이 올린 배경 이미지 경로값은 1번에서 업로드된 이미지를 클릭하면, 왼쪽의 미리보기 창에 해당이미지가 보이며 해당 이미지에서 오른쪽 마우스 클릭을 하면 경로값을 확인 할 수 있습니다.
이미지의 사이즈를 변경 하셨다면, 소스의 첫번째 줄도 변경해 주어야 겠죠.
- 검색창의 상/하를 조절하고 싶다면 top값을 변경하면 됩니다.
- 검색창의 좌/우 이동은 1번에서 배경 이미지를 조절하고 그에 맞춰 width를 변경하면 됩니다.
- 검색창의 높이를 조절하려면 배경 이미지를 변경하고, 그에 맞춰 height를 변경하면 됩니다.
3. style.css 소스 추가
style.css에서 검색창의 속성관련 소스를 추가해 줍니다.
| /* 검색 */ #searchBox label {display:none; } #searchBox input { width:425px; height:25px; border:1px solid #ffffff; background-color:#ffffff; color:#000000; vertical-align:middle; /* 검색창과 버튼 정렬이 안맞을 때 필수 */ position:absolute; left:253px; top:6px; cursor:pointer; font-size:18px; } #searchBox .submit { width:56px; height:37px; border:0px; background:url(검색 버튼 이미지 경로값) no-repeat; text-indent:-5000px; overflow:hidden; vertical-align:middle; /* 검색창과 버튼 정렬이 안맞을 때 필수 */ position:absolute; left:692px; top:1px; cursor:pointer; } |
빨간색의 이미지 경로값은 [검색] 버튼 이미지의 경로값입니다. 2번과 같이 미리보기 창에서 경로를 확인하고 붙여 넣습니다.
검색창의 크기를 변경하기 위해 배경 이미지를 바꾸었다면, 그 크기에 맞춰 searchBox의 크기도 조절해 주어야 겠죠.
위쪽의 소스는 검색어가 입력되는 실제 창의 크기를 지정하고, 색상을 지정하게 되어 있습니다.
아래쪽의 소스는 [검색] 버튼의 크기와 위치를 지정하고 있습니다.
'블로그' 카테고리의 다른 글
| [Pixazza] 새로운 블로그 수익, 이미지 광고 Luminate (9) | 2011.08.13 |
|---|---|
| 티스토리 초대장 나눠드립니다.[마감] (38) | 2011.08.03 |
| 다음 웹인사이드 서비스 종료 (10) | 2011.07.08 |
| 티스토리 동영상 올리기 피해야 하는 이유 (16) | 2011.05.19 |
| 국내 CPM 광고의 단가 비교(애드젯vs짱라이브) (12) | 2011.05.13 |
| 티스토리 초대장 나눠드립니다.[마감되었습다] (49) | 2011.05.11 |
