One's Life Story/in On-line2010. 7. 17. 15:31



블로그를 홈페이지처럼 만들기 - 블로그에 상단 메뉴바 달기

제 눈높이에서 블로그에 상단바를 만들어 넣기가 쉽지가 않더군요! 다른 분들은 어떻게 그렇게 잘 들 만들어 넣으시던지 대단하시더군요! css와 html을 잘 알지 못하는 제가 만들면서 참고했던 블로거님들입니다. 티비의 세상구경님Adios님, Kay님, 등이 있습니다. 다시한번 고맙다는 인사드리고 싶네요!!
해보면서 어느 정도는 이해가 되더군요!!






블로그에 상단 메뉴바 달기전


블로그에 상단 메뉴바를 만들어 넣은 후




상단바를 쉽게 만드는 방법중에서 다이나믹드라이브의 css 라이브러리를 이용하는 방법들이 주로 사용되었네요!
그래서 저도 http://www.dynamicdrive.com 로 방문을 하였답니다.




빨간색의 css library에 들어간 후 Horizontal CSS Menus를 클릭하면 상단 메뉴바의 데모들이 쭈욱 나오게 됩니다.
그중 마음에 드시는 것을 골라 작업을 시작하시면 되겠습니다.
쭈욱 둘러보니 다이나믹드라이브에는 상단바 말고도 꽤 쓸만한 것들이 있더군요~
일단, 저는 휜색 스킨과 검색바와 방문자 카운터 라인의 진한회색에 어울릴만한 것으로 선택을 했답니다.



심플하면서도 맘에 들더군요! 언더바의 색만 바꾸어 주면 괜찮다 싶어서 선택을 하게 되었네요!
클릭을 하여 들어가 보니 데모와 css, html 소스가 보입니다.


먼저 CSS코드를 복사하여 티스토리 관리자의 스킨 html에 붙여넣기를 합니다.


알기 쉽게 표시를 해두었는데요! "<!--블로그상단메뉴 -->" 이 부분은 없어도 되니까 </head>부분 바로 위해 복사한 css를 붙여넣으시면 된답니다.


다음은 html 소스를 넣어야 하는데요! 마찬가지로 복사하여 지정된 자리에 붙여넣기를 해주시면 됩니다.



위에 표시했던 자리로 들어가게 붙여넣기를 해주시면 되는데요! 이 때 블로그 사용에 불편을 없애기 위해서는 Home, guestbook, admin, write 부분은 남겨두시는 것이 좋답니다. 입맛에 따라 남겨둘 것은 남겨두시면 되겠죠! 나머지는 직접 가고자 하는 링크주소를 입력하면 됩니다.
이부분을 저는 다음과 같이 수정을 했답니다.


<div class= 부분이 바뀌었구요!
홈은 그대로 유지, 나머지 링크는 원하는 링크로 수정을 했답니다.

여기서 한가지

<li><a href="##blog_link_##]" title="마우스 올렸을 때 나오는 텍스트">메뉴제목 텍스트</a></li>


이렇게 넣어주시면 마우스를 가져다 될 때 메뉴제목 밑으로 살짝 박스가 뜨며 입력한 title이 표기가 됩니다.


그리고 언더라인의 색을 바꾸고자 할 경우에는 붙여넣기 했던 CSS소스의 마지막 부분인

.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: black;
}

</style>


black를 바꾸어 주시면 됩니다. red등으로 기입하셔도 되고요! 저의 경우에는 #17A3DD를 넣어주었답니다. ^^


이렇게 완료를 하면 다음과 같은 모습으로 바뀌게 된답니다.



이 정도면 어느 홈페이지 안 부럽죠? ^^

혹시나 해서 질문도 드려봅니다.
익스플로서 8에서 혹시 깨지는 분들 있으신가요? 왜 그런가요? ㅋㅋ(호환해서 보면 되긴 하겠지만)


Posted by 보라곰!

댓글을 달아 주세요

  1. 미용실 다녀왔어요.
    쌈빡하게 머리하고 왔어요.
    비가 와서 그런지 주말인데도, 손님이 별로 없더군요.
    그래서 좋았습니다. ㅎㅎㅎ

    2010.07.17 16:47 [ ADDR : EDIT/ DEL : REPLY ]
    • ㅋㅋ 켄님~ 좋았어요? 인증샷~ ㅎㅎ
      비가와서 그런지 다들 집에만 있으려나봐요!!
      저도 헤어샵 가야 하는데 ㅋㅋ 좋은 하루 되세요!

      2010.07.17 17:26 신고 [ ADDR : EDIT/ DEL ]
  2. 음... 저도 상단바 만드는게 어려워서 그냥 냅두고 있었는데.....
    좋은 정보를 주셨네요.. 한번 참고해 봐야겠어요... ^^

    2010.07.17 23:52 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 저도 첨엔 3시간 정도 걸린거 같아요!
      소스들이 잘 안되는 것들이 있더라구요! ^^
      파란연필님 좋은 주말 되세요~~

      2010.07.18 00:20 신고 [ ADDR : EDIT/ DEL ]
  3. 그러잖아도 궁금했던 부분인데 보라곰님께서 긁어주시네요.
    역시 블로그 이웃이 최고입니다...ㅎㅎ
    일요일 재밌는 시간 보내세요.^^

    2010.07.18 06:29 [ ADDR : EDIT/ DEL : REPLY ]
  4. 흠... 관심이 많았던 내용입니다.
    하지만 잘 알지 못했던 분야이다 보니 그렇게 넘어가고 있었지요.
    언젠가 마음이 바뀌게 되면 저도 한번 시도해봐야 되겠습니다.

    2010.07.18 12:15 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 비밀댓글입니다

    2010.07.19 20:39 [ ADDR : EDIT/ DEL : REPLY ]
  6. 헤드위쪽에 스크립트 소스를 넣고~ html 부분만 붙여넣으면~
    멋진 메뉴가 완성되네요~! 저도 사이드바 메뉴만드는데 활용해야겠어요 ^^
    잘 배우고 갑니다. !!

    2010.07.19 20:40 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 오호.. 쉬운 듯 어려운 듯 한데요. 나중에 스킨 바꾸게 되면 도전해보겠습니다.^^;

    2010.08.20 14:59 신고 [ ADDR : EDIT/ DEL : REPLY ]