우선 다른 여러 블로그들에서 볼 수 있듯이
Tistory html 편집에 들어간 후 <head> </head> 안에
<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:"#96BB7C"} );
$(".content").prognroll({ custom:true });
});
</script>위의 코드를 넣어 ProgressBar를 추가하면 된다
하지만
이런 메인 홈 화면에서도 ProgressBar가 있는 이상한 모습을 확인할 수 있다💢
이 문제는
아래와 같이 4번째 라인의 "body" 대신에 "#tt-body-page"를 넣음으로써 해결할 수 있다.
<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script>
<script type="text/javascript">
$(function() {
$("#tt-body-page").prognroll( {height:5, color:"#96BB7C"} );
$(".content").prognroll({ custom:true });
});
</script>
Tistory는 메인 화면인지, 카테고리 화면인지, 게시글 화면인지에 따라 body의 id 값이 다 다른데
게시글 화면에서만 ProgressBar가 필요하므로 body 대신 그의 정확한 id값인 #tt-body-page를 넣으면 된다^0^
'ETC' 카테고리의 다른 글
| [Tistory] 코드블럭 들여쓰기 안될 때 해결 방법 (0) | 2023.06.22 |
|---|---|
| [Notion] 노션 TOC 목차 항상 띄워 놓기 - Notion Boost (2) | 2022.03.25 |
| [Tistory] 스킨 편집 > html 편집 에 대한 꿀정보..🍯 (0) | 2022.01.04 |
| 색상 조합, 그라데이션 색 조합 추천 사이트 (colorhunt, 2colorcombinations, uigradients) (0) | 2021.12.08 |
| [Tistory] 글 작성 시간 숨기기 (4) | 2021.11.24 |