제 블로그의 예전 메뉴는 이미지로 만들어져 있어서 매번 수정할때마다,
포토샵으로 작업을 해줘야 되고
이미지라 불러오는데 로딩시간도 많이 잡아 먹는 편이라
이번 기회에 텍스트로 롤오버 메뉴를 만들어봤습니다.  (티스토리 기준으로 포스팅했습니다.)


STep.01 HTML 수정

1. 블로그 관리 > 스킨 > HTML/CSS편집 메뉴에 접속합니다.

2. Skin.html의 원하는 위치에 메뉴html.txt의 내용을 넣어줍니다.

<div id="menu">
 <ul>
  <li><a href="링크주소" class="current">처음으로</a></li>
  <li><a href="링크주소">태그</a></li>
  <li><a href="링크주소">미디어로그</a></li>
  <li><a href="링크주소">방명록</a></li>
  <li><a href="링크주소">관리자</a></li>
  <li><a href="링크주소">글쓰기</a></li>        
 </ul>
</div>  

3. 각 굵은 글씨에 원하는 링크주소와 메뉴이름으로 수정해주시면 됩니다.
 (기본은 링크가 모두 설정되어있습니다. )

4. 기본배경색과 롤오버시 색상, 글씨크기 변경등은 Step.02 CSS추가에서 수정하시면됩니다.



STep.02 CSS 추가  

1. 블로그 관리 > 스킨 > HTML/CSS편집 메뉴에 접속합니다.

2. Style.css부분 제일 하단에 메뉴css.txt의 내용을 추가시켜줍니다.

#menu{
 }
  #menu ul{
   list-style:none;
  }
   #menu li{
    list-style:none;
    display:block;
    float:left;
    height:40px;      <- 높이
    line-height:40px;  <- 줄간격
   
   }
    #menu li a{   ( 기본 메뉴 설정 )
     display:block;
     float:left;
     color:#ffffff;         <- 글씨색깔  
     font-size:16px;    <- 글씨크기
     font-weight:bold;
     line-height:40px;   <- 줄간격
     text-decoration:none;
     padding:0 25px;     <- 글자의 0(위아래여백) 25px(좌우여백)
     background:#000000;   <-  배경색깔
    }
     #menu li a:hover{ ( 마우스 올려놓았을때 설정 )
      color:#fffff;  <- 마우스 올려놓았을때 글씨색깔
      background:#E99207;    <- 마우스 올려놓았을때 배경색깔
     }
   

3. 메뉴의 글씨크기, 색, 배경색등을 수정하시려면 위의 파란박스 내용을 참고 하시면 됩니다.



STep.03 사용예시 ( Life in Mono 스킨 ) 

모든 브라우저에서 오류가 없으면 바로 포스팅할 예정입니다. 



후기

지금 막 블로그 상단에 적용하고 테스트 중입니다. CSS는 익숙하지 않아서 
잘못된 설명이나 잘못된 부분이 있으면 댓글로 이야기해주시면 감사하겠습니다.




