★블로그 상단에 이쁜 메뉴바 넣기~
로빈아빠
본문
지난번에 스킨 바꿀때 아래와 같이 블로그 상단에 메뉴바를 적용하였었지요~
프로그램 사이트 찾았습니다. 아래 주소로 가서 확인하세요~
여러가지 모양과 색상의 메뉴를 직접 만들어 보세요~
http://www.highdots.com/css-tab-designer/
직접다운 받으실려면 아래버튼을 클릭하세요~
최근에 저 메뉴바 삽입방법을 몇분이 문의 드려서 아예 적용방법을 포스팅합니다~^^
메뉴바를 만드는 방법은 이드님이나, 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>
<!--
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>
<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
관련링크
댓글목록
맥스님의 댓글
맥스 작성일
멋지네요 ,,,,이곳상단 메뉴바도 바뀐듯하네요 ,,,,
어떻게 작동하는지 몰라서 css_tab프로그램 사용하지도 못하겠네요 ,,,,ㅋㅋㅋㅋㅋ