[Tistory 운영] 오일남: 내가.. 어디까지.. 봤더라? (feat. 스크롤 상태표시줄Progress bar 설정)

1. 주절주절

요즘 시대에는 Blog, Tistory, Wiki 등 방대한 정보가 쏟아져 나오고 있습니다. 하나의 정보글(또는 포스팅)은 짧게는 몇 줄, 길게는 몇 페이지 이상의 긴 글이 존재하고 있죠. 사용자 입장에서는 이렇게 긴 글을 접했을 때 현재까지 어느 정도 읽었고 앞으로 얼마나 남았는지 궁금할 때가 있더라구요. 그러한 상태표시줄(Progress Bar)을 이용하여 현재 상태를 확인할 수 있도록 Tistory blog를 수정해보도록 하겠습니다.

(오일남: 내가,,, 어디까지,,, 봤더라? )

 

2. 설정 방법

2-1. [스킨편집]: 블로그 관리자 페이지 > 꾸미기:스킨 편집

1) 하단에 있는 이미지와 같이 관리페이지에 있는 스킨편집을 클릭합니다.

스킨편집 메뉴 위치

2) 새로운 탭이 뜨고 해당 창에는 스킨편집을 할 수 있는 메뉴들이 구성되어 있습니다.

2-2. HTML 편집

1) 스킨편집 페이지를 열었다면 우측에 [html편집] 버튼을 볼 수 있는데요.
2) 해당 버튼을 클릭하여 html이라는 소스코드를 조금 추가하려 합니다.
3) 추가할 소스 코드

<div class="progress-container"> 
      <div class="progress-bar" id="indicator"></div> 
</div>

4) 앞서 알려드린 소스 코드를과사이 아무런 공간에 삽입해주시면 됩니다.

2-3. CSS 편집

1) html 을 수정하였다면 마지막으로 CSS 탭을 클릭하시고 css 코드를 조금 추가해주면 끝납니다.
2) 추가할 코드

/* Progress Bar */
.progress-container {
  position: fixed; /* 상단에 고정 */
  top: 0; /* 위치는 위에 딱 붙게 */
  width: 100%; /* 넓이는 100% */
  height: 4px; /* 높이는 4px */
  background: transparent; /* 배경색 투명하게 */
  z-index: 1000; /* 다른 요소들보다 위에 보이게 */
}
.progress-bar {
  height: 4px;
  width: 0%;
  background: #6acbe1; /* 표시될 배경색 */
}

3) 앞서 알려드린 소스 코드를 아래 이미지와 같이 추가하면 끝

3. 설정 후 블로그 글

• 테스트 삼아서 기존 포스팅 글을 열람해보았습니다. (https://blackcon.tistory.com/368)
• [주소표시줄] 아래에 보면 파란색 bar가 하나 생긴걸 확인하였구요.
• 포스팅의 초반에는 짧았다가, 후분바에 가니 Progress bar가 증가한 것을 볼 수 있네요!

 

EOD ... 

End of document