📌 블로그스팟 본문에 목차 추가하는 방법 - 블로그스팟버전- artsense!!kr

📌 블로그스팟 본문에 목차 추가하는 방법

블로그스팟(Blogger) 테마 중 일부는 기본적으로 본문 목차 기능이 없습니다. 하지만 HTML 편집을 통해 간단한 코드만 추가하면 목차 기능을 활성화할 수 있습니다.

이 목차는 기본적으로 접혀 있는 형태이며, H2와 H3 소제목만 자동으로 반영되며 클릭하면 해당 부분으로 이동하는 기능까지 포함되어 있습니다.

---

1️⃣ HTML 편집기에서 코드 추가하기

1. 블로그스팟 관리자 페이지로 이동
2. "테마" → "HTML 편집" 클릭
3. Ctrl + F를 눌러 </head>를 검색
4. 아래 목차 코드를 </head> 앞에 붙여넣기

---

2️⃣ 블로그스팟 본문 목차 코드

📌 스크립트 (JavaScript)

html

<script>

//<![CDATA[

function insertTOC() {

    var postBody = document.querySelector('.post-body');

    if (!postBody) return;

    var toc = document.createElement('div');

    toc.className = 'toc';

    toc.innerHTML = '<div class="toc-header"><b>목차</b><span class="toc-toggle">▼</span></div><div class="toc-content"><ul></ul></div>';

    var headings = postBody.querySelectorAll('h2, h3');

    var tocList = toc.querySelector('ul');

    headings.forEach(function(heading, index) {

        var anchor = 'toc-' + index;

        heading.id = anchor;

        var li = document.createElement('li');

        var a = document.createElement('a');

        a.textContent = heading.textContent;

        a.href = '#' + anchor;

        if (heading.tagName === 'H3') li.style.marginLeft = '20px';

        li.appendChild(a);

        tocList.appendChild(li);

    });

    var tocHeader = toc.querySelector('.toc-header');

    var tocToggle = toc.querySelector('.toc-toggle');

    var tocContent = toc.querySelector('.toc-content');

    tocHeader.addEventListener('click', function() {

        tocContent.style.display = tocContent.style.display === 'none' ? 'block' : 'none';

        tocToggle.textContent = tocContent.style.display === 'none' ? '▼' : '▲';

    });

    tocContent.style.display = 'none';

    tocToggle.textContent = '▼';

    postBody.insertBefore(toc, postBody.firstChild);

}

if (document.readyState === 'loading') {

    document.addEventListener('DOMContentLoaded', insertTOC);

} else {

    insertTOC();

}

//]]>

</script>

---

📌 스타일 (CSS)

css

<style>

.toc {

    background-color: #f8f9fa;

    border: 1px solid #d3d3d3;

    border-radius: 8px;

    padding: 10px 13px;

    margin-bottom: 20px;

    font-size: 14px;

    line-height: 1.6;

}

.toc-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    cursor: pointer;

    user-select: none;

}

.toc h2 {

    margin: 0;

    font-size: 18px;

}

.toc-toggle {

    font-size: 16px;

}

.toc ul {

    list-style-type: none;

    padding-left: 0;

    margin: 10px 0 0;

}

.toc ul li {

    margin-bottom: 5px;

}

.toc a {

    text-decoration: none;

    color: #0645ad;

}

.toc a:hover {

    text-decoration: underline;

}

</style>

---

3️⃣ 저장 후 적용 확인

1. 코드 입력 후 "저장(💾)" 버튼 클릭
2. 블로그 메인 페이지에서 본문을 확인
3. 정상적으로 목차가 추가되었는지 체크

---

✅ 목차 기능 설명

• H1에서 H3 까지의 태그를 자동으로 감지하여 목차를 생성
• 기본적으로 목차는 접혀 있으며, 클릭하면 펼쳐짐
• 목차의 항목을 클릭하면 해당 제목(H1, H2, H3)으로 이동

📌 이제 블로그스팟에서도 편리한 목차 기능을 추가하여 가독성을 높여보세요! 🚀