티스토리 검색창 포털처럼 만들기티스토리 검색창 포털처럼 만들기

Posted at 2011.05.21 07:00 | Posted in 블로그

포털의 경우는 많은 정보를 포함하고 있어, 아무리 카테고리로 분류를 해도 이용자들이 원하는 정보를 찾기가 쉽지 않습니다.
그래서, 검색창을 상단 중앙에 위치 시켜 포털 방문자에게 원하는 정보를 쉽게 찾을 수 있도록 해주고 있습니다.


블로그는 개인적인 정보를 포함하는 경우가 많기도 하고, 글이 많지도 않기 때문에 검색 보다는
카테고리 분류를 중요시하기 때문에, 검색창은 보통 사이드바에 위치하게 되어 있습니다.

하지만, 블로그가 정보전달을 위주로 한고 글이 많다면, 검색은 중요할 수도 있습니다.
티스토리의 검색창을 포털처럼 블로그 최상단으로 옮기는 방법입니다.

원 소스는 "티비의 세상구경"을 운영하시고 계신 티비님이십니다.[원문 보러가기]

이 글은 나중에 스킨을 변경할 때 제가 보기 위해 작성해 두는 것입니다.

  검색창 상단으로 올리기  

티스토리의 검색창을 상단으로 올리는 방법을 정리하면 다음과 같습니다.

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(자신이 올린 배경 이미지의 경로값);
position:absolute; top:95px; width:749px; height:39px; ">
<s_search>

<s_search>
<label for="search">search</label>
<input type="text"  name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"/>
<input value="검색" type="button" onclick="[##_search_onclick_submit_##]" class="submit"/>
</s_search>
</div>


빨간색의 자신이 올린 배경 이미지 경로값은 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의 크기도 조절해 주어야 겠죠.

위쪽의 소스는 검색어가 입력되는 실제 창의 크기를 지정하고, 색상을 지정하게 되어 있습니다.
아래쪽의 소스는 [검색] 버튼의 크기와 위치를 지정하고 있습니다.

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

  1. 옷.. 저랑 스킨 똑같으시네요.. 저도 가독성 높일려고 양쪽사이드에 색 넣었는데ㅋㅋ 궁금한점이 있는데 블로그글 검색창 카테고리 위로 올리는방법좀 알려주실수 있나요? 어떻게 올리는지 모르겠네요ㅠ
    • 2011.06.05 15:22 신고 [Edit/Del]
      꼭대기 아니고, 그냥 카테고리 위로 올리는 방법 말씀이신가요?

      skin.html에서 보시면

      <div class="search">
      <s_search>
      <input class="searchinput" type="text" name="" onFocus="this.value=''" onkeypress="if (event.keyCode == 13) { }" title="검색어를 입력하세요" /> <input value=" " class="submit" type="submit" onclick="" title="검색하기" />
      </s_search>
      </div>
      라는 검색창 소스가 있습니다.

      이부분이 사이드바 위젯들 맨 아래쪽에 위치해 있는데요. 이 소스를 카테고리 위쪽이나 원하는 곳으로 이동시켜 주시면 됩니다.^^*
    • 2011.06.05 16:52 신고 [Edit/Del]
      이거 수정하는법을 어디서도 못찾고 있어서 고민이였는데, 정말 감사합니다~!
    • 2011.06.06 01:49 신고 [Edit/Del]
      들어가 보니, 잘 옮기셨네요^^*
      좋은 연휴 되세요^^~
  2. 와 아라님 블로그에 이런 정보들이 다 있었네요~!!ㅎㅎ
  3. 저도 TOKYO-HOT 님처럼 양쪽사이드에 색을 넣고싶네요ㅎ 스킨은 같은데 어캐하나요? 매번물아봐서 죄송합니당
  4. 안녕하세요 다름이 아니고 우연히 블그를 방문하게 되었습니다. 그런데 이 블로그 스킨이 아주 맘에 드네요, 혹시 공개된 스킨이라면 좀 알려주실 수 있으신가요? 이 스킨을 이용해서 한번 꾸며 보고 싶어서요
  5. 좋은정보 감사합니다 ^^
  6. 감사합니다.^^ 어렵지만 한 번 도전해 봐야 겠네요...
  7. 비밀댓글입니다
    • 2013.01.01 21:17 신고 [Edit/Del]
      소스 보시면 아시겠지만,
      검색창 전체가 하나의 이미지입니다. 해당이미지에 배경색을 넣어버리면 가장 쉽게 바꿀수 있겠죠^^*
  8. 행인
    참고 잘하고 갑니다~
  9. 만들긴 해야하는데 어떻게 배우질 못했내요 도움주실분있으면