블로그 관리 (Blog Management)/BiCute Skin

[Tistory] 블로그 상단 진행바(Progress Indicator) 넣기

BiCute 2022. 3. 16. 10:00
반응형

 

#1 Progress Indicator

  진행 바, 상단 스크롤, 프로그래스 인디케이터, 프로그래스 바 등 다양하게 불리고 있는 스크롤에 따른 진행도를 표시해주는 선을 블로그에 삽입하는 방법입니다.

 

 

#2 블로그에 적용하기

  HTML 편집에서 가장 아래쪽으로 이동한 후,  다음 코드를 복사하여 </body> 위쪽에 붙여 넣어주면 적용은 끝입니다. 

<!-- Progress Indicator -->
<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script>
<script type="text/javascript">
    $(function () {
        $("body").prognroll({
		height: 4, 
		color: "#180204"
	});
        $(".content").prognroll({custom: true});
    });
</script>

  중간에 보이는 height: 4 가 선의 굵기를, color: "#180204"가 선의 색상을 나타냅니다.

  숫자만 바꿔주거나 ""안에 원하는 색상을 넣어주시면 쉽게 자신의 스타일로 수정할 수 있습니다.

 

 

#3 기타

  이 항목은 신경 쓰지 않으셔도 됩니다.

  HTML에 스크립트 계속 적히는거 싫어하는 스스로를 위해서(?) 만든 파일입니다.

prognroll.js
0.00MB

  파일 업로드 후, 다음 한줄만 삽입하면 작동.

<script src="./images/prognroll.js"></script>

 

 

 

반응형