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

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

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

  변경전 메뉴

블로그메뉴 변경전

  변경후 메뉴

블로그메뉴 변경후

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

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

메뉴 준비

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

CSS 메뉴 모음 사이트

 

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

CSS 메뉴 리스트

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에서 메뉴 부분만 발췌했습니다.

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. 이전 댓글 더보기
  2. 지나가던 사람 2009.06.25 20:20  댓글주소  수정/삭제  댓글쓰기

    The CSS은 </head>와<bord>사이에 넣고 The HTML를 기존 블로그 메뉴를 삭제 하고 붙여 넣기 한다는 말인가요? 또 css를 넣으면 자꾸 블로그 이름과 메뉴가 겹쳐서 님처럼 녹색 구분선이 검은색 메인 밑에 오게 하려면 어떻게 해야 하는지.. 왼쪽과 오른쪽 끝에 맞게도 어떻게 해야 하는지좀 알려 주세요..

  3. BlogIcon Momo™ 2009.06.26 10:40  댓글주소  수정/삭제  댓글쓰기

    제 블로그에도 힘들었지만 끝내는 적용 했습니다..
    마지막에 올려 주신 skin 소스가 많은 도움이 되었어요..
    비앤아이님, 감사합니다..
    이제 파워 블로그를 향한 끝없는 포스팅만 남았군요.. ^^

    • BlogIcon Kay~ 2009.06.27 14:21  댓글주소  수정/삭제

      아! 성공하셨군요!..
      그럼 정말.. 파워블로그를 향한 끝없는 포스팅...
      즐겁게 하세요! ㅋ

  4. BlogIcon 쿠이쯔 2009.07.09 08:50  댓글주소  수정/삭제  댓글쓰기

    우와 !!! 좋은 정보 감사드립니다^^

  5. BlogIcon Fedor. 2009.08.06 00:04  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 케이님 블로그를 개설하는데 이렇게 좋은 정보를 제공한다는 사실에 감사드립니다.

    쭈욱 따라하면서 궁금한게 몇가지가 있어서 물어보려하는데 번거로우시진 않나 걱정이 되네요^^;

    케이님메뉴바는 B&I Home -애드센스팁-블로그팁-CSS이렇게 가시는데

    제 메뉴바는 우측에 치우쳐서 가운데나 왼쪽으로 간격을 맞추어서

    배치하려고 하는데요

    이럴경우는 어떤 소스를 붙여야 하는지 궁금합니다.

    아 , 추가적으로 메인과 메뉴바의 글자색상을 같이 적용하려면 어떤 소스가

    들어가는지 궁금합니다.

    그리고 위의 CSS과 HTML을 다른걸 적용해보려 하였는데

    위에서 얘기해주셨던 <style type="text/css">와 </style>이

    CSS소스안에 이미 들어가져있던데 상관은 없는건가요? 제가 적용을 하니

    전혀 이상하게 되더라구요. 혹시..제가 스킨위자드를 이용해서 이미지를 넣었다가

    지저분해보여서 깔끔하게 보이게 하려고 이미지사용을 해제시켰거든요.

    혹시 그것때문에 메뉴바가 적용이 안되는지 궁금합니다.

    무지질문이 많았네요^^; 더운여름 주말에 강풍을 동반한 비가 온다던데

    어서 더위좀 식혀줬으면 합니다^^;

    - 아아 올리고 나니 질문이 한가지 더 들더라구요 ㅠ-

    사이드바 메뉴의 전체 색상을 바꾸지 않고

    케이님처럼 최근글/최근댓글/카테고리 의 색상이

    각각 다르게 하려면 어느부분을 손대야 할지 궁금합니

    다~

    • BlogIcon Kay~ 2009.08.11 00:08  댓글주소  수정/삭제

      음.. 질문이 많아서 ㅋㅋ 얼른대답을 할 수가 없네요!
      메뉴바도 스킨에 따라서 정렬이 달라진답니다.
      직접 만드실것이라면 기존 메뉴 부분을 주석처리하고
      메뉴를 새롭게 적어주면 쉽게 변경이 가능합니다.
      물론 필요한 정렬 명령을 적어주셔도 됩니다.

      그리고 <style ...> </style> 태그는 skin.html에서만 사용하는 것이랍니다.
      style.css에는 넣으면 안됩니다.

      <style...> 부분이 적용이 안되면 메뉴가 안나올것입니다.

      그리고 사이드바 제목 생삭은 우측 상단의에서
      "사이드바"로 검색을 해보시면 필요한 내용이 검색될것입니다.

  6. BlogIcon 아침형인간 2009.08.06 16:48  댓글주소  수정/삭제  댓글쓰기

    안녕하세요, 덕분에 블로그에 메뉴를 달았습니다.
    염치불구하고 똑같은 메뉴를 달게 되었습니다. ㅠㅠ 나름 찾으려고 했는데, 새로하니깐 메뉴위치 조정이 이상해지더라구요. ㅠ

    다름이 아니라 "블로그 이름"하고 메뉴" 사이에 틈이 없어요. 이 사이에 공간을 조금 두고 싶은데
    무엇을 수정해야하나요? 좀 알려주세요 ㅠ.ㅠ

    • BlogIcon Kay~ 2009.09.20 12:52  댓글주소  수정/삭제

      예. 그렇군요!
      메뉴 부분의 공간은 style.css를 수정해야 합니다.
      style.css의 header 부분은 아래와 같습니다.
      #header {
      width:/*@post-width:250=*/ 870px /*@*/;
      margin:0 auto;
      padding:0px 0 0 30px;
      }
      여기서 padding 3번째 값을 변경해보시기 바랍니다.
      padding:0 0 20px 30px 과 같이요!

  7. olleh! 2009.09.18 05:17  댓글주소  수정/삭제  댓글쓰기

    잘배워 갑니다 블로그에 똑같이 적용했어요 ㅋㅋ 계속 잘 배워 갈께요

  8. BlogIcon 빠삐코 2010.01.28 15:39  댓글주소  수정/삭제  댓글쓰기

    오늘 개설 하고 메뉴 어떠케 만드나 찾아보고 있는데, 이거 보고도 이해가 안가요
    너무 어려워요 ㅜㅜ 이미 편집부분에 css 만 넣었는데 그 담이 안되요...

  9. BlogIcon 유리 2010.02.13 01:59  댓글주소  수정/삭제  댓글쓰기

    헤헤- 덕분에 잘 배워갑니다! 그런데 이미지 있는 건 어떻게 해야하나요?; 그냥 업로드 해봤지만 이미지는 적용이 안되네요ㅜ;

  10. 어색대마왕 2010.07.07 09:41  댓글주소  수정/삭제  댓글쓰기

    티스토리초대받아서시작했는데무지허게어렵네요~^^많은거배워갑니당^^

  11. BlogIcon 아이엠디네로 2012.03.23 18:35  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다 ㅎㅎ
    티스토리 처음하는데 디자인하기가 어려워서
    여러가지로 검색해보고 찾다가 비앤아이님 블로그를 알게되었네요~
    블로그로 돈벌기 팁도 알고싶었는데 마침 여기에 여러가지정보가 있네요!
    구독신청했습니다 +_+ 앞으로 자주 들릴거 같네요 ^~^
    앞으로도 좋은정보 감사합니다 크~




티스토리 툴바