초보자도 무료로 티스토리 자동 목차 생성하는 법!

 

링크 버튼 말고도 블로그 운영할 때 기본 셋팅해야 하는 것들이 있습니다. 웹디자인이라고는 해본 적도 없지만 남들 다 하는 목차, 링크버튼, 제목 예쁘게 하기 등등 편집이 하고 싶어서 이것저것 찾아본 후 이번에는 목차 만드는 법에 대해 공유하려고 합니다. 

 

 

 

목차

 

 

저도 방금 목차 적용하는 방법을 배우고 적용했는데, 이 글이 목차를 적용한 첫번째 글이 될 것 같습니다. 구글는 SEO가 확실한 글을 상위 노출시켜주기 때문에, 수익화를 위해서는 목차까지 깔끔하게 정리를 해주는게 도움이 될 것 같습니다. 이제 애드센스 승인받은지 3일차지만 하나도 몰라서 하나하나 바꿔보겠습니다. 

 

1. 파일 다운로드

 

jquery.toc.zip

0.00MB

 

 

 

이 목차파일은 무료로 배포되고 있는 파일이라고 하니 다들 다운받아서 사용하면 될 듯 합니다. 압축되어 있기 떄문에 파일을 받고나서 압축 풀기를 해주고 파일 두 개가 잘 들어있는지 확인합니다. 

 

2. 스킨편집 - 파일업로드 / html 편집

 

 

다운받은 파일을 업로드 해주면 되는데요, 블로그관리 > 스킨편집 > html 편집으로 들어가서 파일업로드 추가 클릭 후 파일 두 가지를 모두 올려줍니다. 

 

 

그리고 jquery.toc 파일의 오른쪽 버튼을 눌러서 '링크 주소 복사'를 해서 다른 곳에 잠깐 옮겨줍니다. 나에게 보내는 카톡이나 메모장이나 상관없습니다. 이따가 서식적용할 때 필요한 주소기 때문에 미리 복사해두는 겁니다. 혹시 못했다면 다시 와서 복사도 가능하니까 걱정 안해도 됩니다. 

 

 

<!-- 자동 목록 코드 시작 -->
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
<!-- 자동 목록 코드 끝 -->

 

 

 

그리고 위에 있는 코드를 복사해서 html 편집에서 바로 윗 줄에 넣어줍니다. 저는 애드센스랑 서치콘솔 등등 추가했더니 마지막 헤드 닫기가 69번에 있었는데 잘 보고 넣어주시면 됩니다. head 찾기가 힘들다면 ctrl + F 눌러서 /head 찾아서 바로 윗 줄에 넣어주시면 됩니다. 

 

3. 서식 생성

 

다음은 링크버튼 만들 때 한 번 해봤던 서식 생성입니다. 서식 생성 방법을 모르는 분은 링크 버튼 만드는 법을 먼저 보고 와도 됩니다.

 

링크 버튼 만들기

 

콘텐츠 > 서식관리 > 서식쓰기에서 html 모드로 하고 아래 코드를 넣어줍니다. 코드 안에 "아까 복사해뒀던 주소"는 파일 업로드에서 미리 옮겨뒀던 그 링크를 넣어주세요. 그리고 나서 서식 제목을 자동목차생성이나 자동목차로 저장해두고 사용하시면 됩니다.

 

<script type="text/javascript" src="아까 복사해뒀던 주소"></script> <p data-ke-size="size18"><b>목차</b></p> <ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></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>

 

 

 

4. 글쓰기에 적용

마지막은 이제 실제 글쓰기에 적용하는 일만 남았죠? 글쓰기에서 서식을 활용해주는데 만들어둔 자동목차를 클릭해줍니다. 

 

그러면 이렇게 애드센스 광고 넣었을 때 같은 복잡한 코드를 볼 수 있습니다. 그 코드랑은 차이가 있죠. 가운데 '목차'가 있다는 점입니다. 자동 목차 생성 코드이기 때문에 작성한 내용 중 소제목에 해당하는 애를 제목 123으로 바꿔주면 목차가 자동으로 생성됩니다.

 

저는 모든 소제목을 제목2로 편집해서 작성하기 떄문에 다 제목2로 통일해줬습니다. 그랬더니 글 맨 윗부분에 자동으로 목차가 생성되었습니다! 목차랑 링크버튼까지 해두니 이제 다음은 제목 CSS 스타일 편집이 남았네요. 화이팅.

 

초보자도 무료로 티스토리 링크 버튼 만드는 방법!

 

애드센스 주소 확인 절차 및 방법 및 우편물 수령 기간