■ 변경하는 부위
- 아래 이미지처럼 타이틀 이미지 좌측 상단에 검색창을 달았습니다.
- 현재 제스킨의 검색창과는 차이가 있으니 주의해주시기 바랍니다.
■ 주의사항
- 지금검색창은 예전 초기 블로그스킨이라 검색창이 작고 왼쪽에 있는 스킨입니다.
- 지금본문의 검색창처럼 하시고 싶으시면 http://nextgoal.tistory.com/440 포스팅을 참고해주세요
검색창 변경방법
■ Skin.html 수정
- HTML/CSS 편집 모드로 간다.
- 해당부분의 모듈전체부분을 각 첨부도니 TXT파일의 내용으로 교체해주면 됩니다.
- 나만의 링크는 이름을 추천사이트로 변경했습니다.
검색창skin부분.txt여기서부터 ---------------------------------------------------------------->
<div id="header">
<div class="head-container">
<!-- 블로그제목 -->
<h1><a href="" title=""></a></h1>
<!-- 블로그메뉴 -->
<div id="blogMenu">
<ul>
<!-- 블로그 사용 환경 (설치형/티스토리)에 맞게 아래 주석으로 처리된 메뉴를 활성화 시키시기 바랍니다. -->
<li class="tab_home"><a href="" title="Home">Home</a></li>
<li class="tab_tag"><a href="" title="Tag">Tag</a></li>
<li class="tab_media"><a href="media" title="MediaLog">MediaLog</a></li>
<li class="tab_location"><a href="" title="LocationLog">LocationLog</a></li>
<!-- <li class="tab_key"><a href="" title="KeyLog">KeyLog</a></li> -->
<li class="tab_guestbook"><a href="" title="Guestbook">Guestbook</a></li>
<li class="tab_admin"><a href="" title="Admin">Admin</a></li>
<li class="tab_write"><a href="/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="" value="" onkeypress="if (event.keyCode == 13) { }"/>
<input value="검색" type="button" onclick="" class="submit"/>
</s_search>
</div>
<!-- 카운터 모듈 -->
<div id="counter">
<ul>
<li class="total"><span>Total | </span></li>
<li class="today"><span>Today | </span></li>
<li class="yesterday"><span>Yesterday | </span></li>
</ul>
</div>
</div>
<div class="searchbar-right"></div>
</div>
</div>
</div>
<hr />
<div id="body">
<div id="content"> <--------------여기까지를 txt파일의 내용으로 교채해주면됩니다.
<!-- 태그 -->
<s_tag>
<div id="header">
<div class="head-container">
<!-- 블로그제목 -->
<h1><a href="" title=""></a></h1>
<!-- 블로그메뉴 -->
<div id="blogMenu">
<ul>
<!-- 블로그 사용 환경 (설치형/티스토리)에 맞게 아래 주석으로 처리된 메뉴를 활성화 시키시기 바랍니다. -->
<li class="tab_home"><a href="" title="Home">Home</a></li>
<li class="tab_tag"><a href="" title="Tag">Tag</a></li>
<li class="tab_media"><a href="media" title="MediaLog">MediaLog</a></li>
<li class="tab_location"><a href="" title="LocationLog">LocationLog</a></li>
<!-- <li class="tab_key"><a href="" title="KeyLog">KeyLog</a></li> -->
<li class="tab_guestbook"><a href="" title="Guestbook">Guestbook</a></li>
<li class="tab_admin"><a href="" title="Admin">Admin</a></li>
<li class="tab_write"><a href="/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="" value="" onkeypress="if (event.keyCode == 13) { }"/>
<input value="검색" type="button" onclick="" class="submit"/>
</s_search>
</div>
<!-- 카운터 모듈 -->
<div id="counter">
<ul>
<li class="total"><span>Total | </span></li>
<li class="today"><span>Today | </span></li>
<li class="yesterday"><span>Yesterday | </span></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파일의 내용으로 수정해주면됩니다.
/* 검색 */
#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파일의 내용으로 수정해주면됩니다.
좀더 자세히 바꾸는방법 보기
재료.zip
TAG <div>,
<input>,
input,
Life in Mono,
searchbox,
검색,
검색창,
검색창글씨크기,
달기,
따라잡기,
머니야머니야,
머니야머니야님,
태그,
티스토리,
파워블로그,
폼나는
블로그소식/체험/기자단정보
댓글을 달아 주세요
앗...저 또한 스킨을 용의자 님으로부터 선물받은거였었는데 ㅠㅠ ㅋ
2010/03/18 20:38 [ ADDR : EDIT/ DEL : REPLY ]사실..용의자님께서 초안잡아주실적에..개인적으로 검색창이 큼직해서 맘에 무척들었던 기억이 나네요^^
님의 검색창도 시원~스레 멋지네요^^ 소개응용해주신점 감사합니다^^
제가 오히려 더 감사하죠~
2010/03/18 20:41 [ ADDR : EDIT/ DEL ]검색창 큰거달고 나니깐 속이다 뻥뚫리더라구요ㅋ
우와!!정말 좋은글 입니다.
2010/03/21 11:51 [ ADDR : EDIT/ DEL : REPLY ]제껀 검색창이 제법 괜춘한편이라 아직은 아니지만 나중에 스킨을 바꿀경우 아주 유용한 정보겠네요~ ㅎ
재미있게 읽어봐주셔서 감사합니다. ^^
2010/03/21 12:03 [ ADDR : EDIT/ DEL ]저도 아직은 실력이 없어서..
스킨 땜빡식으로 밖에 응용이 안되네요 ㅠ
나중에 내공이 쌓여서 조금더 자세하게 포스팅하는 날이 빨리 왔으면 좋겠네요 ^^;
좋은 팁 잘보았나이다.
2010/03/23 12:55 [ ADDR : EDIT/ DEL : REPLY ]그런데 티비의 세상구경님...이 사용하시는 스킨은 어디서 구할수 있는가요 ^^
완전 초짜인 저로서는 부럽기만 하다는...
저도 초보고 배워가는중인데.. 좋게봐주셔서감사합니다. ^^
2010/03/23 13:07 [ ADDR : EDIT/ DEL ]스킨 > 2단 > Life In Mono(Light) 이름의스킨이구요
군대군대.. 제가 땜빵으로 고쳤어요.
혹시 스킨 이것으로 바꾸시다가 막히는부분 있으면
제가 도움드릴일 있으면 언제든지 이야기해주세요 ^^;;
음...네이버 블록은 참 안되는것도 많네요...ㅜ.ㅜ
2010/03/23 13:57 [ ADDR : EDIT/ DEL : REPLY ]티스토리로 옮기세요~~!!!
2010/03/23 14:31 [ ADDR : EDIT/ DEL ]저도 시작한지 얼마되지않아서 초대장이 나올지모르지만;
나오면 꼭 하나 챙겨드릴께요 ^^
1.너무 좋은 글이네요. 저의 블로그에 바로 적용해 봐야 겠어요. 얼마전 구글 검색을 내렸거든요. 좋은 정보 감사합니다.
2010/03/30 22:43 [ ADDR : EDIT/ DEL : REPLY ]2. 제가 방금 제 블로그에 적용했는데 스킨이 어울리지 않아 적용을 못 하겠더라구요. 이미지가 저한테는 너무 커서요.
제블로그 스킨에 이미지와 소스가 최적화가 되있어서 그래요 ㅠ
2010/03/31 18:16 [ ADDR : EDIT/ DEL ]필요하시면 조금 작게 만들어드릴께요
가로세로 크기랑 원하는 색상이랑 이야기해주세요 ^^;
(백전백승님 실력이 좋으셔서 저 이미지 가져가셔서 알아서 수정해서 쓰실걸로 믿어요 ^^)
이미지가 다르면 소스위치는 직접 수정 해주셔야되요ㅠ
티비님 블로그엔 너무 너무 유용한 정보들이 많아서 좋아요^^ 감사합니다 유용히 쓰겠습니다!
2010/04/02 15:21 [ ADDR : EDIT/ DEL : REPLY ]유용하게 봐주셔서 감사해요!
2010/04/02 15:31 [ ADDR : EDIT/ DEL ]사이드 메뉴바 변경 성공하시고~
트랙백에 남겨주세요 !!! ㅋㅋ
참고해서 써봐야겠어요 ^^; 에헷~!
2010/04/15 03:43 [ ADDR : EDIT/ DEL : REPLY ]하노비님 방문해주셔서 감사합니다.!
2010/04/15 04:45 [ ADDR : EDIT/ DEL ]저는 검색창이 작은건 너무 답답해보이더라구요 ^^;;
하노비님처럼 플래시잘하시는분은 더 참고해서 더멋진
검색버튼을 만들수 있을것 같아요!!
즐거운 하루시작하세요~!
티비님 안녕하세요~! 정말 감사하게도 티비님 홈에서 타이틀 꾸미는 거 보고 저도 타이틀 만들어봤어요.
2010/05/11 01:10 [ ADDR : EDIT/ DEL : REPLY ]근데 질문이 있는데요. 제가 의도치 않게 블로그 메뉴가 가운데로 갔네요-_- 그래서 구글검색창도 가운데로 옮기고 싶은데 절대로 움직이지 않아요..ㅠㅠ 정말 제 힘으론 역부족이네요...ㅠㅠ 혹시 왜 그런지 알 수 있을까요?
왼쪽에 있던 타이틀을 삭제해줘서 메뉴바가 왼쪽으로 밀린것 같네요
2010/05/11 06:53 [ ADDR : EDIT/ DEL ]Life in mono 스킨을 제가 만든게 아니라서요
저도 제마음대로 변경을 할수 있을지 모르겠지만
정확히 타이틀 부분 어떻게 변경하고 싶으신지
이야기해주시면 제가 한번 변경해볼께요 ^^;;
-----------------------------------------
그리고 http://nextgoal.tistory.com/375
보시고 테이블 배경색 투명하게나 흰색으로 바꿔주세요 ^^;
그래야 구글애드센스 광고가 깔끔하게 나와요!
비밀댓글입니다
2010/05/11 16:53 [ ADDR : EDIT/ DEL ]그냥 조금 알아요 ㅋㅋ
2010/05/11 19:15 [ ADDR : EDIT/ DEL ]구글광고는 깔끔하게 잘된것 같아요
타이틀메뉴쪽은 구글검색창은 좋은것 같은데요
나머지는 약간 손봐야될것 같긴하지만 나쁘진 않은것 같아요
제 능력이 되면 나중에 약간 손좀 봐드릴께요 ^^;;;
HTml 부분이랑 Css부분 둘다 변경해야하는건가요?
2010/05/12 20:15 [ ADDR : EDIT/ DEL : REPLY ]네.. 그런데 Life in mono 스킨에 최적화라서요 ^^;
2010/05/12 20:45 [ ADDR : EDIT/ DEL ]다른 스킨이면 조금 응용하셔야되요!
저두 티비님께 검색창을 선물로 받았지만,
2010/05/13 09:25 [ ADDR : EDIT/ DEL : REPLY ]이제는 Life in mono 스킨의 달인이라 불러도 될 정도네요..
달콤한님 그때 뒤에 댓글 수정한거 보셨나요?
2010/05/13 09:27 [ ADDR : EDIT/ DEL ]아타락시아님도 아시는분이라 장난으로 단 댓글이였어요 ㅎㅎ
그리고 아침부터 비행기는 안되요 ㅠㅠ
저도 잘 몰라서 아직도 배우고 있는중이예요 ^^;
네..ㅎㅎㅎ 봤어요..
2010/05/13 12:04 [ ADDR : EDIT/ DEL ]전 저한테 얘기하는줄 알았는데, 다시 보니 아타락시아님한테 얘기 하시는 거 였더라구요.
검색창을 왜 다는거죠??좋은점이 있나요ㅇㅅㅇ?
2010/05/14 17:42 [ ADDR : EDIT/ DEL : REPLY ]나중에 본문에 내용이 많아지면 검색창으로
2010/05/14 17:59 [ ADDR : EDIT/ DEL ]검색하면 편하잖아요 ^^;;
잇힝.. 좋은 소식이네요..^^ 한번 적용해봐야겠어요..감사합니다.~~~
2010/09/20 13:25 [ ADDR : EDIT/ DEL : REPLY ]유용하게 봐주셔서 감사드려요 ^^
2010/09/20 14:37 [ ADDR : EDIT/ DEL ]즐거운 하루되세요~!
구글 검색창은어특케만들어요...
2010/09/29 11:59 [ ADDR : EDIT/ DEL : REPLY ]구글네이버야후 검색창 다만들고싶은데...
구글애드센스 검색창 설치하는 방법은
2010/09/29 12:00 [ ADDR : EDIT/ DEL ]http://nextgoal.tistory.com/645 <- 참고하시면되세요 ^^;
티비님 검색창 위치변경을 하고싶은데 어떻게 하는지 아시나요??
2012/10/06 11:28 [ ADDR : EDIT/ DEL : REPLY ]이때부터 나이가 들어 성공하면 꼭 이차를 사겠다는 생각으로 포르쉐의 사진을 책상머리에 붙여두었다. 물론 이 꿈의 실현은 정말 어려운 일임을 아는 데는 그다지 많은 시간이 걸리지 않았지만
2012/10/24 19:42 [ ADDR : EDIT/ DEL : REPLY ]은 게임을 처음 시작할때 커다란 보드판 같은 것은 없습니다. 플레이어들은 게임을 진행하면서 타일을 하나씩 놓게 되는데, 이 타일들이 서로 연결되면서 게임 말미에는 성이 많은 카르카손 지역 모양을 한 커다란 보드판이 만들어지게 됩니다.
2012/10/30 05:43 [ ADDR : EDIT/ DEL : REPLY ]에서는 705명이라는 티오를 요구하였습니다. :: 꿀맛 이야기(행정안전부) :: 대규모 지진, 나
2012/11/16 13:32 [ ADDR : EDIT/ DEL : REPLY ]비밀댓글입니다
2013/01/01 18:13 [ ADDR : EDIT/ DEL : REPLY ]