구글블로그 자동 목차 만드는 방법 (블로그스팟 TOC)

블로그스팟(구글블로그)에서 자동 목차(TOC)를 만드는 방법은 그리 어렵지 않습니다. 블로그스팟은 xml형식으로 되어 있기 때문에 처음에 보면 생소하게 느끼실 겁니다. 최대한 쉽게 알려드리겠습니다. 이 글은 Essential 테마를 기준으로 작성되었습니다. 

차근차근하게 따라하시면 됩니다.

구글블로그 자동 목차 넣는 방법 (TOC)

요약하자면, 붙여넣기를 총 5번을 진행하면 됩니다. 그냥 붙여넣기만 잘하시면 됩니다. 매우 쉽습니다. 

1. 블로그스팟 HTML 편집 설정

테마 - 맞춤설정 - HTML 편집

1. 자신의 블로그스팟 관리자 페이지로 접속
2. 왼쪽에 있는 테마 클릭
3. 내 테마 맞춤설정 우측의 ▼ 클릭
4. HTML 편집 클릭

2. </head> 찾아서 코드 삽입

Ctrl + F를 누르면 활성화 된다.

</head>를 정확히 타이밍해야 한다.

1. Ctrl + F를 눌러 찾기(Search)를 활성화시킵니다.
2. 찾기에 </head>를 직접 입력합니다. (정확하게)
3. 초록색으로 된 </head>를 찾으면 성공입니다. (/header가 아님)

3. </head> 위에 코드 붙여넣기 (붙여넣기 1/5)

head에 붙여넣을 코드.txt

0.00MB

</head> 위에 붙여넣기

1. 위에 있는 파일을 다운받아서 (메모장 파일)
2. 메모장에 있는 코드를 복사 후
3. </head> 위에 붙여주시면 됩니다. (아래 X)

4. (코드 붙여넣기 2/5)

1. 파일을 다운받습니다.
2. 파일에 있는 <data:post.body/>를 복사합니다.
3. HTML 편집에서 <data:post.body/>를 찾습니다.
4. <div id='post-toc'><data:post.body/></div>로 교체합니다. (대체)
5. 저장 클릭.
6. (이미지로 설명)

post-toc.txt

0.00MB

<data:post.body/>

<div id='post-toc'><data:post.body/></div>

블로그스팟 저장 버튼 (플로피디스크 모양)

여기까지 하시면 동작하는 코드가 붙여졌습니다. 이제 남은 건 CSS 스타일 적용입니다. 그렇다고 바로 하시면 동작이 안 될겁니다. 그건 마지막에 설명해드리겠습니다.

5. 테스트 글 작성 (붙여넣기 3/5)

이제부터 시험 테스트용 글을 하나 배치해봅시다

테스트 글.txt

0.00MB

1. 위 예제 테스트 파일을 다운받습니다. (h2, h3, p로 작성)
2. 자신의 블로그 관리 페이지로 들어갑니다.
3. +새 글(글쓰기)을 누릅니다.
4. 제목을 작성합니다. (아무 제목이나, 저는 테스트 글이라 작성했습니다)
5. < >로 된 버튼을 클릭.
6. 다운받은 예제를 복사 붙여넣기를 합니다.

6. 작성한 본문의 위, 아래에 코드 삽입 (붙여넣기 4/5)

글쓰기에 들어가는 코드 (HTML 편집).txt

0.00MB

위, 아래에 코드를 각각 넣습니다

1. 글쓰기 HTML 모드인 상태에서 (중요)
2. 본문 위에는 <div class="avsTOC"><ol id="avsTOC"></ol></div>
3. 본문 아래에는 <script>avsTOC();</script>를 붙여 넣습니다.
4. 이미지처럼 위, 아래에 붙으시면 됩니다.
5. ▶ 게시 버튼 클릭
6. 관리자 페이지 밑에  '블로그 보기' 클릭
7. 자신이 게시한 게시물 클릭 (테스트 글)

7. 생성된 자동 목차 확인

위와 같이 자동 목차가 생겼다면 성공입니다. 여기서 추가로 디자인(CSS)을 건드실 분들은 계속 따라와 주세요 복붙 한 번 만 더 하시면 됩니다.  

8. 자동목차 디자인 (붙여넣기 5/5)

b skin 코드.txt

0.00MB

avsTOC 디자인.txt

0.00MB

]]></b:skin> 위에 붙여넣기

1. 관리자 페이지 - 테마 - HTML 편집으로 들어온다
2. ]]></b:skin>을 찾는다.
3. 위 파일에 있는 코드를 복사한다.
4. ]]></b:skin> '위에' 복사한 코드를 붙여넣는다.
5. 저장
6. 끝