블로그스팟에 목차 및 제목 띠 만들기 및 글꼴(폰트) 바꾸기
.
요즘 블로그 돌아다니면 눈에 확 띄게 만들어주는 목차와 띠가 있다. 처음 시작부터 볼수있는게 위 주 제목에 셋팅된게 띠이며 단락 아래에 있는게 목차이다. 마지막에는 글꼴 변경 방법이 기록되어 있다. 아 추가로 숨김글도 추가했다 귿
HTML로 목차 만들는법
<div class="avsTOC"> <button onclick="avsToggle()">Contents</button> <olid="avsTOC"></ol> </div>
이 친구는 위 목차처럼 보이게 해주는 친구입니다. 원하는 위치에 넣어주시면 됩니다.
템블릿에 저장 해놓으면 더욱 편합니다(상시 고정에 가까운 위치)
<script>avsTOC();</script> =>이 친구는 가장 마지막 밑바닥에 넣어주세요
아래 사진처럼 노랑색 쳐진곳에 넣으면 됩니당 (화질 구린 이유는 용량이 커서 400kb->40kb로 바꿧기 때문이죠!)
추가적으로 이건 H2인 제목 기준으로 만들었습니다.(자주 이용하는 친구여서)
HTML로 가독성 좋게 제목 만들는법
위 코드 문서를 참조해서 노랑색처럼 집어넣으면 여러분들이 보고있는 바로 위처럼 띠가 생긴다(부제목) H1은 주 제목이냐 H2부제목이냐 나누는 개념이여서 상황에 따라 바꿔주면 된다.
 |
| 제목 띠 만들기 |
HTML로 숨김(접는)글 만들기
<br />
<div id="spoiler" style="display: none;">
숨겨진 글
</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to 펼치기 전 버튼 제목 content" type="button">펼친뒤 접는 버튼 제목</button>
<br />
여기서 중요한점은 저 숨겨진 글 보이시나요? 꼭 HTML로 보기를 누른 뒤에 적어서 넣어주셔야 합니다. 저거는 일반 글쓰기 에디터에서는 작성 불가능합니다.
HTML로 집어넣은 뒤에 숨겨진 글이나 사진을 집어 넣어주시면 됩니다.(집어넣을 사진을 먼저 업로드 후 HTML로 들어가서 복사 불러넣기 해주시면 됩니다.)
블로그스팟 글꼴 변경법 및 버튼 만들기
아래 버튼 만들는 방법은 맨 위 코드 문서에서 참조해주세요 바로 HTML에 붙여넣기 하면 완성 제목은 일반 글쓰기에서 수정 후 하이퍼링크 달아주셔도 됩니당
Google Fonts
따로 윈도우에서 폰트 다운받으실거면 위 버튼 누르고 들어가시고 블로그 스팟에서 추가하실거면 아래 따라가주세용
왼쪽 위 상단에 아래 사진처럼 생긴 A누르면 글꼴 추가가 있는데 클릭
 |
| 글꼴 추가 |
원하는 폰트를 검색하거나 아이쇼핑하다가 클릭 클릭
※한국말 폰트 찾는거면 반드시 사진처럼 체크하고 찾으세요, 미지원하는건 한글이 ㅁ로 나옴
 |
| 블로그스팟 글꼴 추가1 순서대로 진행하시면 새로운 글꼴이 3번처럼 추가된것을 볼수 있습니다! 그럼 끝! |
 |
| 블로그스팟 글꼴 추가 2 |
이것처럼 되용
다음에는 영원한 구글 색인지옥에서 빠져나오는 방법입니다...(아 아니지 빠르게 색인 요청법입니다. 매번 2~3분 대기는 에바야!)