독도 광고 모금 캠페인

태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

★블로그 상단에 이쁜 메뉴바 넣기~

from 컴퓨터&인터넷/블로그 2008/04/02 13:26


지난번에 스킨 바꿀때 아래와 같이 블로그 상단에 메뉴바를 적용하였었지요~


최근에 저 메뉴바 삽입방법을  몇분이 문의 드려서 아예 적용방법을 포스팅합니다~^^

메뉴바를 만드는 방법은 이드님이나, Seevaa님의 블로그 포스팅에서 보고 알게된 프로그램으로 사용한 겁니다.
(어느분의 블로그에서 본건지 잘 생각이...죄송합니다.)
프로그램은 집에 다운 받아둔 상태인데 찾아봐서 포스팅 하단에 추가글로 링크 올리겠습니다.


▶ 프로그램 없이도 쏘스만으로 적용하는 법 입니다.

1. 아래  쏘스를 <head>와 </head> 사이에 넣어주세요.

<style type="text/css">
<!--
    body {
        margin:0;
        padding:0;
        font: 11px/1.5em Verdana;
}

h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}

/*- Menu Tabs F--------------------------- */

    #tabsF {
      float:left;
      width:100%;
      background:#fff;
      font-size:93%;
      line-height:normal;
          border-bottom:1px solid #666;
      }
    #tabsF ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
      }
    #tabsF li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsF a {
      float:left;
      background:url(http://pds7.egloos.com/pds/200803/09/83/b0050083_47d2b60bb22d2.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsF a span {
      float:left;
      display:block;
      background:url(http://pds8.egloos.com/pds/200803/09/83/b0050083_47d2b60d5f78a.gif) no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsF a span {float:none;}
    /* End IE5-Mac hack */
    #tabsF a:hover span {
      color:#FFF;
      }
    #tabsF a:hover {
      background-position:0% -42px;
      }
    #tabsF a:hover span {
      background-position:100% -42px;
      }

 #tabsF #current a {
                background-position:0% -42px;
        }
        #tabsF #current a span {
                background-position:100% -42px;
        }
-->
</style>

2. 아래  쏘스를 <body>와 </body> 사이에 넣어주세요.

<div id="tabsF">
                              <ul>
                                       
<!-- CSS Tabs -->
<b>
<li id="current"><a href="http://yasu.tistory.com"><span>Home</span></a></li>
<li><a href="http://yasu.tistory.com/notice/1"><span>Notice</span></a></li>
<li><a href="http://thereal.tistory.com/37" target="_blank"><span>Yasu</span></a></li>
<li><a href="http://yasu.tistory.com/notice/823"><span>Banner</span></a></li>
<li><a href="http://feeds.feedburner.com/yasraca"><span>RSS</span></a></li>
<li><a href="http://yasu.tistory.com/guestbook"><span>Guestbook</span></a></li>
</b>
                                </ul>
</div>


3. 두번째 쏘스를 자신의 링크주소와 메뉴에 맞춰어 작성 해 주세요.


간단하지요?  여러분도 블로그 상단에 이쁜 메뉴바를 넣어보세용~^.^



프로그램 사이트 찾았습니다. 아래 주소로 가서 확인하세요~
여러가지 모양과 색상의 메뉴를 직접 만들어 보세요~

http://www.highdots.com/css-tab-designer/

직접다운 받으실려면 아래버튼을 클릭하세요~

css_tab(메뉴바 만드는 프로그램).zip


'컴퓨터&인터넷 > 블로그' 카테고리의 다른 글

티스토리 초대장 10장 나눠드립니다.  (53) 2008/08/17
[경축] 방문자수 1,000,000명 돌파~!!  (64) 2008/04/28
★블로그 상단에 이쁜 메뉴바 넣기~  (33) 2008/04/02
블로그얌(Blogyam)~ 작년보다 가치가 올랐을까?  (21) 2008/03/28
방문자수 900,000힛 달성했습니다.  (74) 2008/03/10
Blog Skin바꿨습니다. 주말 땡~~ㅠ.ㅜ  (24) 2008/03/09
Tag // , , , , , ,
트랙백 1개, 댓글 33개가 달렸습니다.

