티스토리 블로그의 메뉴를 자신의 마음데로 변경이 가능합니다.
얼마전부터 기본적으로도 티스토리 메뉴 변경을 지원하고 있죠.

기본적으로 제공해주는 메뉴 설정 방법이 아닌, HTML과 CSS 수정으로도 메뉴 변경이 가능합니다.

기본 메뉴설정으로 메뉴 꾸미는 방법 -  티스토리, 개성있는 메뉴 만들기


HTML 추가하기

<!-- 블로그메뉴 -->
<div id="blogMenu">
    <ul>
        <li><a href="[##_blog_link_##]" title="처음으로">처음으로</a></li>
        <li><a href="/category/아이폰4" title="아이폰4">아이폰4</a></li>
      <li><a href="/category/블로그/블로그꾸미기" title="블로그꾸미기">블로그꾸미기</a></li>
      <li><a href="/category/리뷰" title="리뷰">리뷰</a></li>
      <li><a href="/category/일상생활/사진이야기" title="사진이야기">사진이야기</a></li>
        <li><a href="[##_guestbook_link_##]" title="방명록">방명록</a></li>
    </ul>
</div>

가장 먼저 자신이 변경할 HTML 부분을 찾아야겠죠?
찾기(Ctrl + F)를 눌르신 후 blogMenu 를 찾으시면 됩니다.
찾으신 <div id="blogMenu"> 안에 위와 같은 코드를 작성하시면 되죠 ^^

만약, 기존 메뉴에 있던것을 사용하고 싶으시다면 그대로 코드를 사용하시면 됩니다.
추가하고 싶은 메뉴들만 직접 작성하면 되죠~

저는 처음으로와 방명록만 기존에 있던 메뉴 그대로 사용했습니다.^^


링크 지정해주기

메뉴를 추가했다면 이동할 링크를 지정해줘야겠죠?
링크 URL을 확인하는 방법은 간단합니다.


자신의 블로그에서 원하는 카테고리를 선택하면,
브라우저 주소창의 URL이 변경되는 모습을 볼 수 있습니다.

<li><a href="/category/카테고리" title="카테고리">카테고리</a></li>

세 부분을 똑같이 작성해주시면 끝!!!


CSS 수정하기


제 블로그를 기준으로 설명드릴게요 ^^
기본적으로 하늘색 바탕에 마우스를 올리게 되면 파란색으로 변경이 됩니다.

#blogMenu {overflow:hidden;height:38px;background-color:#3281B9; }
#blogMenu ul li {float:left; }
#blogMenu a {overflow:hidden;float:left;height:26px;padding:6px 10px;font-size:16px;font-weight:bold;cursor:pointer;text-align:center;color:#fff;text-decoration:none}
#blogMenu a:hover{background-color:#003478}

첫번째 색상(#blogMenu)은 기본 바탕색이고,
두번째 색상(#blogMenu a:hover)은 마우스를 올렸을때 나타나는 색상입니다.


언제든지 스킨 관련 궁금한 사항이 있다면
댓글 또는 방명록에 남겨주세요 ^^


신고
Posted by 별군

댓글을 달아 주세요

  1. 처음에 티스토리와서 스킨떄문에 어려울때 별님하고 티비님만 있었으면
    완전해결되었을텐데.. ㅠㅠ
    지금은 아주 든든한 아군들이 있어서 너무 좋습니다. ^^

    2010.11.23 08:41 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 비밀댓글입니다

    2010.11.23 08:49 [ ADDR : EDIT/ DEL : REPLY ]
    • 네. 지금은 메뉴설정이 있어서 더 편하게도 되지용 ^^
      그 전에 하는법을 적어놔서 이번엔 그냥 치환자 안쓰고도 할 수 있는것을 찾아봤어요.ㅋ

      2010.11.23 09:44 신고 [ ADDR : EDIT/ DEL ]
  3. 아옥..저도 언제한번 해볼까..했었는데 덕분에 좋은팁 주시니 정말 감사합니당^^

    2010.11.23 09:20 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 처음에 이런 것 찾느라 정말 고생했었는데, 좀 더 일찍올려주시지 그러셨어요!^^
    (농담인거 아시죠^^?)

    2010.11.23 10:04 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 초보자분들에는 정말 유용한 팁입니다.
    잘보고갑니다~

    2010.11.23 10:55 신고 [ ADDR : EDIT/ DEL : REPLY ]
  6. 저도 기본 지원 스킨이 아니라 이런식으로 변경을 해줘야 해요 ㅎㅎㅎ

    2010.11.23 11:21 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 두가지 방법이 있어요~
      메뉴설정 치환자를 추가하는 방법과 그냥 HTML 수정하는 방법 ~
      쉬운건 그래도 치환자를 추가하는게 쉬울것 같아요

      2010.11.23 12:04 신고 [ ADDR : EDIT/ DEL ]
  7. 늘 메뉴부분 보면서 안습이었는데..
    좋은 팁입니다..
    좋은 하루 보내세요~~

    2010.11.23 13:58 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. 아하~ 생각보다는 간단(?)하네요.
    그럼 마우스를 갖다대면 색깔 변하는 거, 다른곳에도 hover써서 색깔 지정하면 되는건가요?
    걍 궁금해서요.
    별군님 덕에 저도 태그에 눈을 떠가는거 같아요.ㅋㅋㅋ

    2010.11.23 14:10 신고 [ ADDR : EDIT/ DEL : REPLY ]
  9. 기본형의 메인메뉴는 좀 쓸만하지 못한 것 같아요.
    저도 조만간 바꿔봐야 겠습니다.^^

    2010.11.23 23:49 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 지원해주는 메뉴설정을 잘 이용하시면 쉽게 변경할 수 있답니다 ^^

      2010.11.24 00:03 신고 [ ADDR : EDIT/ DEL ]
  10. 좋은팁 보고 갑니다.~

    2010.11.25 14:01 신고 [ ADDR : EDIT/ DEL : REPLY ]
  11. ㅇ ㅏ .... 엄청나게 따라해봤는데... 절대 쉽지가 않네요 ㅡ_ㅜ 모양이 비슷해지면 저는 및에 서치바+카운터가 남아서ㅜ_ㅜ 그걸 다 드러내야하는걸까요? ㅜ_ㅜ 그리고 메뉴바가 글씨 입력한부분까지만 나오네요... 메뉴바 사이즈 설정은 별도로 안해주나요?

    완전 초보가 하려니 눈물만 납니다..ㅡ_ㅜ

    2011.03.21 16:41 신고 [ ADDR : EDIT/ DEL : REPLY ]
  12. 저는 왜 컨트롤+f로 div id="blogmenu 라고 검색을 하면 아무것도 안나올까요?ㅠㅠ

    메뉴를 변경하고 싶은데 관리자모드에 있는 제 소스가 좀 다른가봐요.. 가입한지 3일밖에안되었는데말이죠 ㅠ

    2012.02.17 16:42 신고 [ ADDR : EDIT/ DEL : REPLY ]


티스토리 툴바