■ 변경하는 부위 

- 아래 이미지처럼 타이틀 이미지 좌측 상단에 검색창을 달았습니다.
- 현재 제스킨의  검색창과는 차이가 있으니 주의해주시기 바랍니다.



■ 주의사항

- 지금검색창은 예전 초기 블로그스킨이라 검색창이 작고 왼쪽에 있는 스킨입니다. 
- 지금본문의 검색창처럼 하시고 싶으시면 http://nextgoal.tistory.com/440 포스팅을 참고해주세요



 

 검색창 변경방법




■ Skin.html 수정

- HTML/CSS 편집 모드로 간다.

- 해당부분의 모듈전체부분을 각 첨부도니 TXT파일의 내용으로 교체해주면 됩니다.
- 나만의 링크는 이름을 추천사이트로 변경했습니다.


여기서부터 ---------------------------------------------------------------->
<div id="header">
  <div class="head-container">
    <!-- 블로그제목 -->
    <h1><a href="[##_blog_link_##]" title="[##_title_##]">[##_title_##]</a></h1>
    <!-- 블로그메뉴 -->
    <div id="blogMenu">
     <ul>
      <!-- 블로그 사용 환경 (설치형/티스토리)에 맞게 아래 주석으로 처리된 메뉴를 활성화 시키시기 바랍니다. -->
      <li class="tab_home"><a href="[##_blog_link_##]" title="Home">Home</a></li>
      <li class="tab_tag"><a href="[##_taglog_link_##]" title="Tag">Tag</a></li>
      <li class="tab_media"><a href="[##_blog_link_##]media" title="MediaLog">MediaLog</a></li>
      <li class="tab_location"><a href="[##_localog_link_##]" title="LocationLog">LocationLog</a></li>
      <!-- <li class="tab_key"><a href="[##_keylog_link_##]" title="KeyLog">KeyLog</a></li> -->
      <li class="tab_guestbook"><a href="[##_guestbook_link_##]" title="Guestbook">Guestbook</a></li>
      <li class="tab_admin"><a href="[##_owner_url_##]" title="Admin">Admin</a></li>
      <li class="tab_write"><a href="[##_owner_url_##]/entry/post" title="Write">Write</a></li>
     </ul>
    </div>
    <div id="searchbar">
     <div class="searchbar-left"></div>
     <div class="searchbar-container">
      <!-- 검색 모듈 -->
      <div id="searchBox">
       <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>
      <!-- 카운터 모듈 -->
      <div id="counter">
       <ul>
        <li class="total"><span>Total | </span>[##_count_total_##]</li>
        <li class="today"><span>Today | </span>[##_count_today_##]</li>
        <li class="yesterday"><span>Yesterday | </span>[##_count_yesterday_##]</li>
       </ul>
      </div>
     </div>
     <div class="searchbar-right"></div>
    </div>
  </div>
 </div>
 <hr />
 <div id="body">
  <div id="content"> <--------------여기까지를 txt파일의 내용으로 교채해주면됩니다.
  <!-- 태그 -->
   <s_tag>



■ CSS 부분수정


여기서부터----->
/* 검색 */
#searchBox {float:left; margin-top:9px; padding-left:64px; background:url(images/txt_search.gif) no-repeat 7px 3px; }
#searchBox label {display:none; }
#searchBox input {
 width:160px;
 height:14px;
 border:1px solid #9A9A9A;
 background-color:#515151;
 color:#9A9A9A;
 vertical-align:middle; /* 검색창과 버튼 정렬이 안맞을 때 필수 */
 position:relative;
 cursor:pointer;
}
#searchBox .submit {
 width:22px; 
 height:16px;
 border:0px;
 background:url(images/btn_search.gif) no-repeat;
 text-indent:-5000px;
 overflow:hidden;
 vertical-align:middle; /* 검색창과 버튼 정렬이 안맞을 때 필수 */
 position:relative;
 cursor:pointer;
}
<-----------여기까지를 찾아서 txt파일의 내용으로 수정해주면됩니다.





좀더 자세히 바꾸는방법 보기


신고

댓글을 달아 주세요

  1. 앗...저 또한 스킨을 용의자 님으로부터 선물받은거였었는데 ㅠㅠ ㅋ

    사실..용의자님께서 초안잡아주실적에..개인적으로 검색창이 큼직해서 맘에 무척들었던 기억이 나네요^^
    님의 검색창도 시원~스레 멋지네요^^ 소개응용해주신점 감사합니다^^

    2010.03.18 20:38 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 우와!!정말 좋은글 입니다.
    제껀 검색창이 제법 괜춘한편이라 아직은 아니지만 나중에 스킨을 바꿀경우 아주 유용한 정보겠네요~ ㅎ

    2010.03.21 11:51 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 재미있게 읽어봐주셔서 감사합니다. ^^
      저도 아직은 실력이 없어서..
      스킨 땜빡식으로 밖에 응용이 안되네요 ㅠ
      나중에 내공이 쌓여서 조금더 자세하게 포스팅하는 날이 빨리 왔으면 좋겠네요 ^^;

      2010.03.21 12:03 신고 [ ADDR : EDIT/ DEL ]
  3. 좋은 팁 잘보았나이다.
    그런데 티비의 세상구경님...이 사용하시는 스킨은 어디서 구할수 있는가요 ^^
    완전 초짜인 저로서는 부럽기만 하다는...

    2010.03.23 12:55 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 저도 초보고 배워가는중인데.. 좋게봐주셔서감사합니다. ^^
      스킨 > 2단 > Life In Mono(Light) 이름의스킨이구요
      군대군대.. 제가 땜빵으로 고쳤어요.
      혹시 스킨 이것으로 바꾸시다가 막히는부분 있으면
      제가 도움드릴일 있으면 언제든지 이야기해주세요 ^^;;

      2010.03.23 13:07 신고 [ ADDR : EDIT/ DEL ]
  4. 음...네이버 블록은 참 안되는것도 많네요...ㅜ.ㅜ

    2010.03.23 13:57 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 티스토리로 옮기세요~~!!!
      저도 시작한지 얼마되지않아서 초대장이 나올지모르지만;
      나오면 꼭 하나 챙겨드릴께요 ^^

      2010.03.23 14:31 신고 [ ADDR : EDIT/ DEL ]
  5. 1.너무 좋은 글이네요. 저의 블로그에 바로 적용해 봐야 겠어요. 얼마전 구글 검색을 내렸거든요. 좋은 정보 감사합니다.
    2. 제가 방금 제 블로그에 적용했는데 스킨이 어울리지 않아 적용을 못 하겠더라구요. 이미지가 저한테는 너무 커서요.

    2010.03.30 22:43 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 제블로그 스킨에 이미지와 소스가 최적화가 되있어서 그래요 ㅠ
      필요하시면 조금 작게 만들어드릴께요
      가로세로 크기랑 원하는 색상이랑 이야기해주세요 ^^;
      (백전백승님 실력이 좋으셔서 저 이미지 가져가셔서 알아서 수정해서 쓰실걸로 믿어요 ^^)
      이미지가 다르면 소스위치는 직접 수정 해주셔야되요ㅠ

      2010.03.31 18:16 신고 [ ADDR : EDIT/ DEL ]
  6. 티비님 블로그엔 너무 너무 유용한 정보들이 많아서 좋아요^^ 감사합니다 유용히 쓰겠습니다!

    2010.04.02 15:21 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 참고해서 써봐야겠어요 ^^; 에헷~!

    2010.04.15 03:43 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 하노비님 방문해주셔서 감사합니다.!
      저는 검색창이 작은건 너무 답답해보이더라구요 ^^;;
      하노비님처럼 플래시잘하시는분은 더 참고해서 더멋진
      검색버튼을 만들수 있을것 같아요!!
      즐거운 하루시작하세요~!

      2010.04.15 04:45 신고 [ ADDR : EDIT/ DEL ]
  8. 티비님 안녕하세요~! 정말 감사하게도 티비님 홈에서 타이틀 꾸미는 거 보고 저도 타이틀 만들어봤어요.
    근데 질문이 있는데요. 제가 의도치 않게 블로그 메뉴가 가운데로 갔네요-_- 그래서 구글검색창도 가운데로 옮기고 싶은데 절대로 움직이지 않아요..ㅠㅠ 정말 제 힘으론 역부족이네요...ㅠㅠ 혹시 왜 그런지 알 수 있을까요?

    2010.05.11 01:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 왼쪽에 있던 타이틀을 삭제해줘서 메뉴바가 왼쪽으로 밀린것 같네요
      Life in mono 스킨을 제가 만든게 아니라서요
      저도 제마음대로 변경을 할수 있을지 모르겠지만
      정확히 타이틀 부분 어떻게 변경하고 싶으신지
      이야기해주시면 제가 한번 변경해볼께요 ^^;;
      -----------------------------------------
      그리고 http://nextgoal.tistory.com/375
      보시고 테이블 배경색 투명하게나 흰색으로 바꿔주세요 ^^;
      그래야 구글애드센스 광고가 깔끔하게 나와요!

      2010.05.11 06:53 신고 [ ADDR : EDIT/ DEL ]
    • 비밀댓글입니다

      2010.05.11 16:53 [ ADDR : EDIT/ DEL ]
    • 그냥 조금 알아요 ㅋㅋ
      구글광고는 깔끔하게 잘된것 같아요
      타이틀메뉴쪽은 구글검색창은 좋은것 같은데요
      나머지는 약간 손봐야될것 같긴하지만 나쁘진 않은것 같아요
      제 능력이 되면 나중에 약간 손좀 봐드릴께요 ^^;;;

      2010.05.11 19:15 신고 [ ADDR : EDIT/ DEL ]
  9. HTml 부분이랑 Css부분 둘다 변경해야하는건가요?

    2010.05.12 20:15 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 저두 티비님께 검색창을 선물로 받았지만,
    이제는 Life in mono 스킨의 달인이라 불러도 될 정도네요..

    2010.05.13 09:25 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 달콤한님 그때 뒤에 댓글 수정한거 보셨나요?
      아타락시아님도 아시는분이라 장난으로 단 댓글이였어요 ㅎㅎ
      그리고 아침부터 비행기는 안되요 ㅠㅠ
      저도 잘 몰라서 아직도 배우고 있는중이예요 ^^;

      2010.05.13 09:27 신고 [ ADDR : EDIT/ DEL ]
    • 네..ㅎㅎㅎ 봤어요..
      전 저한테 얘기하는줄 알았는데, 다시 보니 아타락시아님한테 얘기 하시는 거 였더라구요.

      2010.05.13 12:04 신고 [ ADDR : EDIT/ DEL ]
  11. 검색창을 왜 다는거죠??좋은점이 있나요ㅇㅅㅇ?

    2010.05.14 17:42 신고 [ ADDR : EDIT/ DEL : REPLY ]
  12. 잇힝.. 좋은 소식이네요..^^ 한번 적용해봐야겠어요..감사합니다.~~~

    2010.09.20 13:25 신고 [ ADDR : EDIT/ DEL : REPLY ]
  13. ㅎㅎ어려워요

    구글 검색창은어특케만들어요...


    구글네이버야후 검색창 다만들고싶은데...

    2010.09.29 11:59 신고 [ ADDR : EDIT/ DEL : REPLY ]
  14. ^^

    티비님 검색창 위치변경을 하고싶은데 어떻게 하는지 아시나요??

    2012.10.06 11:28 신고 [ ADDR : EDIT/ DEL : REPLY ]
  15. 이때부터 나이가 들어 성공하면 꼭 이차를 사겠다는 생각으로 포르쉐의 사진을 책상머리에 붙여두었다. 물론 이 꿈의 실현은 정말 어려운 일임을 아는 데는 그다지 많은 시간이 걸리지 않았지만

    2012.10.24 19:42 신고 [ ADDR : EDIT/ DEL : REPLY ]
  16. 은 게임을 처음 시작할때 커다란 보드판 같은 것은 없습니다. 플레이어들은 게임을 진행하면서 타일을 하나씩 놓게 되는데, 이 타일들이 서로 연결되면서 게임 말미에는 성이 많은 카르카손 지역 모양을 한 커다란 보드판이 만들어지게 됩니다.

    2012.10.30 05:43 신고 [ ADDR : EDIT/ DEL : REPLY ]
  17. 에서는 705명이라는 티오를 요구하였습니다. :: 꿀맛 이야기(행정안전부) :: 대규모 지진, 나

    2012.11.16 13:32 신고 [ ADDR : EDIT/ DEL : REPLY ]
  18. 비밀댓글입니다

    2013.01.01 18:13 [ ADDR : EDIT/ DEL : REPLY ]

티스토리 툴바