[블로그 팁] 티스토리 카테고리 펼치기


 블로그를 운영하다보면 카테고리를 구성하는데에 적지 않은 시간을 들이게 됩니다. 주제에 맞게 화려한 스킨을 사용 할 수도 있고 최대한 간단한 스킨을 사용 할 수도 있습니다. 그 중에 사용자들이 가장 고심을 하는 작업이 바로 카테고리 이름에서부터 특수 문자를 활용한 꾸미기까지 정성이 많이 들어가는 작업인데요.


카테고리 펼치기

이랬던 카테고리를



 특히 티스토리를 사용하시는 분들은 카테고리 펼치기 기능이 없어서 카테고리를 펼쳐 놓고 싶은데 답답하셨던 적이 있을 겁니다.
 오늘은 카테고리를 펼치는 방법에 대해서 설명을 해드리겠습니다.


카테고리 펼치기

이렇게 바꿔 드립니다.




1.카테고리 항상 펼치기 ( Javascript 이용 )
먼저 자바스크립트를 이용해서 카테고리를 펼치는 기능을 알려드리겠습니다. 자바스크립트를 몰라도 되니 어려워 하시지 마시고 그냥 따라하시기만하면 됩니다.

카테고리 펼치기

HTML/CSS 편집 선택



 여러분 블로그의 관리자 페이지로 들어가셔서 HTML/CSS 편집 기능을 선택합니다.
 [스킨] -> [HTML/CSS 편집] 에 있습니다. ^^


카테고리 펼치기


sktin.html 이라고 쓰여 있는 박스를 클릭하고 [Ctrl] + F 를 눌러서
몽땅 보기 (987)
를 찾습니다.




[ ##_category_## ] 밑에 다음에 쓰여 있는 자바스크립트 코드를 복사해 줍니다. ( 그냥 붙여 넣기 하시면 되요. ^^ 위 사진 처럼 말이죠 ㅎ ) ( '[' 다음에 있는 띄어쓰기는 검색하실때 지워 주세요 ^^ )

[ ##_category_## ]
<script language="JavaScript">try{expandTree();}catch(e){}</script>

 자 이제 미리보기 버튼을 눌러서 적용이 되었는지 확인 합니다.


적용이 된 것을 볼 수 있습니다.
마음에 드시면 저장 버튼을 눌러서 카테고리 펼치기 기능을 저장해 주시면 됩니다.

ps. 기능에 대한 설명을 드리자면, 카테고리 펼치기 기능은 우리가 직접 카테고리 확장 버튼을 클릭 할 때 호출 되는 expandTree()라는 함수를 클릭이 되지 않았을 때에는 실행을 시켜서 펴지게 만드는 것입니다. 다음에 설명드릴 방법도 마찬가지로 이 함수를 호출하는 방식의 차이일 뿐 기본적으로 사용되는 함수는 똑같습니다.


2.Body 태그의 onload 이용

 위 태그의 장점은 에러 처리를 할 수 있다는 점입니다. 예를 들면
몽땅 보기 (987)
밑에 추가 시켰던 코드 중에 catch(e){} 라는 부분이 있습니다. 여기서 중괄호 안에 코드를 넣어서 카테고리 확장 함수가 적절하게 호출되지 않았거나 오류가 발생 했을 때 처리를 할 수 있는 자바스크립트 코드를 넣을 수가 있습니다.


MacBook Pro Stickers
MacBook Pro Stickers by Tom Morris 저작자 표시비영리동일조건 변경허락


 하지만 일반적으로 블로거들은 javascript에 익숙하지 않기 때문에 이 기능은 있으나 마나 할 수도 있겠네요. 그래서 에러처리는 없고 기억하기도 편한 방법으로 여러분의 블로그가 웹 페이지에 로드 될 때에 자동으로 카테고리 펼치기 함수를 실행 시키는 방법을 알려드리겠습니다.




 마찬가지로 [스킨]->[HTML/CSS] 로 들어가서 skin.html 박스를 선택합니다. 그리고 <body id="tt-body-tag"> 태그가 있는 부분을 확인합니다.




 <body> 태그의 속성에 onload="expandTree();" 를 추가합니다. 이 때 onload="expandTree();" 의 앞뒤에는 공백( 스페이스바 )이 있어서 구별이 되어야 합니다. 전부 붙여쓰면 실행이 안되니까 주의 하시기 바랍니다.




  역시 적용이 된 것을 볼 수 있습니다.
 간략하게 이 방법을 설명하자면, body 태그의 onload="expandTree();" 부분이 의미하는 바는 웹 페이지의 body 태그가 웹 페이지에 의해서 불러 들여 질 때 ( 즉 load 될 때 ) expandTree(); 함수를 실행 하겠다는 의미입니다.  위에서 설명드린 방법과 별 차이는 없습니다만 추가해야하는 코드의 양이 짧다는 장점이 있을까요? 편하실대로 선택해서 하시면 되겠습니다.


+ Recent posts