티스토리에 인디케이터 (프로그래스 바 - Progress Bar) 설치하는 방법
인디케이터는 표시기라는 뜻을 가지고 있습니다. 그렇다면 티스토리에서의 인디케이터는 어떤 의미를 가질까요? 무언가를 표시한다는 뜻인데, 과연 뭘 표시할까요? 가장 많이 사용하는 인디케이터는 본문의 내용에 대한 분량을 표시하는 기능 입니다. 스크롤을 아래로 내리게 될 수록 점점 바(Bar)가 차오르는 페이지를 보신 적 있으신가요? 현재 친효스킨 1.17 버전 이상부터는 이러한 인디케이터가 기본으로 적용되어 있습니다. 본 페이지는 인디케이터가 미적용된 티스토리 스킨에서 세팅하는 방법에 대해서 설명하고자 합니다.
HTML Script Setting
사실 복잡할게 없습니다. 그냥 이거 하나만 세팅하면 끝 입니다. 먼저 아래의 첨부파일을 다운받아주시기 바랍니다.
다운로드가 완료되었다면 한번 텍스트 파일을 열어보시기 바랍니다. 아래의 내용이 들어 있을 것 입니다.
<!-- 인디케이터 : Indicator (Progress Bar) -->
<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script>
<script type="text/javascript">
$(function() {
$("body").prognroll({
height: 5,
color: "#555"
});
$(".content").prognroll({
custom: true
});
});
</script>보시면 두 가지의 내용이 담겨 있습니다. 첫번째 스크립트는 CDN 입니다. 인디케이터 스크립트를 실행할 JS 파일의 URL 주소 입니다. 그리고 두번째 스크립트가 바로 티스토리에서 보여지게 할 코드인 것 입니다. 사용자가 임의로 수정할 수 있는 부분은 총 두 곳 입니다.
height - 바의 높이 (두께)
color - 바의 색상 (16진수)
바로 이 부분 입니다. 기본값은 현재 높이가 5px 이며 색상코드는 555 입니다. 원하는 색상과 두께를 설정하여 적용시킬 수 있습니다. 이 내용을 스킨의 HTML <head> 안쪽에 붙여넣기를 하시면 됩니다. 이제 적용된 모습을 살펴볼까요? 본 스킨에도 적용이 되어 있으니 한번 스크롤을 위/아래로 내려가면서 프로그래스 바 (Progress Bar) 가 변하는 모습을 감상해 보시기 바랍니다.
정상적으로 적용된 예시
예시로도 올려놓았습니다. 보시면 크롬의 북마크바 바로 아래에 짙은 회색 바가 늘어났다가 줄어드는 모습을 살펴보실 수 있습니다. 이 스크롤바는 본문의 세로 내용에 대한 가로의 풀 사이즈를 사용합니다. 즉 세로로 엄청 긴 내용의 글이 있다면 프로그래스바 증가량이 그만큼 천천히 올라가게 됩니다. 왜냐하면 본문 내용이 많기 때문 입니다. 반대로 본문 내용이 짧다면 프로그래스바는 금방 증가하게 될 겁니다. 다른 스킨을 사용하시는 분들 중 인디케이터를 써보고 싶으신 분들은 한번 적용해 보시기 바랍니다. 끝.
