티스토리 블로그에 Progress bar 설치하기

티스토리엔 안 되는게 없나보다. 점점 느려지겠지만...

이번에 셋팅해본 것은 Progress indication bar 이다. 본문에서 어느 정도 읽었는지를 표시해주는 방법인데, 아래 링크를 이용하면 설치할 수 있다. 너무 복잡하면 안 할려고 했는데, 아주 너무 간단해서 그냥했다.

jQuery Scroll Progress Indicator For Any Containers - Prognroll

Progress bar 티스토리 블로그에서 어떻게 구현되는지?

아래 데모 사이트를 확인하면 확인할 수 있는데, 화면 상단에 두고 내가 이 블로그에서 어느정도 읽었는지를 파악할 수 있게 도와주는 것이다. 해당 페이지의 절반을 읽었다면 progress bar가 절반정도 차오르게 된다.

jQuery ProngnRoll Plugin Demo

Progress bar 설치 시작

내가 이용한 사이트는 여기인데 내가 사용한 것 이외에도 다양한 플러그인 들이 있었다. 아래 두 문장을 html body 부분에 넣어주면 되는데, 어찌되었건 티스토리에는 jquery가 기본적으로 셋팅되어있어서 신경쓰지 않았다. 그런데 이번에 설치하면서 확인하니... 기본적으로 티스토리에 탑재된 것은 상당히 옛날 버전인듯 하다. 

//code.jquery.com/jquery-3.1.1.slim.min.js를 이용할 것을 권장했는데, 티스토리에 탑재된 jquery로도 별문제 없이 진행되서 그냥 지워버렸다.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="src/prognroll.js"></script>

그래서 첫번째 script는 사용하지 않았고, 2번째 스크립트 구문을 그대로 사용하자니... 파일을 다운로드 받고 업로드해야하는 번거로움이 있었다. 홈페이지에는 나와있지 않은데 파일을 다운로드 받고 readme 파일을 읽어보니 CDN을 이용해서 업로드없이 셋팅할 수 있었다. (유식한 척 써보았지만 인터넷에 js 파일이 올라와있다는 뜻ㅋㅋ...)

 

그 소스의 주소는 바로 여기

https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js

 

결론적으로 위의 두 줄은 아래와 같이 바뀌었다.

<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script>

스크립트 추가

어렵지 않게 그냥 스크립트에 이어서 아래 구문을 추가하니깐 끝. 이렇게 간단해도 되는 것인가? progress bar는 span으로 형성되성 되게 된다. 그래서 해당 부분을 뜯어고치려면 body span .bar 라고 선택하면 css로 변경할 수 있다. 하지만 기본적으로 jquey로도 변경할 수 있다. 

아래 스크립트에서 color 부분에 다른 색상을 넣으면 색상이 바뀌고 height에 10을 넣으면 10px로 바뀌게 된다. default값은 5px, #50bcb6 이다.

<script type="text/javascript">
$(function() {
$("body").prognroll(
	{height:5, color:"#FF9800"}
);
$(".content").prognroll({
	custom:true});

});
</script>

최종: Progress bar html/Jquery

<!-- start 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(
	{color:"#FF9800"}
);
$(".content").prognroll({
	custom:true});

});
</script>
	<!-- end progress bar -->

상단에 Progress bar가 setting된 최종 결과 이미지