Category
Date2010/01/01 19:19
2010/01/01 19:19중급자를 위한 티스토리 스킨 팁 - 사이드바를 탭 형식으로
<head>와 </head>사이에 입력
<script language="javascript" type="text/javascript">
function itab_box_view_change(num,uni){
var tab1=document.getElementById(uni+'_tab1');
var tab2=document.getElementById(uni+'_tab2');
var tab3=document.getElementById(uni+'_tab3');
var tr1=document.getElementById(uni+'_div1');
var tr2=document.getElementById(uni+'_div2');
var tr3=document.getElementById(uni+'_div3');
for(i=1; i<4; ++i){
eval('tab'+i).className=(num==i) ? 'tab_on' : 'tab_off' ;
eval('tr'+i).style.display=(num==i) ? 'block' : 'none' ;
}
}
</script>
주황색으로 된 부분을 설명하겠습니다.
tab_on은 선택된 탭의 클래스, tab_off는 비활성화된 탭의 클래스입니다.
숫자 4는 사용할 탭의 가로 갯수+1 입니다.
2개를 사용하려면 3, 4개를 사용하려면 5, 5개를 사용하려면 6으로 변경하세요.
탭의 갯수를 늘리려면 스크립트에서 밑줄 쳐진 부분 두 군데를 각각 추가해야합니다.
만약 탭 4개를 사용하려면 밑줄 쳐진 내용을 복사하여 한줄씩 추가하고,
추가된 마지막 줄의 'tab3'와 'div3'는 각각 'tab4'와 'div4'로 바꾸면 됩니다.
<s_sidebar>와 </s_sidebar>사이에 입력
<s_sidebar_element>
<s_sidebar_element>
<!-- 카테고리,태그 -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" class="tab_on" id="abc_tab1" onclick="itab_box_view_change(1,'abc')">Category</td>
<td valign="middle" class="tab_off" id="abc_tab2" onclick="itab_box_view_change(2,'abc')">Tag</td>
<td valign="middle" id="abc_tab3" style="display:none"></td>
</tr>
</table>
<div id="abc_div1" style="display:block;">
<div class="sidecontent">카테고리 출력될 부분</div>
</div>
<div id="abc_div2" style="display:none;">
<div class="sidecontent">태그 출력될 부분</div>
</div>
<div id="abc_div3" style="display:none;"></div>
</s_sidebar_element>
<s_sidebar_element>
<!-- 최근글,댓글,트랙백 -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tab_on" id="hello_tab1" onclick="itab_box_view_change(1,'hello')">Recent Posts</td>
<td class="tab_off" id="hello_tab2" onclick="itab_box_view_change(2,'hello')">Recent Comments</td>
<td class="tab_off" id="hello_tab3" onclick="itab_box_view_change(3,'hello')">Recent Trackback</td>
</tr>
</table>
<div id="hello_div1" style="display:block;">
<div class="sidecontent">최근글 출력될 부분</div>
</div>
<div id="hello_div2" style="display:none;">
<div class="sidecontent">최근 댓글 출력될 부분</div>
</div>
<div id="hello_div3" style="display:none;">
<div class="sidecontent">최근 트랙백 출력될 부분</div>
</div>
</s_sidebar_element>
밑줄 친 부분처럼 탭을 두개만 사용할 때도 보이지 않는 td와 div를 만들어 스크립트에서 정해준 갯수와 동일하게 맞춰야 합니다. 갯수가 맞지 않으면 스크립트 오류가 생깁니다.
클릭이 아닌 마우스오버로 탭을 바꾸고 싶다면, onclick 을 모두 onmouseover로 바꾸면 됩니다.
style.css에 입력
.tab_on, .tab_off {padding:5px 10px; font:7pt verdana; color:#fff; border-right:#fff 3px solid; cursor:pointer}
.tab_on {background:#CBA3BD}
.tab_off {background:#CFBAC0}
.sidecontent {padding:3px 10px; background:#CBA3BD; margin-bottom:15px; width:400px}
.tab_on {background:#CBA3BD}
.tab_off {background:#CFBAC0}
.sidecontent {padding:3px 10px; background:#CBA3BD; margin-bottom:15px; width:400px}
게시물에 관한 질문은 댓글로 해주시고,
티스토리 스킨에 관한 질문은 티스토리 스킨 포럼에서,
티스토리에 관한 질문은 티스토리 고객센터나 티스토리 가이드 블로그 HELP메뉴에서,
웹디자인이나 웹코딩 관련 질문은 네이버 지식인이나 수 많은 웹 관련 카페에서 하실 수 있습니다.
티스토리 스킨에 관한 질문은 티스토리 스킨 포럼에서,
티스토리에 관한 질문은 티스토리 고객센터나 티스토리 가이드 블로그 HELP메뉴에서,
웹디자인이나 웹코딩 관련 질문은 네이버 지식인이나 수 많은 웹 관련 카페에서 하실 수 있습니다.
-
-
-
안지용
Edit/DelReply
안녕하세요2010/01/03 16:01
소스 감사히 잘 쓰고 있습니다.
이번에 제가 소스를 좀 수정을 하고 있습니다만,
우측에 메뉴, 좌측에 내용이잖아요..
그걸 좀 바꾸고 싶은데요. 어디서 문제가 인지 모르지만,
자꾸 오류가 나네요..
방법좀 알려주시면 안되나요? 괜찮다면 수정 부탁드려도 될련지요? -
퐈비오
Edit/DelReply
앗 새해 인사한다는것이 늦었네요 ^^;;;2010/01/04 12:06
좀 늦었지만 이번 한해 좋은일, 행복한 일만 있으시고 복 많이 받으세요~
솔직히 말하자면 전 아직 중급까지 갈 레벨은 아닌가봐요 ^^;;;
너무 머리가 아프다능;;; -
드자이너김군
Edit/DelReply
아아.. 이거슨~ 김군이 그렇게도 찾아 헤메이던 탭메뉴의 바이블...^^2010/01/04 13:48
경인년 새해가 밝았습니다. 항상 행복하시고 새해 복 많이 받으세요~ -
-
raymundus
Edit/DelReply
와 저도 탭으로 구현하는게 상당히 궁금했었는데 마침 그레이스님이 ^^2010/01/11 07:54
정말 감사합니다. 많은 도움이 되고 있어요 -
wakaka
Edit/DelReply
너무 좋은 자료입니다. 제가 계속 찾았던 자료를 우연히 여기서 보게되니 너무 좋네요.2010/01/13 20:05
항상좋은 자료 많이 보고 있습니다. 감사합니다. ^^ -
MONEY LOG
Edit/DelReply
오랜 삽질 끝에 성공했습니다.ㅎㅎ2010/01/18 22:17
사이드바가 작아서 사이즈 맞추는데 고생좀 했네요.ㅎㅎ
성공하니 먼가 뿌듯한 기분이..ㅎㅎ
좋은 자료 감사하구요.
좋은 중급 자료 또 기다리고 있을께요. 좋은하루 되세요.^^ -
Dream.T
Edit/DelReply
와........2010/01/23 01:28
우연히 들어오게됬는데 블로그디자인보고 깜짝놀랐습니다.
티스토리로도 이런 레이아웃이 가능하군요.
이미지맵의 활용이 정말 대단하네요!
전 다른 솔루션은 안써보고 제로보드4만 써봤거든요.
어릴적부터 템플릿 블로그, 대여형 블로그를 별로 좋게안생각해서..
그러다보니 제로보드4가 가장 레이아웃이 자유로운줄 알고 겨우 제로보드로 블로깅하고있는데 ㅠ
스킨제작 포스팅 쭉 보다보니 티스토리같은 설치형 블로그 툴도 그만큼 활용이가능할거같네요..
게다가 전 이미지툴을 잘못다뤄서... 이미지를 못만들면 이쁘게하고싶어도 못하죠ㅎㅎㅎㅎㅎ
아무튼.. 제 홈보다 오히려 '홈페이지'의 느낌이 강하게 나네요..!
아 부럽습니다~ 부러워요 ㅠ
ㅎㅎ -
좋은사람들
Edit/DelReply
오.. 이렇게 하는거군요!2010/01/29 18:37
사이드바내용이 많아서.. 하단사이드바를 생각하고 있었는데.. 이렇게되면.. 압축?이 가능하겠네요.ㅎㅎ
좋은정보 또하나 얻어갑니다.^^ -
GYPSY Edit/DelReply티 스토리 만드는데 포기했다가 리슨투마헐 블러그 통해서 넘넘 잘 배우고 있어요^^2010/02/11 15:05
탭 형식까지 잘 봤구요. 넘 감사드려용~♥
Grace* 님 블러그 처럼 하구 싶은데 한개의 이미지에
롤오버시 이미지가 여러개의 이미지로 효과를 주시고 또 링크도 각각 걸어주셨는데
다음 강좌는 이걸로 부탁 드려도 될런지요..ㅠㅜ 넘넘 해보구 싶어용~
그럼 오늘도 즐건 하루 되세용^^ 늘 감사합니당^^;
GYPSY
-
-
사발사마
-
지나가다 Edit/DelReply그레이스님! 반갑습니다.2010/05/24 03:18
티스토리로 홈페이지처럼 구현이 가능한가 찾아보다가 우연히 이 블로그를 발견하게 됐어요.
보통의 홈페이지보다 더 예쁘게 꾸며진 그레이스님 블로그를 보니 아무래도 제 본진을 제로보드에서 티스토리로 옮겨야겠다는 생각이 강하게 듭니다. ^^; 정말이지 능력이 대단하세요.
한 가지 부탁드릴게 있는데... 제가 지금 쉬이 제로보드에서 티스토리 옮겨오지 못하는 이유가 ㅠㅠ 여기 그레이스님 블로그처럼 이미지를 클릭하면 게시판으로 넘어가는 형식 (위에 Gypsy님이 남겨주신 글처럼) 을 티스토리에서 어떻게 구현해야할지 막막해서였거든요. 혹시라도 블로깅 중 시간이 나시면 이것에 관한 강의 포스팅도 해 주실 수 있을까요?
정말이지 저 방법이 너무나도 궁금한데 ㅠㅠ 아직까지 뚜렷한 답을 찾지를 못해서요... 저것만 해결되면 속 시원하게 저도 티스토리로 넘어오고 싶습니다. ㅠㅠㅠ
가까운 시일은 아니더라도 언젠가 시간이 나실 때 꼭 한번 포스팅해주시면 정말 감사할것 같아요!지나가다
