티스토리 목차 만들기 (TOC 목차, 서식활용)

요즘 티스토리 유입이 갑자기 늘면서 애드센스 수익이 조금씩 올라가고 있습니다.

하루에 1만원만 티스토리에서 들어오면 얼마나 좋을까... 생각하면서 블로그를 더 잘할수 있는 방법을 고민해봤습니다.

그러다가 목차 만들기를 생각했습니다. SEO (검색엔진최적화)를 위해서도 목차가 있는것이 훨씬 유리합니다. 크롤러가 가져가기 더 좋은 문서로 인식될 수 있는 것 같더군요.

그래서 제 블로그에 티스토리 목차 만들기가 가능한지 찾아보았습니다.

TOC를 활용해 목차를 만드는 법이 있어 블로그에 소개해봅니다.

목차

1. 파일 다운로드 받기

먼저 TOC 파일을 다운로드 받으셔야 합니다.

아래 링크를 클릭하면 다운로드가 됩니다.

https://ndabas.github.io/toc/assets/jquery.toc.zip

압축파일입니다. 압축을 풀어주세요.

2. 티스토리에 파일 업로드

티스토리 블로그 관리자로 이동합니다. 내 티스토리 화면에서 키보드에 Q 버튼을 누르면 바로 관리자로 이동됩니다.

jquery.toc.js, jquery.toc.min.js 파일을 올려야 합니다.

관리자단 왼쪽 사이드바에 꾸미기>스킨편집 으로 이동합니다.

여기에서 내가 사용하고 있는 스킨이 나오고, 그 밑에 HTML 편집 버튼을 누릅니다.

여기에서 내 소스코드들이 나옵니다. 우리는 '파일업로드' 부분을 클릭합니다.

그 후 압축해제된 파일 2개를 업로드합니다.

jquery.toc.min.js 파일과 jquery.toc.js 파일 업로드로 목차만들기

파일 추가는 하단에 +추가 버튼을 눌러서 추가할 수 있습니다.

다음은 jquery.toc.min.js 파일의 주소를 얻어야 합니다. 파일을 우클릭해서 주소복사를 누릅니다.

3. HTML에 파일 등록

여기서 잘 따라오셔야 합니다. HTML로 다시 이동하신 후 </HEAD>를 찾습니다. 컨트롤 F를 치신 후 /head라고 검색하시면 됩니다.

그리고 /head 바로 위에

<script type="text/javascript" src="실제 파일 주소"/></script>

여기서 "실제파일주소" 라고 적힌 부분에 아까전에 복사한 파일 주소를 적으시면 됩니다.

4. 서식등록

이제 서식 등록을 해야 할 시간입니다.

다시 "파일등록"으로 가신 후 2개 파일 중 하나인 jquery.toc.js 파일의 주소를 땁니다.

다시 블로그 관리자단으로 이동하신 후 서식관리>서식추가를 합니다.

서식쓰기를 하신 후에 기본 설정을 HTML로 변경합니다.

다음에는 아래 소스를 붙여넣기 합니다.

<div class="txc-textbox" style="border-style:solid; font-weight:bold; padding: 10px; border-width: 1px 1px 1px 5px; border-color:#fff;"> <script type="text/javascript" src="jquery.toc.js 파일 주소"></script> <p>목차</p> <ul id="toc"></ul> <script type="text/javascript"> $(function(){ $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h3,h4", top:-30, isBlink:true, blinkColor:'#21B9DE'} )}); </script> </div>

소스가 옆으로 깁니다. 전체를 다 긁어가셔야 합니다.

여기에서 jquery.toc.js 파일 주소 부분에 아까 가져온 ts파일 주소를 넣습니다.

이 코드로 서식 붙여넣기까지 마쳤다면 저장합니다.

5. 목차 적용

이제 다 왔습니다.

글을 쓰실때 서식을 누르시고 나면 아래처럼 그림이 나옵니다.

이 서식은 목차가 실제로 들어갈 글의 초반부에 넣으면 됩니다. 글을 쓰다가 제목 부분이 나올때 아래처럼 제목 3으로 글을 쓰면 자동으로 목차에 적용됩니다. 만약 이 글에 들어오셨을 때 서두에 목차가 있었다면 저는 성공한것이고, 없다면 저는 실패한 것입니다 -_-;;;

이상 마이다스였습니다.

6. 마이다스의 다른 글

금 투자 방법 전망 시기 펀드 ETF 시세 알아보자 (금실물, 금통장 등)

 

아이폰 앱테크 3월 (출석 체크, 코인 앱태크) + 핼피 페이코인 추천인코드