[Blogger/구글 블로그] 목차 자동 작성하기
목차를 자동으로 생성할 수 있도록 해주는 방법을 알려준 글이다.
https://www.wonderkrish.com/2018/10/automatic-table-of-contents-blogger.html
요약하면
1. 테마 -> html수정
2. </head> 태그를 찾아서 바로 위에 아래의 코드 삽입
3. ]]></b:skin> 코드를 찾아서 바로 위에 아래의 코드를 삽입
4. 코드에 존재하는 모든 <data:post.body/>를 다음으로 교체
https://www.wonderkrish.com/2018/10/automatic-table-of-contents-blogger.html
요약하면
1. 테마 -> html수정
2. </head> 태그를 찾아서 바로 위에 아래의 코드 삽입
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <script type='text/javascript'> //<![CDATA[ //*************TOC plugin by MyBloggerTricks.com 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>
3. ]]></b:skin> 코드를 찾아서 바로 위에 아래의 코드를 삽입
.mbtTOC{border:5px solid #f7f0b8; box-shadow:1px 1px 0 #EDE396; background-color:#FFFFE0; color:#707037; line-height:1.4em; margin:30px auto; padding:20px 30px 20px 10px; font-family:oswald, arial;display: block; width: 70%;} .mbtTOC ol,.mbtTOC ul {margin:0;padding:0;} .mbtTOC ul {list-style:none;} .mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;} .mbtTOC a{color:#0080ff;text-decoration:none;} .mbtTOC a:hover{text-decoration:underline; } .mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px; position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;} .mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}
4. 코드에 존재하는 모든 <data:post.body/>를 다음으로 교체
<div id="post-toc"><data:post.body/></div>
안녕하세요! 반갑습니다. 검색하다가 우연히 들어오게 됬어요. 좋은 정보 감사해요.
답글삭제