친절한효자손 취미생활

인디케이터는 표시기라는 뜻을 가지고 있습니다. 그렇다면 티스토리에서의 인디케이터는 어떤 의미를 가질까요? 무언가를 표시한다는 뜻인데, 과연 뭘 표시할까요? 가장 많이 사용하는 인디케이터는 본문의 내용에 대한 분량을 표시하는 기능 입니다. 스크롤을 아래로 내리게 될 수록 점점 바(Bar)가 차오르는 페이지를 보신 적 있으신가요? 현재 친효스킨 1.17 버전 이상부터는 이러한 인디케이터가 기본으로 적용되어 있습니다. 본 페이지는 인디케이터가 미적용된 티스토리 스킨에서 세팅하는 방법에 대해서 설명하고자 합니다.

 

HTML Script Setting

사실 복잡할게 없습니다. 그냥 이거 하나만 세팅하면 끝 입니다. 먼저 아래의 첨부파일을 다운받아주시기 바랍니다.

 

티스토리 인디케이터.txt
0.00MB

 

다운로드가 완료되었다면 한번 텍스트 파일을 열어보시기 바랍니다. 아래의 내용이 들어 있을 것 입니다.

 

<!-- 인디케이터 : 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) 가 변하는 모습을 감상해 보시기 바랍니다.

 

정상적으로 적용된 예시

예시로도 올려놓았습니다. 보시면 크롬의 북마크바 바로 아래에 짙은 회색 바가 늘어났다가 줄어드는 모습을 살펴보실 수 있습니다. 이 스크롤바는 본문의 세로 내용에 대한 가로의 풀 사이즈를 사용합니다. 즉 세로로 엄청 긴 내용의 글이 있다면 프로그래스바 증가량이 그만큼 천천히 올라가게 됩니다. 왜냐하면 본문 내용이 많기 때문 입니다. 반대로 본문 내용이 짧다면 프로그래스바는 금방 증가하게 될 겁니다. 다른 스킨을 사용하시는 분들 중 인디케이터를 써보고 싶으신 분들은 한번 적용해 보시기 바랍니다. 끝.

 

이 글도 읽어보세요

 

당신을 위한 콘텐츠

당신을 위한 콘텐츠

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드

  1. 은근히 써보고 싶던 기능이네요. 블로그에 잘 쓰겠습니다. 감사합니다.
    2020.06.02 02:50 신고
  2. 와 이게 이렇게 구현되는군요!
    2020.06.02 18:39 신고
  3. 적용하고 싶었던 기능인데 마침 새 글 피드에 올라온 걸 보고 바로 적용시켰습니다. 공유해주셔서 감사합니다! :')
    2020.06.03 03:22 신고