티스토리에 인디케이터 (프로그래스 바 - Progress Bar) 만드는 방법

오늘은, 티스토리에 '인디케이터'를 구현하는 방법에 대해서 알아보겠습니다.

 

 티스토리 인디케이터(표시기) 간단설치 방법

 

사실, 매우 간단합니다. 복사, 붙여넣기만 하면 되거든요!

 

☞ 바로, 아래에 첨부된 파일을 받아주세요.

 

티스토리 인디케이터 html.txt
0.00MB

 

▼ 파일이 다운로드되면, 텍스트 파일을 열어주세요. 아래와 같은 html 코드가 있을거예요.

 

이 간단한 코드가 표시하는 요소는 2가지 입니다.

 

첫번째 스크립트는 CDN이예요. 인디케이터 스크립트를 실행할 javascript를 가져올 URL 주소입니다.

두번째 스크립트는 사용자가 변경 가능한 설정값입니다. 인디케이터의 색상과 높이를 수정할 수 있습니다.


 default값은 '높이-5px, 색상-#555(회색)'로 설정되어 있습니다.

사용자의 기호에 따라, 높이는 px단위로, 색상은 16진수 색상값을 통해서 변경하실 수 있습니다.

 

 


▼ 원하는 설정값으로 변경하셨다면, 이제 티스토리 스킨의 <HTML 편집> 항목에서 코드를 <HEAD> 부분에 붙여넣으시기만하면 됩니다.

 

설정값 e.g.) 코드 내에서, height: 7px, color: "#000000"

 

 

 티스토리 인디케이터(표시기) 완성본 예시

 

▲ 깔끔하게 설치가 잘 되었습니다. 티스토리 인디케이터는 화면의 가로값을 모두 사용합니다.

독자가 화면을 내릴수록, 인디케이터의 바는 오른쪽으로 점차 이동합니다. 이제, 친화적인 인터페이스로, 더 많은 독자를 확보해 보세요!

 

 티스토리 인디케이터(표시기)에 대한 고찰

 

▲ 티스토리 인디케이터, 진행바, 로딩바, 프로그래스 바(Progress Bar) 등으로 불립니다.

 

☞ 이름이 아주 다양하고, 검색하기 힘든 관계로 저도 몇 시간을 검색 끝에 겨우 발견했습니다.

 

- 다른 분들은 빠르게 설치하셨으면 해서, 여러가지 키워드를 써둡니다. 이 포스팅이 빨리 한분께라도 도움이 되었으면 좋겠어요. 여러분의 시간은, 소중하니까요! -

 

▲ 인디케이터는, 독자가 글을 얼마나 읽었는지를 직관적으로 보여주어, 블로그의 신뢰도를 올립니다.

 

☞ 저 같은 초보 블로거들은, 다른 고수님들의 인디케이터를 보고 굉장히 탐이 났었어요. 인디케이터 하나만으로, 왠지 모를 전문가의 향기?가 느껴진달까.

 

여러 시행착오가 있었지만, 결국 인디케이터를 설치할 수 있었던 것처럼, 저도 언젠간 '고수'가 될 수 있으리라 생각해요.

 

사담이 길었습니다! 오늘은, 티스토리 인디케이터(표시기)를 빠르게 설치하는 방법에 대해서 알아보았습니다.

 

제 포스팅이, 저처럼 인디케이터 설치방법을 몰라 백방으로 뛰어다니시는 초보분들의 눈에 띄기를 간절히 바랍니다.

 

이상입니다. 제가 티스토리에서 헤매는 한, Astralo의 티스토리 Series는 계속됩니다!

반응형

댓글

Designed by JB FACTORY