구글 블로그스팟 깔끔한 자동 목차(TOC) 만들기 (심플 디자인)

기존의 투박한 점(Bullet)을 없애고, 연한 파란색 텍스트와 산뜻한 연두색 헤더로 디자인한 목차 코드입니다. 복사해서 바로 사용해보세요!

📢 블로거(Blogger) 깔끔한 자동 목차 만들기

0 미리보기 (Preview)

적용하면 아래와 같은 깔끔한 디자인으로 나타납니다. (마우스를 올리면 글자가 진해지며 밑줄이 생깁니다.)

📖 목차 [ 닫기 ]

윈도우 업데이트 문제해결사

시스템 파일 손상 복구 방법

sfc /scannow 명령어 활용

최적화 마무리 및 결론

1 테마 HTML 편집창 열기

블로그 관리자 페이지에서 [테마] 메뉴로 이동한 뒤, [맞춤설정 옆 화살표 ▼] > [HTML 편집]을 클릭합니다.

2 코드 붙여넣기 (위치 중요!)

HTML 편집창 내부를 클릭하고 Ctrl + F를 눌러 </head> 태그를 찾습니다.
찾은 </head> 바로 윗줄에 아래 코드를 통째로 복사해서 붙여넣으세요.

<!-- [시작] 자동 목차 스크립트 (게시물 본문 전용) -->
<b:if cond='data:view.isPost'>

<script>
//<![CDATA[
  var toc_options = {
    target: ["h2", "h3"], 
    autoNumber: false,    
    condTargetCount: 2,   
    insertPosition: "firstHeadBefore", 
    showToc: false,       
    width: "100%",        
    marginTop: "30px",    
    marginBottom: "40px", 
    indent: "0",
    postBodySelector: ".post-body, .widget.Blog" 
  };

  (function(i){var j=0;document.addEventListener("DOMContentLoaded",function(){var p=document.querySelector(toc_options.postBodySelector);if(p==null||typeof p==="undefined"){return}if(toc_options.target.length==0){return}rootContent=h(toc_options,p);if(rootContent.children.length>=toc_options.condTargetCount){var q=c(rootContent);o(q)}});function h(q,p){var u=q.target.length;var t=function(E,D,w){var z=q.target[E];var x=E<u-1?q.target[E+1]:"";var y="toc_"+(++j);var F=g(z,m(D),E+1,y);w.children.push(F);D.id=y;var A=f(D);if(x==""){return}while(true){if(A==null||typeof A==="undefined"){break}if(b(A)==z){break}if(b(A)==x){t(E+1,A,F)}else{var B=A.getElementsByTagName(x);for(var C=0;C<B.length;C++){t(E+1,B[C],F)}}var A=f(A)}};var r=g("ROOT","",0);var v=p.getElementsByTagName(q.target[0]);for(var s=0;s<v.length;s++){t(0,v[s],r,"")}return r}function c(s){var r=document.createElement("div");r.classList.add("b-toc-container");r.style.marginTop=toc_options.marginTop;r.style.marginBottom=toc_options.marginBottom;if(toc_options.width=="100%"){r.style.display="block";}else{r.style.width=toc_options.width}var q=document.createElement("div");q.className="b-toc-header";var w=document.createElement("span");w.className="b-toc-title";var y=document.createElement("a");w.innerText="📖 목차";y.href="javascript:void(0);";y.className="b-toc-toggle";q.appendChild(w);q.appendChild(y);var t=function(z){var p=typeof z==="boolean"?z:e(r,"hide");if(p){y.innerText="[ 닫기 ]";r.classList.remove("hide");}else{y.innerText="[ 열기 ]";r.classList.add("hide");}}
;y.addEventListener("click",t);t(toc_options.showToc);var x=document.createElement("ul");x.className="b-toc-list";s.children.forEach(function(z,p){n(x,z,(p+1)+"")});r.appendChild(q);r.appendChild(x);return r}function n(s,u,w){var p=document.createElement("li");var q=document.createElement("a");p.style.paddingLeft=toc_options.indent;q.href="#"+u.id;if(toc_options.autoNumber){var t=document.createElement("span");t.classList.add("toc-number");t.innerText=w+"."}var v=document.createElement("span");v.classList.add("toc-text");v.innerText=u.text;if(toc_options.autoNumber){q.appendChild(t)}q.appendChild(v);p.appendChild(q);s.appendChild(p);if(u.children.length>0){var r=document.createElement("ul");p.appendChild(r);u.children.forEach(function(y,x){n(r,y,w+"-"+(x+1))})}}function o(q){var r=null;var p=document.querySelector(toc_options.postBodySelector);if(toc_options.insertPosition=="firstHeadBefore"||toc_options.insertPosition=="firstHeadAfter"){r=p.querySelector(toc_options.target[0]);}else{if(toc_options.insertPosition=="top"){r=p}}if(r==null){return}if(toc_options.insertPosition=="firstHeadBefore"){k(r,q)}else{if(toc_options.insertPosition=="firstHeadAfter"){a(r,q)}else{if(toc_options.insertPosition=="top"){k(r,q)}}}}function g(q,r,p,s){return{tagName:q,text:r,children:[],nestLevel:p,id:s}}function m(p){return p.innerText}function f(p){return p.nextElementSibling}function d(p){return p.previousElementSibling}function b(p){return p.tagName.toLowerCase()}function e(p,q){return p.classList.contains(q)}function l(p){return p.parentNode}function a(q,s){var r=l(q);var p=f(q);if(r!=null&&p!=null){r.insertBefore(s,p)}}function k(p,r){var q=l(p);if(q!=null){q.insertBefore(r,p)}}})(window);
//]]>
</script>

