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


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

제 눈높이에서 블로그에 상단바를 만들어 넣기가 쉽지가 않더군요! 다른 분들은 어떻게 그렇게 잘 들 만들어 넣으시던지 대단하시더군요! 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에서 혹시 깨지는 분들 있으신가요? 왜 그런가요? ㅋㅋ(호환해서 보면 되긴 하겠지만)