진행 바(Progress Bar)
필요성
필자가 블로그를 꾸밀 때 가장 기본으로 생각했던 원칙은 두 가지였다. 첫 번째는 기본 스킨에서 크게 수정하지 않을 것. 두 번째는 독자가 현재 글의 어디를 읽고 있는지 파악하기 쉬울 것.
두 번째 원칙을 적용하기 위해서 우선 적용했던 것이 ToC였다. 하지만 ToC는 모바일에서 보기 불편하고 거추장스러운 면이 있었기 때문에, 모바일에서는 조금 다른 방식을 적용했으면 하는 바람이 있었다. 그러다가 생각한 것이 진행 바(Progress Bar)였다. 글을 어디까지 읽었는지 진행 바를 통해서 보여주면 모바일에서도 충분히 활용이 가능할 것이라 생각했다.
설치 방법
진행 바를 적용하기 위해서는 티스토리 스킨을 다소 수정해야 한다. HTML(JS), CSS 등을 복사/붙여넣기 하고 일부 수정이 필요한 사항들이 발생할 수 있다.
우선 블로그 관리 > 꾸미기 > 스킨 편집 > html편집으로 이동한다.
html 수정
아래 소스를 <head> 와 </head> 사이 임의의 위치에 붙여넣는다.
<!--Progress Bar Start-->
<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js">
</script>
<script type="text/javascript">
$(function() {
$("body").prognroll({ height: 2, color: "#555" });
$(".content").prognroll({ custom: true }); });
</script>
<!--Progress Bar End-->height와 color의 부분은 취향에 따라 적절히 수정해서 사용하면 된다.
CSS 수정
필자는 모바일 환경에서만 진행 바를 보여주기로 생각했기 때문에 아래 CSS를 이용해서 설정을 해주었다. 데스크톱, 모바일 둘 다 진행 바를 보여주려고 하면 아래 코드는 붙여넣을 필요가 없으며, 모바일만 진행 바를 보여주려고 할 때만 아래 코드를 CSS에 붙여넣으면 된다.
/*-- progress bar start --*/
/* for desktop */
@media only screen and (min-width: 1240px){
.bar{
display:none;
}
}
/*-- progress bar end --*/'IT > Tistory' 카테고리의 다른 글
| [스킨 수정] 이미지 팝업 설정(Markdown용) (0) | 2021.09.19 |
|---|---|
| [스킨 수정] 티스토리 자동 ToC 적용 및 설정 변경 (0) | 2021.09.06 |