블로그 메뉴 꾸미기(만들기)

블로그 메뉴 꾸미기(만들기)

블로그가 홈페이지보다 좋은점은 뭐가 있을까요? 모 여러가지가 있겠지만 디자인적인 측면에 보면 일단 만들기 쉽고 스킨이 다양해서 쉽게 변경이 가능하다는 것입니다. 하지만 많은 스킨에도 불구하고 스킨의 일부분이 마음에 들지 않는경우가 많습니다. 저는 복잡한것보다는 심플한 스킨이 좋아서 Pure Black (text) 스킨을 사용하지만 텍스트위주로만 스킨이 만들어져서 블로그 헤드 부분이 조금을 썰렁한 느낌이 들어서 늘 신경이 쓰였는데.. 웹서핑을 하던 중에 스타일시트(css)를 이용한 메뉴 샘플을 만들어 놓은 곳이 있어서 바로 메뉴수정에 들어가서 지금은 상단에 보이는 것처럼 꽤 보기 좋게 메뉴가 배치가 되어 있습니다.

블로그 상단에 보이는 메뉴는 기본적으로  지역로그, 태그, 미디어로, 방명록으로 구성이 되어 있지만 메뉴변경을 하면서 추가로 몇개의 메뉴를 더 넣었습니다. 아래는 블로그 메뉴의 변경전과 변경후의 스샷화면입니다.

  변경전 메뉴

  변경후 메뉴

지금부터 이어지는 내용은 티스토리 기준으로 작성이 됩니다. 하지만 기본적인 html/css만 알고 있다면 소스 수정이 가능한 홈페이지나 다른 블로그에도 적용은 가능합니다.

누구나 쉽게 블로그 메뉴를 꾸밀 수 있습니다.

메뉴 준비

메뉴는 직접 제작을 해도 되지만 Dynamic Drive라는 사이트에는 여러종류의 CSS 메뉴 Library가 있어서 얼마든지 마음에 드는 메뉴를 골라서 쓸수가 있습니다.

CSS 메뉴 모음 사이트

 

css 사이트접속. 먼저 CSS  Library에 접속을 하여 좌측메뉴중 Horizontal CSS Menus를 클릭하여 메뉴를 고릅니다.(세로메뉴는 그 아래 Vertical CSS Menus)

CSS 메뉴 리스트

 

css 메뉴 소스. 맘에드는 CSS 메뉴를 고른다음 제목을 클릭하여 들어가면 아래그림처럼 데모 및 CSS, 그리고 메뉴구현을 위한 html소스가 표시됩니다. 아래그림에서 보면 이미지자리가 비어 있는데 이미지가 없다는 것이며, 이미지가 있는경우는 메뉴구현이 한단계 더 있습니다. (이미지를 스킨에 업로드하는 등의 단계)

CSS 메뉴 소스 (css 와 html)

소스 복사. 위 화면에서 css와 html을 따로 따로 메모장등에 복사를 해둡니다.
               ( 위의 파랑색 원으로 표시된 Select Code를 클릭하면 전체선택이 됨 )

스킨(skin.html) 편집

css 소스를 이용하는 방법은 여러가지 방법이 있습니다. 여기서는 skin.html이 조금 복잡한면이 있지만 그래도 작업이 가장 쉬운 skin.html에 직접 삽입하는 방법을 택하도록 하겠습니다.
먼저 혹시 모를 사고에 대비하여 스킨을 저장해둡니다. (저장방법:스킨-스킨을 선택후 스킨저장)

skin.html의 상단부

css 삽입. 위 그림의 노랑색 박스위치에 <style>와</style>을 적어주고 그 사이에 미리 복사해둔
              css 소스를 삽입합니다.

CSS 소스삽입 예 아래와 같이 <style type="text/css">를 적어주고 css 소스를 삽입한다음 마지막에 다시 </style>을 적어줍니다.  <style type="text/css">      이곳에 css 소스를 삽입합니다.  </style>

 메뉴 수정. 메뉴를 수정하기 전에 먼저 각각의 메뉴의 링크주소를 복사하여 메모장등에 보관을 해둡니다.
                이제 위 그림에서 블로그 메뉴부분은 유사시에 대비하여 주석처리를 해둔 다음 메모장에 보관된
                html소스를 삽입합니다.

skin.html에 기존메뉴는 주석처리하고 새로운 메뉴를 삽입한 모습

<li> 와 </li> 사이에 메뉴를 삽입하면 됩니다. 필요한 경우 <li>태그를 사용하여 추가할 수도 있습니다.

이제 미리보기를 통해서 이상이 없는지 확인한다음 이상이 없으면 저장하면 끝입니다.
아직 제 블로그를 찾아주시는 분들이 html이나 css를 잘 모르는 분들이 계셔서
최대한 자세하게 설명을 하려고 했는데 이해가 가는지 모르겠습니다.

2009.6.25일 추가

메뉴추가를 어려워 하시는 분들이 많아서 제 스킨파일 일부를 첨부합니다.
skin.html 과 style.css에서 메뉴 부분만 발췌했습니다.

ccoma_skin_html.txt

ccoma_style_css.txt