신고

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 전 저 블로그 매뉴 html 만지다가.. 실페해서 삐뚤어졌거든요..
    그래서 새로운 스킨으로 했어요..^^

    2010.09.24 12:57 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 요즘 스킨팁을 자주 올리시네요~ ^^
    이거 슬슬 입질이 ㅠㅠ

    2010.09.24 13:58 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 요즘 팀블로그나 영문블로그를 하나 만드려고~
      여러 사이트들을 구경하다보니~ ^^;;;
      스킨밖에 눈에 안들어오는것 같아요 ㅎㅎ
      즐거운 주말보내세요~!

      2010.09.24 14:01 신고 [ ADDR : EDIT/ DEL ]
  4. 비밀댓글입니다

    2010.09.24 14:21 [ ADDR : EDIT/ DEL : REPLY ]
  5. 아... 이런것들이 너무 어려워요 ㅠㅠ...

    하나하나 공부해야 되는데 바쁘기만 할 뿐이고 ㅠㅠ

    2010.09.24 16:24 신고 [ ADDR : EDIT/ DEL : REPLY ]
  6. 또 하나의 좋은 스킬을 습득했네요 ㅎㅎ

    최근에 제가 아는 남자유치원선생님이 티스토리 블로그 운영을 시작하셨는데~ 사부님도 많이 도움주세요 ㅎㅎ

    티스토리 운영하라고 꼬시는데 많은 시간이 걸렸습니다. 이분은 진짜 유치원선생님이에요 ^^

    http://angel4children.tistory.com/

    2010.09.24 19:01 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 아... 이건 제 스킨에선 해당사항이 없다는.. ㅠ.ㅠ

    2010.09.24 19:55 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. 울서익군 요즘 이 작업에 재미들여
    계속 만지작거려 아주 고수가 다 되어갑니다..^^
    다 티비님 덕분 같아요~~^^*
    고마워요~~^^

    2010.09.24 22:52 신고 [ ADDR : EDIT/ DEL : REPLY ]
  9. 요즘 티비님 블로그 꾸미기 공부중입니다.
    응용까지는 아니고 약간 변형시켜서 시도하고 있는데
    요거시 쉽지가 않네요...ㅎㅎ
    많은 지도 부탁드려요.
    맨날 부탁만 하네요...죄송

    2010.09.25 01:01 신고 [ ADDR : EDIT/ DEL : REPLY ]
  10. 비밀댓글입니다

    2010.09.25 06:29 [ ADDR : EDIT/ DEL : REPLY ]
  11. 저 어떡해요?
    제 블로그메뉴는 도저히 육안으로 식별이 안되는 상황이라
    님의 글을 본 순간 제 눈이 확 띄었는데 문제는 제가 좀 컴맹이라
    그런지 아니면 잘못 이해를 해서 그런지 안되는 데요.
    이보다 더 쉽게 설명을 하실 수는 없을텐데...
    이노릇을 어찌해야할지?
    사람들이 게스트북이 어딨는지를 못찾거든요 잉잉잉...

    2010.09.25 07:38 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • Houstoun님은 지금 메뉴가 아니라~
      메뉴 하나하나 이미지를 변경해주시는게
      좋은것 같아요 다음에 스킨이름 이야기해주시면~
      제가 수정하는 방법 이야기해드릴께요!!

      2010.09.25 18:39 신고 [ ADDR : EDIT/ DEL ]
  12. 역시 대단하십니다. 좋은 정보 감사드립니다 ^^!

    2010.09.25 17:38 신고 [ ADDR : EDIT/ DEL : REPLY ]
  13. 아~ 이젠 상단 메뉴가 이미지가 아닌 텍스트 형식인거군요?
    대단하십니다 정말 ^^
    저또한 티비님 스킨을 토대로 스킨사용중이고 많은 분들이 티비님 스킨을 참고하는듯해요
    좋은 정보 공유해주시는점 감사합니다!

    2010.09.26 07:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
  14. 정주행 했습니다. 유익한글 잘 보고 갑니다. ㅋ

    2010.11.06 14:02 신고 [ ADDR : EDIT/ DEL : REPLY ]
  15. 이거 제블로그 스킨에도 적용이될까요?
    요즘 자꾸 스킨을 티비님이나 여우님꺼로 바꾸고 싶네요..
    근데 갑자기 또 스킨바꿀려면 너무 손대야할부분이 많아져서 고민고민...
    이번에 티스토리에서나온 메뉴설정기능..그거도 제 스킨에선 안먹히더라구요
    적용시키니까 글자가 안보임 ㅠㅠ 그래서 원상복구해놨답니다..

    2010.11.06 15:04 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 저도 제 스킨외에는 다른스킨은 잘 몰라서요 ^^;;
      nextgoal@naver.com 으로 팀블로그로
      초대해주시면 되는지 한번볼께요~!!!

      2010.11.06 15:15 신고 [ ADDR : EDIT/ DEL ]
  16. 아~~ 도전해야 하는데 용기가 안나네요
    항상 티비님 블로그 왔다 갔다 거리며 스킨 공부 열심히 하고 있습니다 감사드려요

    2010.11.08 23:50 신고 [ ADDR : EDIT/ DEL : REPLY ]
  17. 티비님 덕분에 저도 테스트 겸 적용중입니다.
    아직 부족한데 폰트는 어디서 바꾸는 건지 적용이 잘 안되네요. ^-^;;
    감사한 포스팅입니다. ㅎ

    2010.12.26 02:05 신고 [ ADDR : EDIT/ DEL : REPLY ]
  18. 라핀 모노 스킨에 skin.html에 소스 집어넣을때 아무곳이나 집어넣으면 아무 위치로 갑니다... -_-;; 수정좀요

    2011.01.09 21:53 신고 [ ADDR : EDIT/ DEL : REPLY ]
  19. 안녕하세요 티비님...항상 티비님의 블로그를 보면서...많이 도움이 되고 있습니다.
    질문 하나만 드릴께요 . 메뉴라인의 배경 색깔을 바꾸려고 배경색깔에서 변경을 해도 절반 색깔이 바뀌는 이상
    한 현상이 발생하는데..제가 잘못 바꾼 것인가요 backroun:#bdbdbd 로 바꾸니...메뉴 글씨 있는 부분 까지만
    색상이 회삭으로 바뀌고..나머지 부분은 검정색..ㅠㅠ 조언점 부탁 드립니다.

    2011.05.25 22:42 신고 [ ADDR : EDIT/ DEL : REPLY ]
  20. 비밀댓글입니다

    2011.07.07 14:20 [ ADDR : EDIT/ DEL : REPLY ]
  21. 악, 글씨색 바꾸는 걸 어떻게 찾아야하나 더듬더듬하다가, 요 포스팅보고 단번에 성공해서 기뻐요 ㅠ_ㅠ 2년정도 티스토리를 방치해두다가 오늘 새로 블로그를 만들고 처음으로 끙끙대고 스킨에 골몰하는 중인데, 하나씩하나씩 붙잡고 만드는 재미가 있는것 같습니다. 어디서 뭘 찾아야 할지 막막한 가운데 혜성같이 나타난 블로그네요 :D 앞으로도 자주자주 참고하겠습니다 ^^ 고맙습니다!!

    2011.07.29 22:19 신고 [ ADDR : EDIT/ DEL : REPLY ]

티스토리 툴바