블로그스팟 자동목차 만들어 보자

블로그스팟 자동목차 만들어 보자

이 블로그에는 블로그 포스팅 내용을 쓰지 않으려 했지만 html을 만지기 시작하면서 기억해야 될 내용이 많아졌습니다. 기록 및 공유 차원에서 포스팅을 작성 합니다.

이번 포스팅 내용은 블로그스팟 자동목차 만들기 입니다. 목차는 구글SEO에 도움이 된다고 알려져있습니다. 그 보다 방문자에게 전체 내용을 요약해서 이탈률을 낮추는데 더 의미가 있다고 생각됩니다.

목차를 만들려면 html에 몇 가지 추가해야 합니다. 본문 내용을 참고 하세요.

자동목차 테마 html 설정 방법

1. Blogger에 로그인 합니다.

2. HTML편집을 선택 합니다.

템플릿 ➡ 테마 ➡ 세 개의 점 ➡ HTML 편집을 선택합니다.

3. control+F로 </head>를 찾습니다.

태그 바로 위에 아래 스크립트를 붙여 넣습니다. 저는 H태그를 h3만 목차가 생성되도록 변경하였습니다. 아래 코드에서"h2"를 원하는 헤딩 태크로 변경해주시면 됩니다.

h2, h3 모두 나오게 하고 싶었지만 실패했습니다. 아시는 분들 알려주세요.

<script type='text/javascript'>

//<![CDATA[

//*************TOC plugin

function mbtTOC() {var mbtTOC=i=headlength=gethead=0;

headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)

{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}

//]]>

</script>

4. control+F로 ]]></b:skin>를 찾습니다.

태그 바로 위에 다음 css 코드를 붙여 넣습니다.

.avsTOC{border:1px solid #595757;

box-shadow:1px 1px 0 #656565;

background-color:#EFEDED;

color:#656565;

line-height:1.4em;

margin:30px auto;

padding:20px 30px 20px 10px;

font-family:oswald, arial;display: block;

width: 70%;}

.avsTOC ol,.avsTOC ul {margin:0;padding:0;}

.avsTOC ul {list-style:none;}

.avsTOC ol li,.avsTOC ul li {padding:15px 0 0;

margin:0 0 0 30px;font-size:15px;}

.avsTOC a{color:#656565;text-decoration:none;}

.avsTOC a:hover{text-decoration:underline; }

.avsTOC button{background:#EFEDED;

font-family:oswald, arial; font-size:20px;

position:relative;

outline:none;cursor:pointer; border:none;

color:#656565;padding:0 0 0 15px;}

.avsTOC button:after{content: "\f0dc";

font-family:FontAwesome; position:relative;

left:10px; font-size:20px;}

5. control+F로 <data:post.body/>를 찾습니다.

태그가 1개 이상 있을 수 있습니다. 모두 찾아 변경 해야 합니다.

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

6. 저장을 합니다.

저장하면 테마 html에서 설정은 모두 완료 되었습니다.

자동목차 게시물 html 설정 방법

테마 html 설정을 완료 하였다면 게시물에 해당 html 코드를 추가해야 합니다.

1. 게시물 안에 목차를 넣고 싶은 위치에 "Html"을 추가 합니다.

<div class="mbtTOC">

<button onclick="mbtToggle()">Contents</button>

<ol id="mbtTOC"></ol>

</div>

2. 게시물 제일 마지막 자바 코드 추가

마지막으로 게시물 제일 마지막에 자바스크립트 코드를 추가 해야 합니다.

<script>mbtTOC();</script>

자동목차 추가 설정 팁

자동목차라고 쓰긴 했지만 티스토리 처럼 100% 자동까지는 실패 하였습니다. 블로그스팟 정보가 국내에는 전무하고 구글 해외 사이트를 찾아봤지만 목차 내용은 이게 최선이네요.

게시물에 매번 코드를 넣는 게 너무 번거로운 분들은 "설정 ➡ 글 템플릿"을 이용하면 같은 위치에 자동으로 코드를 넣을 수 있습니다.

자동목차 디자인

아주 심플한 형태의 목차가 생성됩니다. 개인적으로 화려하면 광고로 갈 시선을 뺏기게 되어 애드센스 수익에 좋지 않다고 생각합니다. 뇌피셜이라 참고만 하세요.

사실 다른 디자인으로 바꾸는 방법을 몰라요. html은 어렵답니다.

정보 제공 블로그 공유

정보를 제공해주신 블로그 소개로 포스팅을 마치도록 하겠습니다.

블로그스팟 자동목차 만들어 보자