애드센스 "목차 자동코드 " 설정방법

블러그 "목차" 설정하는 방법

구글 블로그(Blogger)에서 자동으로 목차(Table of Contents)를 생성하려면

HTML/CSS 스크립트 코드를 블로그 테마에 추가하는 가장 깔끔하고 유용한 방법.

자동 목차 스크립트를 적용하는 전체 과정입니다.

1단계: 테마에 목차 스크립트 적용하기

Blogger 관리자 화면 좌측 메뉴에서 [테마]를 클릭합니다.
맞춤설정 옆의 ▼ 아이콘을 누르고 [HTML 편집]을 선택합니다.
코드 창 안쪽을 클릭한 뒤 Ctrl + F를 눌러 </head>를 검색합니다.
</head> 바로 위에 아래 코드 전체를 복사하여 붙여넣습니다.

HTML

<!-- 구글 블로그 자동 목차 스크립트 -->
<script type='text/javascript'>
//<![CDATA[
function createTOC() {
    var postBody = document.querySelector('.post-body-outer') || document.querySelector('.post-body') || document.querySelector('.entry-content');
    if (!postBody) return;
    
    var headings = postBody.querySelectorAll('h2, h3');
    if (headings.length === 0) return;
    
    var tocContainer = document.getElementById('toc');
    if (!tocContainer) return;
    
    var tocList = document.createElement('ul');
    
    headings.forEach(function(heading, index) {
        var id = 'toc-head-' + index;
        heading.setAttribute('id', id);
        
        var listItem = document.createElement('li');
        var link = document.createElement('a');
        link.setAttribute('href', '#' + id);
        link.textContent = heading.textContent;
        
        if (heading.tagName.toLowerCase() === 'h3') {
            listItem.style.marginLeft = '15px';
        }
        
        listItem.appendChild(link);
        tocList.appendChild(listItem);
    });
    
    tocContainer.appendChild(tocList);
}
window.addEventListener('DOMContentLoaded', createTOC);
//]]>
</script>

<style>
#toc {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 20px 0;
}
#toc p.toc-title {
    font-weight: bold;
    font-size: 1.05em;
    margin: 0 0 10px 0;
    color: #333;
}
#toc ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}
#toc li {
    margin-bottom: 6px;
}
#toc a {
    color: #2b6cb0;
    text-decoration: none;
}
#toc a:hover {
    text-decoration: underline;
}
</style>

우측 상단의 저장(디스켓 아이콘 💾)을 누릅니다.

2단계: 글 작성할 때 목차 표시하기

이제 글을 작성할 때 목차가 들어갈 위치에

간단한 코드 한 줄만 넣어주시면 됩니다.

글쓰기 에디터 좌측 상단의 연필 아이콘을 눌러
HTML 보기 모드로 전환합니다.
목차를 넣고 싶은 위치(보통 첫 단락 아래)에 아래 코드를 입력합니다.
HTML
<div id="toc"><p class="toc-title">목차</p></div>
다시 작성 보기 모드로 돌아와 글을 작성합니다.

💡 1.주의사항 (목차가 자동으로 수집되는 기준)

본문 작성 시 단락 제목을 툴바에서 '주제목(H2)' 또는 '부제목(H3)'
서식으로 지정해야 스크립트가 해당 제목을 인식하여 목차 항목이 자동 생성

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

1. 마음에 안들면 원래대로 복구하는 방법.

아무것도 지우거나 수정하지 않고 '원래대로 돌리는' 가장 쉬운 방법

지우고 저장하는 과정에서 오류가 반복되므로, 저장하지 않고 편집 창을 나가서 변경사항을 취소하는 것이 가장 깔끔합니다.

뒤로 가기: 화면 좌측 상단의 ← (왼쪽 화살표) 버튼을 눌러 HTML 편집창에서 나갑니다.
변경사항 취소: "저장되지 않은 변경사항이 있습니다"라는 알림창이 뜨면 [취소] 또는 [이탈/저장 안 함]을 선택합니다.
완료: 이렇게 하면 코드를 건드리기 전의 처음 블로그 상태로 깨끗하게 원상복구됩니다.

이후 테마 코드를 직접 수정하는 방식 대신, 에러 걱정이 없는 [레이아웃] ➔ [가젯 추가] 방식을 이용하시면 훨씬 안전하게 기능을 추가하실 수 있습니다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

2탄:"목차" 다른방법 찾아보기

