그 외 정보

티스토리 블로그 프로그레스바(Progress Bar) 적용하는 방법

게임어바웃 2023. 1. 12. 19:49

티스토리 블로그 프로그레스바, 스크롤 진행률 적용시키면 블로그 글을 읽을 때 글 상단에 진행률이 표시 된다. 해당 페이지를 읽어내려가면서 글 상단을 보자.

 

위 글은 오기세이 스킨에 브레드크럼(이동경로)에 대한 글이다. 글을 읽어 내려 갈수록 주소창 아래 프로그레스바(Progress Bar)를 볼 수 있다.

 

프로그레스바를 적용하기 위해서는 먼저 스킨 편집에 있는 html편집에 들어가서 HTML 탭에서 아래 코드를 <body> 태그 안에 넣어주면 된다.

 

<!-- toc script end-->
<!-- 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 -->

prognroll({color:"#FF9800"}); 태그에서 바의 색을 변경할 수 있다.