카테고리 없음
티스토리 - 카테고리(Categories) 자동 펼치기
TechNote.kr
2016. 1. 26. 23:05
티스토리의 사이드바에 있는 카테고리는 기본적으로 접혀져 있다.
하지만 사람들이 들어왔을 때 이 사이트에는 어떤 종류의 카테고리가 있는지 한번에 보여주고 싶다.
이럴 때는 아래의 script를 추가해주면 된다.
<s_sidebar_element>
<!-- 카테고리 모듈 -->
<div class="category">
<h3>Categories</h3>
  |
AmazonWebService (AWS) (6)
|
|
 |
Computer architecture (10)
|
|
 |
Software architecture (5)
|
|
|
</div>
<script language="JavaScript">try{expandTree();}catch(e){}</script>
</s_sidebar_element>
위의 코드를 적용해 주면 아래와 같이 자동으로 확장되어서 보인다.
[Before] |
[After] |

|

|
위 코드를 넣는 방법은 다음과 같다.
카테고리 자동 확장을 위한 코드 삽입 방법
1. Tistory 관리 페이지에 들어가서 [HTML/CSS 편집을 선택한다.]

2. HTML 부분을 선택해 준다.

3. _category_ 를 찾기한 후 아래의 위치에 코드를 삽입해준다.
<s_sidebar_element>
<!-- 카테고리 모듈 -->
<div class="category">
<h3>Categories</h3>
  |
AmazonWebService (AWS) (6)
|
|
 |
Computer architecture (10)
|
|
 |
Software architecture (5)
|
|
|
</div>
<script language="JavaScript">try{expandTree();}catch(e){}</script>
</s_sidebar_element>