반응형
티스토리 블로그 포스팅에 스크롤 진행률이 나타나도록 하고, 또 원하는 색상으로 변경하는 방법을 알아보겠습니다.
html 편집 모드에서 <head>와 </head> 사이에 코드를 복사에서 붙여 넣으면 진행률이 나타나게 됩니다.
이때, 색상을 변경하고 싶다면 코드 중 색상 코드 부분의 문자를 변경하면 됩니다.
색상 코드는 픽픽이라는 무료 이미지 편집 프로그램을 사용하면 간단하게 확인 가능합니다.
상세한 방법은 아래 내용을 참고해주시길 바랍니다.
1. 태그 코드 복사
하기 박스 내의 태그 코드를 복사합니다.
<!-- // Progress Bar -->
<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script> <script type="text/javascript"> $(function() { $("body").prognroll({ height: 7, color: "#75a3e8" }); $(".content").prognroll({ custom: true }); });
</script>
2. 블로그 관리자 > 스킨 편집 > HTML 편집
관리자 모드 스킨 편집을 클릭한 후에 오른쪽의 HTML 편집을 클릭하여 HTML 코드로 접근합니다.
3. 복사한 태그 코드 <head></head> 내에 붙여 넣기 및 적용
복사한 태그 코드를 <head>와 </head> 사이 아무 곳에나 붙여 넣어 주고 적용을 클릭합니다. 참고로, 붙여 넣은 코드 중 height: 7은 스크롤 진행률 바의 두께를, color: "#BFAE69"는 색깔을 의미합니다.
4. 픽픽 프로그램을 원하는 색 HTML 색상 코드값 추출하기
- 우선 픽픽이라는 프로그램을 다운로드하여 실행합니다.
픽픽 무료 다운, 활용법 소개(캡처 사진 편집 프로그램)
블로그 작성하다보면, 화면을 캡쳐하고 그 이미지에 텍스트, 화살표, 도형이나 모자이크같은 것을 넣어야 할 때가 많다. 그리고 많은 사진을 업로드하다보면 포스팅 용량이 너무 커지기 때문에
alto3.tistory.com
- 프로그램 실행 후 색상 추출 도구를 클릭합니다.
- 실행 후 활성화된 +모양 커서를 원하는 색상에 올려놓으면 코드값이 나타납니다. 이 경우 ea4335인 것으로 확인이 됩니다. 이 코드값을 보고 적어두거나, 클릭해서 새롭게 나타난 창에서 복사를 해도 됩니다.
5. 내 블로그 스크롤 진행률 바에 원하는 색상 코드값을 적용하기
앞서 태그 코드를 붙여 넣을 때와 같이 블로그 관리자 창에서 html 편집 모드로 진입합니다. 여기서 앞서 붙여 넣은 코드 중 color: "#BFAE69"의 # 뒤의 영문자 조합을 추출한 색상 코드로 대체하면 색상 변경이 완료됩니다.
반응형
'수익형 블로그 운영' 카테고리의 다른 글
| 티스토리 블로그 위첨자/아래첨자 넣기 (0) | 2022.10.17 |
|---|---|
| 티스토리 블로그 오디세이 스킨 본문 글자 크기, 줄 간격 변경하기 (0) | 2022.09.12 |
| 티스토리 블로그 단축키 정리 (0) | 2022.09.05 |
| 티스토리 글감 검색 기능 업데이트 (0) | 2022.08.30 |
| 아직도 글 수정으로 티스토리 블로그 카테고리를 변경하고 있나요? (0) | 2022.08.30 |
| 태그의 역할과 블로그에 미치는 영향 (0) | 2022.08.24 |
| 티스토리 블로그 본문에 없는 대표 이미지 사용법 (0) | 2022.08.21 |
| 애드센스 승인 후기 (2) | 2022.08.20 |