티스토리 블로그 프로그레스 바(progress bar) 상단 진행 바 적용 법
평소에 다양한 티스토리 블로그들을 둘러보는 게 저의 소소한 심심풀이가 되었는데요. 가끔 둘러보다 보면 블로그 상단에 게이지바? 진행 바? 같은게 보여서 신기한 마음에 알아보게 되었죠. 정식명칭은 프로그레스 바(progress bar) 라고 합니다. 지금 제 블로그 상단을 보시면 글의 진행도를 알려주는 진행바가 생긴걸 확인할 수 있으실텐데요. 오늘은 이 진행바 만드는 방법에 대해서 알아보려고 합니다. 시작하기 전에 어려울 거라고 생각하실수도 있겠지만 단순하게 코드를 복사 붙여 넣기만 하시면 되는 단순작업이라 크게 어려운 부분은 없을 거라 생각합니다.
블로그 관리 설정 > 꾸미기 > 스킨 편집
블로그 관리 설정으로 들어가신 후 꾸미기 메뉴에 있는 스킨 편집을 클릭해서 들어가 주시면 됩니다.
HTML 편집
스킨 편집으로 들어가면 위 화면처럼 보이게 되는데요. 여기서 Html 편집을 클릭해서 들어가 줍시다.
<body>와 </body> 사이에 코드 붙여 넣기
|
1
2
3
4
5
6
7
|
<!-- progress bar start -->
<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script>
<script type="text/javascript">
$(function() { $("body").prognroll( {color:"#47aaf7"} );
$(".content").prognroll({ custom:true});
}); </script>
<!-- progress bar end -->
|
cs |
해당 코드를 <body>와 </body> 사이에 붙여 넣기 후 적용해주시면 됩니다. 추가적으로 진행 바의 색상을 변경하고 싶으면 color 색상 코드 값을 자신이 원하는 색상 코드로 변경해주시면 됩니다.
적용 완료 후
블로그를 아래로 스크롤할수록 상단에 있는 게이지 바가 올라가는 모습을 볼 수 있습니다. 반대로 블로그를 위로 스크롤 할 시 게이지바가 내려가게 됩니다.
이제부터 블로그 TIP에 대한 포스팅도 작성하려고 합니다. 최대한 초보자분들도 쉽게 따라 할 수 있도록 간단하게 설명해드리도록 하겠습니다. 궁금하신 점 댓글에 적어주시면 신경 써서 답변해드리겠습니다.
함께 보면 좋은 글
'블로그 TIP' 카테고리의 다른 글
| 2025년 네이버 블로그 / 티스토리 블로그 장단점 비교 (0) | 2025.02.11 |
|---|---|
| 네이버 플레이스 리뷰 노출 안 되는 이유와 해결방법 (0) | 2025.01.12 |
| 티스토리 블로그 하루 포스팅 횟수제한 있을까? (0) | 2020.08.02 |
댓글