본문 바로가기

웹 이야기

[Tistory] 티스토리 블로그의 카테고리를 전부 펼치기.


(이미지 출처: ICONFINDER
[각주:1])
 
(처음)
안녕하세요, 까만거북이입니다.

제 블로그의 오른쪽 사이드바에서 카테고리 부분을 보면, 지금은 모두 펼쳐져 있습니다.
티스토리의 기본 설정은 모두 접어져 있는 상태이지요.
이를 기본적으로 펼치기 위한 방법으로는 안타깝게도 티스토리는 간단한 방법을 제공하고 있지 않습니다.
하루 빨리 이 기본적인 기능이 제공되었으면 좋겠네요.

하지만, 티스토리 블로그의 강점인 'HTML/CSS 수정'이라는 방법이 있습니다.
이미 많은 블로거분들께서 자세하게 설명해주셨지만, 제 나름대로 다시 한번 정리해보고자 합니다.


(중간)

티스토리 블로그 카테고리 펼치기.
1. 제 블로그 카테고리의 이전 모습은 아래 캡쳐 이미지와 같았습니다.
자세히 보면, 폴더 안에 속 폴더가 있는 것이 보이지요.
이전에는 방문자가 이것을 보기 위해서는 [+] 버튼을 눌러야만 가능했고, 지금은 기본적으로 이것들이 펼쳐져 있습니다.
다음 단계부터 따라오시면 충분히 가능합니다.

카테고리의 이전 모습카테고리의 이전 모습



2. 티스토리 블로그에서 관리자 페이지에 접속 후, 왼쪽 사이드바에서 [HTML/CSS 편집] 메뉴로 들어갑니다.

티스토리 관리자 메뉴의 HTML/CSS 편집티스토리 관리자 메뉴의 HTML/CSS 편집



3. 티스토리는 블로거가 자유롭게 블로그 디자인의 HTML 부분과 CSS 부분의 수정이 가능합니다.
이번 팁에서는 skin.html의 코드만 수정하면 됩니다.

먼저, skin.html에서

까만거북이의 달리는 이야기 (888)
블로그 이야기 (13)
오늘의 IT 이야기 (0)
디지털 이야기 (칼럼) (19)
리뷰 이야기 (53)
맥 이야기 (67)
PC 이야기 (25)
아이폰 이야기 (2)
웹 이야기 (28)
모바일 기획 이야기 (6)
모바일 개발 이야기 (12)
모바일 디자인 이야기 (10)
모바일 디자인 소스 (15)
세상 이야기 (38)
Ver 1.0 글 모음 (600)
부분을 찾습니다.
크롬(Chrome)과 같은 웹브라우져를 사용하신다면, 아래 스크린샷처럼 찾기 기능의 단축키 조합인 '[Control] + [F]' (맥에서는 '[command] + [F]')로 검색하면 쉽게 가능합니다.
아래 스크린샷에서 저는 'category'로 검색해서 원하는 부분을 쉽게 찾을 수 있었습니다.

그 후에 
까만거북이의 달리는 이야기 (888)
블로그 이야기 (13)
오늘의 IT 이야기 (0)
디지털 이야기 (칼럼) (19)
리뷰 이야기 (53)
맥 이야기 (67)
PC 이야기 (25)
아이폰 이야기 (2)
웹 이야기 (28)
모바일 기획 이야기 (6)
모바일 개발 이야기 (12)
모바일 디자인 이야기 (10)
모바일 디자인 소스 (15)
세상 이야기 (38)
Ver 1.0 글 모음 (600)
의 아래에 아래 코드를 추가합니다.
그대로 복사해서 붙여넣으면 가능합니다.

<script language="JavaScript">try{expandTree ();}catch(e){}</script> <!-- 카테고리를 전부 펼치는 코드 -->


위 코드에 대한 약간의 설명을 추가하자면, 자바 스크립트(Java Script)를 이용해서 트리 구조로 되어 있는 부분을 펼치라고 명령하는 코드입니다.
그 뒤의 '<!--'로 시작해서 '-->'로 끝나는 부분은 HTML에서 '주석'이라고 불리며, 코드 수정시에 관리자가 알아보기 쉽도록 메모하는 것이라고 이해하면 간단합니다.
즉, 생략해도 무관합니다.

아래 스크린샷을 참고하시면 더 쉽게 이해하실 수 있을겁니다.
(클릭 후, 더 크게 보실 수 있습니다.)

skin.html에서 코드 작업.skin.html에서 코드 작업.



4. 모두 완료되었으면, 스크롤을 아래로 내려서 [저장]을 클릭합니다.


5. 저장 후, 다시 블로그로 돌아오면, 아래 캡쳐 이미지처럼 모든 카테고리가 펼쳐진 것을 확인할 수 있습니다.

카테고리의 달라진 모습.카테고리의 달라진 모습.



(끝)
티스토리 블로그는 html 코드 수정에 자유로움을 주는 것으로 블로거로 하여금 보다 많은 작업들을 가능하게 합니다.
다만, 그에 걸맞는 어느 정도의 지식이 필요한 것 같네요.

도움되셨길 바라며, 궁금하신 점은 댓글에 적어주시면, 아는 선에서 설명해드리도록 하겠습니다.
고맙습니다.
좋은 하루 되세요. : )


포스팅 끝.
2012년 1월 18일 수요일.



  1. 최상단 아이콘 이미지 출처: http://www.iconfinder.com/icondetails/40693/128/blog_compose_icon [본문으로]