티스토리 게시글 목차 간단하게 만들기

 

 

 

아주 간단하게 티스토리에서 목차를 설정하는 방법을 요약 정리했습니다.

 

 

목차

1. 스킨편집 이동

 

로그인 > 블로그 관리 > 스킨 편집 으로 이동한 후

 

우측의  html  편집 버튼을 눌러 진입합니다.

 

 

티스토리 블로그 목차 만들기 html 편집

 

 

 

 

2. HTML 설정 및 적용

티스토리 블로그 목차 만들기 html 적용

 

HTML 을 설정하는 화면에서 head 태그 사이에 아래 코드를 입력하고 적용을 눌러 줍니다.

<script type="text/javascript" src="./images/jquery.toc.min.js"></script>

 

 

(head 태그 구분이 어려우신 분들은 ctrl + F 를눌러서 `</head>`를 검색하시고, 바로 위에 붙여넣어 주면됩니다. )

 

 

3. 파일 업로드 및 적용, 링크복사 

 

HTML 적용이 끝나셨다면, 파일업로드 탭에서 하단의 추가 버튼을 통해 아래 2개의 첨부파일들을 추가하고 적용을 눌러줍니다.

 

jquery.toc.js

0.00MB

jquery.toc.min.js

0.00MB

 

티스토리 블로그 목차 만들기 파일업로드 적용

 

 

 

그리고 업로드가 잘 되었다면, 아래처럼 jquery.toc.js 파일을 우클릭 한 후 링크 주소를 복사 해둡니다.

 

 

 

 

4. 글 작성시 목차 HTML 로 목차 삽입

 

글작성시 우측의 기본모드를 클릭한 후 HTML  을 눌러줍니다.

 

 

 

아래 코드 중에서 src="복사해둔 링크 붙여넣기" 에 아까 복사해둔 링크를 잘 넣고, 적절한 위치에 아래 코드를 통째로 넣어줍니다.

<script type="text/javascript" src="복사해둔 링크 붙여넣기"></script>
<p data-ke-size="size18"><b>목차</b></p>
<ul id="toc"></ul>
<script type="text/javascript"> $(function(){ $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } ) }); </script>