<style type='text/css'>
  /* 목차 전체 컨테이너 */
  .b-toc-container {
    background-color: #ffffff;
    border: 2px solid #5ba9e6; /* 테두리: 연한 파랑 */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(91, 169, 230, 0.15);
    padding: 20px 25px;
    margin: 30px auto;
    font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    box-sizing: border-box;
    position: relative;
  }

  /* 목차 헤더 (제목 부분) */
  .b-toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f1f8e9; /* 배경: 연한 연두색 */
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
  }

  /* 목차 제목 텍스트 */
  .b-toc-title {
    font-weight: bold;
    font-size: 18px;
    color: #2c3e50;
  }

  /* 열기/닫기 버튼 */
  .b-toc-toggle {
    font-size: 14px;
    color: #555 !important;
    text-decoration: none !important;
    cursor: pointer;
    font-weight: normal;
    transition: color 0.2s;
  }
  .b-toc-toggle:hover {
    color: #0056b3 !important; /* 호버: 진한 파랑 */
    font-weight: bold;
  }

  /* [핵심] 리스트 앞의 점(Disc) 제거 */
  .b-toc-container ul {
    list-style-type: none !important; 
    margin: 0 !important;
    padding-left: 0 !important; 
  }

  /* 숨김 처리용 */
  .b-toc-container.hide .b-toc-list { display: none; }
  .b-toc-container.hide { padding-bottom: 20px; }
  .b-toc-container.hide .b-toc-header { margin-bottom: 0; }

  /* 리스트 아이템 간격 */
  .b-toc-container li {
    margin: 6px 0;
    line-height: 1.5;
  }

  /* 링크 스타일 (기본: 연한 파랑) */
  .b-toc-container a {
    text-decoration: none !important;
    color: #5ba9e6 !important;
    font-size: 16px;
    transition: all 0.2s ease;
  }

  /* 링크 마우스 올렸을 때 (진한 파랑 + 밑줄) */
  .b-toc-container a:hover {
    color: #0056b3 !important;
    text-decoration: underline !important;
  }

  /* 소제목(H3) 들여쓰기 */
  .b-toc-container ul ul {
    list-style-type: none !important;
    margin-top: 5px;
    padding-left: 20px !important;
  }
  
  .b-toc-container ul ul li { margin: 4px 0; }

  .b-toc-container ul ul li a {
    font-size: 14px; 
    color: #7abcf0 !important; /* 소제목은 더 연하게 */
  }
  
  .b-toc-container ul ul li a:hover {
    color: #0056b3 !important;
  }
</style>

</b:if>
<!-- [끝] -->