작성일: 2010. 11. 30. 18:40 |
티스토리에 있는 기본 카테고리의 경우 원하는 대로 상세 조작이 불가능하다.
하지만, 가끔 쓰다보면 카테고리 디자인이나 스타일이 마음에 안 들때가 있다.
이럴때 CSS와 자바 스크립트를 활용하면 카테고리 디자인을 좀더 멋지게 꾸밀 수 있다.
아래 방법을 참고하여 자신의 블로그 카테고리를 디자인해보자.
1. 특정 카테고리만 열림 상태로 해놓기
티스토리를 만들때 기본 카테고리를 2중으로 설정해 놓으면
모든 카테고리는 기본으로 닫힌 상태로 보인다.
이 디자인이 깔끔하긴 하지만
버튼을 누르기 귀찮은 방문자들은 거들떠 보지도 않는다는점.
그래서 카테고리를 오픈 상태로 설정할 필요가 있다.
만약 카테고리를 다음과 같이 전체 오픈하려면
<script language="javascript">try{expandTree();}catch(e){}</script>
이 스크립트를 <div id="category"> 바로 아래에 넣어주면 된다.
사용 예)
<div id="category">
<h3>카테고리</h3>
<script language="javascript">try{expandTree();}catch(e){}</script>
</div>
이 기능도 좋긴하지만, 목록이 너무 길어지게 되므로 나름 귀찮다.
만약 이와같이 특정 카테고리만 오픈 한 상태로 만들려면
<script language="javascript">expandFolder(숫자, true);</script>
다음 스크립트를 <div id="cat_div">
바로 아래에 사용하면 된다.
|
여기서 숫자는, 해당 카테고리의 고유 넘버로
자신의 블로그에 접속해서, 소스 보기로 직접 확인해야 한다.
숫자는 주로 2xxxxx 와 같은 6자리 숫자이니 잘 찾아보자.
사용예)
<div id="cat_div">
|
<script language="javascript">expandFolder(230694, true);</script>
<script language="javascript">expandFolder(227080, true);</script>
</div>
2. 특정 카테고리만 크게 / 진하게 설정하기
이 기능은 CSS 스크립트를 사용해서 적용 할 수있다.
만약 특정 카테고리를 진하게, 크게 설정하려면
#sidebar #cat_div #category_숫자 #text_숫자 {font: bold 16px 돋움;} (상위 카테고리)
#sidebar #cat_div #category_숫자_children #text_숫자 {font: bold 16px 돋움;} (하위 카테고리)
다음 스크립트를 CSS 란에 그대로 넣으면된다.
bold는 글자 진하게 설정이며, 16px가 폰트의 크기이다. (기본 글꼴은 돋움)
그리고 위에 카테고리 오픈 소스 스크립트와 마찬가지로,
해당 숫자값 (2xxxxx 6자리)는 소스보기로 직접 찾도록 하자.
3. 특정 카테고리 글 수 안보이게 설정하기
마찬가지로 간단하게 설정이 가능하다.
#sidebar #cat_div #category_숫자 #text_숫자 .c_cnt {display: none;}
이 값을 CSS에 넣어주면 특정 카테고리만 안나오게 설정 할 수 있다.
참고로 이 글은 복사하기가 안되니
첨부해둔 파일의 스크립트를 참고해서 쓰도록 하자.
다운로드:
카테고리 스크립트.txt
