티스토리 블로그: '진행 바' 만들기

티스토리 블로그 꾸미기: Progress Bar 만들기

---

liis - Progress Bar

liis 블로그 현재 이 포스팅에서도 보다시피, 스크롤을 내릴 때마다 페이지 상단에 진행 바(Progress Bar)가 나타난다. 전체 글의 어느 정도를 읽어는지 알 수 있어서, 긴 글도 끝까지 읽을 수 있도록 유도하는 역할을 한다. 나름 스크롤 내리는 재미도 있다^^

 

티스토리는 html 소스를 직접 수정할 수 있어서 Progress Bar도 쉽게 만들 수 있다. 아래에는 현재 내 블로그에 들어가 있는 소스이다. (소스는 두드림님 블로그에서 관련 내용을 토대로 만들었다.)

---

소스 입력하는 위치

나는 '티스토리 블로그 관리자 페이지 > 스킨편집 > html 편집'에서 html 소스 화면의 가장 아래에 다음 소스를 추가하였다.

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

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

↓ 세부적인 스타일은 다음과 같이 바꿀 수 있다.

 

 

01. 위치

Progress Bar가 나타나는 페이지 위치는 위 소스를 보면 ".hgroup"이다. .hgroup로 설정하게 되면, 쉽게 말해 메인 화면을 제외한 콘텐츠가 있는 나머지 페이지에는 모두 노출된다라는 뜻이다. 만약 메인 화면까지 포함하여 모든 페이지에서 Progress Bar가 나오게 하고 싶다면 .hgroup 대신 " " 안에 html이라고 적으면 된다. 

 

02. 컬러

Progress Bar 색깔은 위 소스에서 color 텍스트 옆에 있는 '#~'에서 숫자를 바꿔주면 된다. 디자인 툴이 없어서 원하는 컬러 값을 쉽게 찾을 수 없는 분들이라면, 어도비컬러(Adobe Color) 사이트를 추천한다.

 

03. 굵기

마지막으로 Progress Bar 굵기를 조정하려면 height 텍스트 옆에 있는 값을 변경해주면 된다. 나는 5px의 굵기로 만들었는데, 수치를 바꿔가면서 원하는 스타일을 찾아가면 될 듯하다.

 

 

모바일 화면에서도 그대로 적용된다^^!

---

by. liis (Life is like this)