[테마 HTML 편집]에 직접 소스 코드를 집어넣는 방식은 태그나 기호 하나만 어긋나도 블로그 전체가 멈추거나 저장 에러가 발생해서 초보자분들께는 매우 위험한 위험 부담이 있습니다.

HTML 코드를 절대 건드리지 않고, 블로그 관리자 메뉴에서 안전하고 손쉽게 클릭 몇 번으로 적용할 수 있는 방식으로 개선된 스크립트

1.안전한 자동 목차 적용 방법 (테마 수정 ZERO)

이제 [테마] - [HTML 편집]은 들어가실 필요가 전혀 없습니다.

Blogger 관리자 좌측 메뉴에서 [레이아웃]을 클릭합니다.
사이드바 영역이나 본문 위/아래 영역에 있는 + 가젯 추가를 클릭합니다.
목록에서 HTML/JavaScript를 선택합니다.
아래 개선된 코드를 복사해서 [내용]란에 붙여넣고 [저장]을 누릅니다. (제목은 비워두시면 됩니다)

HTML
<!-- 구글 블로그 안전 자동 목차 가젯 -->
<script>
window.addEventListener('DOMContentLoaded', function() {
  var postBody = document.querySelector('.post-body-outer') || document.querySelector('.post-body') || document.querySelector('.entry-content');
  if (!postBody) return;
  
  var headings = postBody.querySelectorAll('h2, h3');
  if (headings.length === 0) return;
  
  var tocContainer = document.getElementById('toc');
  if (!tocContainer) return;
  
  var tocList = document.createElement('ul');
  tocList.style.listStyle = 'none';
  tocList.style.paddingLeft = '0';
  tocList.style.margin = '0';
  
  headings.forEach(function(heading, index) {
    var id = 'toc-head-' + index;
    heading.setAttribute('id', id);
    
    var listItem = document.createElement('li');
    listItem.style.marginBottom = '6px';
    
    var link = document.createElement('a');
    link.setAttribute('href', '#' + id);
    link.textContent = heading.textContent;
    link.style.color = '#2b6cb0';
    link.style.textDecoration = 'none';
    
    if (heading.tagName.toLowerCase() === 'h3') {
      listItem.style.marginLeft = '15px';
    }
    
    listItem.appendChild(link);
    tocList.appendChild(listItem);
  });
  
  tocContainer.appendChild(tocList);
});
</script>

2. 글 작성 시 사용 방법

글을 쓰실 때 목차를 넣고 싶은 위치(HTML 보기 모드)에

아래 한 줄만 딱 넣어주면 된다.

HTML
<div id="toc"><p style="font-weight:bold; margin-bottom:10px;">목차</p></div>

이 방식을 사용하시면:

테마 코드를 전혀 건드리지 않으므로 SAXParseException 같은 시스템 에러가 100% 발생하지 않습니다.
언제든 맘에 안 들면 [레이아웃]에서 해당 가젯만 [삭제]하면 깔끔하게 제거된다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

3.처음으로 강제 초기화 하는 방법

화면 상단(상단 메뉴바 가운데 근처)에 보이는 위젯 테마를 기본값으로 되돌리기 버튼은 현재 테마 안의 모든 가젯과 위젯 코드를 구글 블로그의 처음 기본 상태로 강제 초기화하는 버튼입니다.

이 버튼을 누르면 그동안 테마 코드에 추가하거나 수정했던 내용들이 모두 삭제되고 처음 기본 테마 상태로 깨끗하게 돌아갑니다.

3-1버튼을 사용하여 원상복구하는 방법

현재 코드가 계속 남아있어 저장이 안 되고 에러가 발생하는 상황이므로,

이 기능으로 원상복구하시는 것이 가장 확실합니다.

화면 상단 중앙에 있는 위젯 테마를 기본값으로 되돌리기 아이콘(주황색 블로그 로고 옆, 저장/되돌리기 버튼 근처)을 클릭합니다.
경고 창이 뜨면 [확인]을 누릅니다.
테마 내부의 오탈자 코드들이 모두 지워지고 초기화됩니다.
상단 우측의 저장(디스켓 💾 아이콘)을 클릭합니다.

이렇게 진행하시면 복잡한 코드를 직접 지우지 않아도 에러가 깨끗이 사라지고

블로그가 초기 상태로 원상복구 됩니다.

이 블로그 검색

[글빛닷컴] 인문학 삶의 기록 ㅣ 지식, 지혜 탐구