웹서핑하다가 우연히 다른 블로그에서 다음과 같은 각주 스타일1을 보게 되었다.
너무 예뻐서 꼭 적용시켜야지 하고 열심히 찾아다녔다.
그 결과 Bigfoot의 각주란 것을 알게 되었고 나름대로 적용하는데 애를 먹어서 올려보도록 하겠다.
우선 아래 Bigfoot 홈페이지에서 파일을 다운로드 받으면 된다.
다운로드 받고 압축을 풀면 여러 파일들이 있는데 필요한 것은 bigfoot.min.js 와 bigfoot-default.css 2개의 파일 뿐이다.
우선 티스토리 스킨 편집 -> 파일 업로드에서 bigfoot.min.js를 업로드해준다.
업로드 후 파일 경로가 보일텐데 ./images/~ 겠지만 혹시나 다를 경우 잘 기억해두도록 하자.
bigfoot-default.css는 메모장 등으로 열어서 전체 복사한 후 티스토리 스킨 편집 -> CSS 맨 밑에 붙여넣기 하면 된다.
마지막으로 티스토리 스킨 편집 -> HTML에 script를 넣어주면 된다. <head>와 </head>사이에 다음과 같이 넣어주면 된다.
복붙하기 편하도록 소스
1 2 3 4 5 6 7 | <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="./images/bigfoot.min.js"></script> <script type="text/javascript"> $.bigfoot( { actionOriginalFN: "hide", } ) </script> |
1번째 줄은 구글에서 jquery 가져온거고
2번째 줄은 만약 위에서 경로가 다르다면 src부분에 맞게 넣어주면 된다.
4번째 줄부터는 옵션들이다.
위의 Bigfoot 홈페이지에 가보면 각종 옵션들이 많으니 읽어보고 필요한 것들을 넣으면 된다.
actionOriginalFN 은 밑에 부분 즉, 원래 있던 각주 설명부분에 관한 옵션이다. 보기 편하도록 hide해버렸다.
activateOnHover 이란 옵션은 마우스를 올리기만 해도 풍선이 뜨게 하는 옵션이다. 개인적으로 클릭하면 나오는 게 더 깔끔한 것 같아서 제거했다.
- 이런 스타일 [본문으로]
'티스토리 꾸미기' 카테고리의 다른 글
| 티스토리 카테고리 펼치기 (0) | 2018.08.15 |
|---|