Trackback Address >> http://yasu.tistory.com/trackback/850

  1. Subject: 블로고스피어 WEEKLY (2008년 3월 28일~4월 3일)

    Tracked from 블로거팁 닷컴 2008/04/04 07:01  delete

    제가 있는 곳에는 녹색빛의 봄이 온것 같습니다. 비가 오거나 흐린날은 아직까지 코가 얼얼할 정도로 쌀쌀해요. 하지만 햇볕이 드는 날에는 나도 모르게 기지게가 펴지고 따스한게 참 좋아요. 구독자 분들이 계시는 곳은 어떤가요? 전 4월이 되면 코스모스가 생각나요. 왠지는 모르겠는데 그냥 코스모스가 생각나요. 봄이되면 땅위로 솟아오르는 잡초처럼 열정과 에너지가 넘치는 하루가 되기를 바랍니다. 하나, 블로그 포스트 발행전 확인해야 할 것 http://drc..

  1. BlogIcon 제이슨소울 2008/04/02 14:31  address  modify / delete  reply

    오 좋은 정보네요..^^
    저는 seevaa 님 디자인 쓰는데,
    다행히 상단에 메뉴가 있긴 하지만,
    혹 스킨 변경하면 꼭 야수님 정보로 응용해야겠어여 ㅎㅎ

  2. BlogIcon 최강마키 2008/04/02 14:53  address  modify / delete  reply

    ㅋㅋㅋ 저도 저런거 하고 싶은데
    귀차니즘:) ..때문에..ㅋㅋ

  3. BlogIcon 공상플러스 2008/04/02 15:15  address  modify / delete  reply

    아웃 오브 안중

  4. BlogIcon 페니웨이™ 2008/04/02 15:22  address  modify / delete  reply

    좋은 팁 같은데요, 지금 제 스킨에서도 사용 가능한건가요?

  5. BlogIcon 제이슨소울 2008/04/02 15:23  address  modify / delete  reply

    오 그러고보니 정말 야수님과 제 스킨이 같네요..
    메뉴바와 이미지들 빼고는요?
    저도 이지 블랙인데..하하핫..

  6. BlogIcon 그리스인 마틴 2008/04/02 15:53  address  modify / delete  reply

    정말 멋진 정보네요.
    실력만 된다면 응용해서 제 블로그에도 붙여보고 싶은데
    감히 두려움에 손이 떨립니다.

  7. BlogIcon Fallen Angel 2008/04/02 20:18  address  modify / delete  reply

    저는 지금 쓰는 스킨에 첨부터 있어서 ㅎㅎ...

  8. BlogIcon 소나기♪ 2008/04/02 21:25  address  modify / delete  reply

    오웃 야수님의 비장의 한수^^
    다음에 써봐야겠어요.ㅎㅎ

  9. BlogIcon 첫눈e 2008/04/02 22:13  address  modify / delete  reply

    아... 실패;;
    넘흐 어렵!!!!!!!!!!!!!!!! ;;
    역시 다음에 꼭... 휴..

    그래도 감사합니다 ^^
    시도는 해봤으니까요~~ ^^

    • BlogIcon Yasu  address  modify / delete 2008/04/02 23:28

      걍 쏘스 붙여 넣으시구 주소만 바꿔주시면 되는데..^^
      음..그래도 한 20분은 걸리겠네요..흐흐

  10. BlogIcon 기차니스트 2008/04/03 05:49  address  modify / delete  reply

    굿!
    시간날때 해봐야겠어요

  11. BlogIcon 여행스케치 2008/04/04 15:32  address  modify / delete  reply

    ^^
    와..
    이런게 있네요.
    저도 시간내서 해봐야겠어요^^

  12. BlogIcon 이리나 2008/04/04 16:20  address  modify / delete  reply

    우와 너무 좋은데요? 잘 배우고 갑니다

  13. BlogIcon 핑키 2008/04/04 17:58  address  modify / delete  reply

    오로지 소스만으로요? 흠..

  14. 2008/04/07 18:14  address  modify / delete  reply

    비밀댓글 입니다

  15. 2008/04/18 21:02  address  modify / delete  reply

    비밀댓글 입니다

    • BlogIcon Yasu  address  modify / delete 2008/04/18 21:15

      안녕하세요~^^
      그 부분은 저도 어제 마침 수정을 했네요..ㅎㅎ

      #tabsF ul {
      margin:0;
      padding:10px 10px 0 50px;
      list-style:none;

      위 50px를 0px로 바꿔주시면 됩니다..^^