[티스토리 블로그 꾸미기] 성능 최적화된 프로그레스바 3분 만에 추가하기
![[티스토리 블로그 꾸미기] 성능 최적화된 프로그레스바 3분 만에 추가하기](https://blog.kakaocdn.net/dna/obovA/btsHQCosPUD/AAAAAAAAAAAAAAAAAAAAAIKc6t1pRcUI1WXZUcIOYY0k2op_SgqqmR-CMSp_LY4_/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1761922799&allow_ip=&allow_referer=&signature=cQjmWOvDZclM%2BxvtxmGi0MBtvIA%3D)
안녕하세요! 이번 글에서는 티스토리 블로그에 성능이 최적화된 프로그레스바를 3분 만에 쉽게 추가하는 방법을 알려드리겠습니다. 프로그레스바는 방문자들이 블로그 내용을 읽으면서 얼마나 스크롤했는지 시각적으로 보여주어 사용자 경험을 향상시키는 중요한 요소입니다. 이 기능을 추가하면 페이지의 남은 부분을 직관적으로 보여줘 방문자가 끝까지 읽을 가능성이 높아집니다.
잘 모르는 코드가 있거나, 필요한 코드는 자주 쓰는 CSS 속성 총정리 게시글에서 확인하세요! 따라 하기 쉽도록 단계별로 설명해 드릴 테니, 걱정하지 마세요. 이제 시작해볼까요?
이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다.
스킨 편집 들어가기
관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.
새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다.
HTML 코드 추가
스킨 편집 창에서 '<body'를 검색하거나, 아래로 내려가서 찾습니다.
<body
아래 코드를 복사하여 '<s_t3>' 아래 빈칸을 만들어 붙여 넣습니다.
<!-- 프로그레스바 -->
<div id="mybar"></div>
<script>
let myBar = document.getElementById('mybar'); // 프로그레스바 요소를 선택합니다.
function ProgressBar() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 현재 스크롤 위치를 가져옵니다.
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; // 전체 문서의 높이에서 현재 창의 높이를 뺀 값을 가져옵니다.
const scrollPercentage = (scrollTop / scrollHeight) * 100; // 스크롤 비율을 계산합니다.
myBar.style.width = scrollPercentage + '%'; // 프로그레스바의 너비를 스크롤 비율에 따라 설정합니다.
}
function throttle(func, limit) {
let inThrottle;
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
function setupProgressBar() {
window.addEventListener('scroll', throttle(ProgressBar, 50)); // 50ms마다 이벤트 처리를 적용합니다.
}
function teardownProgressBar() {
window.removeEventListener('scroll', ProgressBar); // 스크롤 이벤트 리스너를 제거합니다.
}
window.addEventListener("pageshow", function(event) {
if (event.persisted) {
ProgressBar();
}
setupProgressBar(); // 페이지가 표시될 때 이벤트 리스너를 설정합니다.
});
window.addEventListener("pagehide", function(event) {
if (event.persisted) {
teardownProgressBar(); // 페이지가 숨겨질 때 이벤트 리스너를 제거합니다.
});
setupProgressBar(); // 초기 설정 시 이벤트 리스너를 설정합니다.
</script>
CSS 코드 추가
우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다.
CSS 파일에서 맨 아래로 내려 빈칸을 만들어 아래 코드를 복사하여 붙여 넣습니다. (그라데이션은 마음에 드는 색상으로 바꿔도 괜찮습니다.)
/* 프로그레스바 */
#mybar {
position: fixed; /* 화면 고정 */
height: 5px; /* 프로그레스바 높이 */
z-index: 9999999; /* 맨 앞에 위치 */
transition: all .1s ease; /* 너비 전환 속도 */
background: linear-gradient(to right, #74B9FF, #A29BFE, #D980FA); /* 그라데이션 */
}
미리보기
미리보기를 눌러 블로그 상단에 프로그레스바가 적용되었는지 확인합니다.
결론
이번 글에서는 성능 최적화된 프로그레스바를 티스토리 블로그에 3분 만에 쉽게 추가하는 방법을 알아보았습니다. 아마 3분보다 적게 걸리셨을 것입니다. 프로그레스바를 통해 방문자들에게 더 나은 사용자 경험을 제공하고, 시각적으로도 예쁘게 보여 더욱 매력적인 블로그가 되었을 것입니다. 궁금한 점이나 문제가 있으면 댓글로 알려주세요!
'인사이트 > 블로그' 카테고리의 다른 글
| [티스토리 블로그 꾸미기] 댓글 오류 안내창 3분 만에 꾸미기 (0) | 2024.06.10 |
|---|---|
| [티스토리 블로그 꾸미기] 2차 도메인 연결 시 댓글 오류 1분 해결 방법 (0) | 2024.06.09 |
| [티스토리 블로그 꾸미기] 성능 최적화된 자동 목차 쉽게 만드는 방법 (3) | 2024.06.07 |
| [티스토리 블로그 꾸미기] 홈(커버) 아이템 종류 알아보기 (0) | 2024.06.06 |
| [티스토리 블로그 꾸미기] 썸네일 크기 쉽게 바꾸기 (3) | 2024.06.05 |
댓글