블로그 상단에 메뉴를 넣어보자

티스토리는 메뉴바를 기본 제공 하고 있지 않아서
해당 블로그 운영자가 아니면 쉽게 이곳저곳을 찾아보기가 힘든게 사실이죠?
방문자들이 보다 쉽게 블로그 곳곳을 찾아다닐 수 있는 메뉴바를 넣어봅시다.

메뉴 고르기

CSS Library 라는 해외 싸이트가 있는데
이곳에 가면 꽤 괜찮은 무료 css메뉴를 제공 받을 수 있습니다.

http://www.dynamicdrive.com/style/

이곳에가서 가로 메뉴바를 넣으실 분은
Horizontal CSS Menus를
세로 메뉴바를 넣으실 분은 
Vertical CSS Menus를 클릭한뒤 마음에 드는 메뉴를 고릅니다.

내 블로그에 붙여넣기

자 이제 이쁘고 내 블로그에 잘 어울리는 메뉴를 골랐으면
내 블로그에 붙여 넣으면 됩니다. 붙여 넣으려면 5가지 스텝이 필요한데

첫번째가 이미지 저장하기
두번째가 이미지 올리기
세번째가 CSS 복사하기
네번째가 CSS 붙여넣기
다섯번째가 html 붙여넣기

말은 다섯단계지만 실제로 해보면 간단하니 하나하나 따라와 보실까요?



이미지 저장하기


메뉴를 선택해서 들어가면 몇가지 이미지가 사용되었는지 나옵니다.
Two images used 라고 나왔군요.
여기에 있는 이미지 두개를 다른이름으로 저장해 임의의 폴더에 넣어놓습니다.



이미지 올리기

html/css 편집으로 들어가면 파일 업로드 란이 있습니다.
파일 업로드 부분에 들어가 방금 저장한 파일들을 업로드 합니다.




CSS 복사하기
세번째로 할일은 CSS 복사하기죠?

다시 메뉴소스가 있던 홈페이지로 돌아가 The CSS부분을 복사합니다.
Select Code 부분을 복사하면 쉽게 복사 할 수 있습니다.



CSS 붙여넣기
이제 내 블로그에 붙여 넣어야 겠죠?

내 블로그의 html/css 편집으로 들어가 </head>를 찾습니다.
</head>바로 위에 붙여넣으면 됩니다만 붙여넣은 뒤에 간단히 할 일이 있습니다.
바로 이미지 경로는 수정해줘야 하는것인데요.
이미지가 두개라면 두개를, 세개라면 세개를
즉 갯수에 맞춰서 이미지 경로를 수정해줘야 합니다. (위 그림 파란색 부분)
이미지 경로는    ./images/내가올린그림파일이름    입니다.




Html 붙여넣기
다시 원본 소스가 있는 싸이트로가 html도 복사 합니다.

<div id="body"> 부분을 찾아 그부분 바로 밑에 붙여넣은뒤
내가 넣고 싶은대로 메뉴를 수정해 주시면 됩니다.


최대한 쉽게 설명한다고 했는데 잘 됐나 모르겠네요.
궁금한 점이 있으시면 성심성의껏 대답해 드리겠습니다. ^^