){kind=link}
이번 글에서는 블로그스팟 진행바 상단에 표시하기 방법에 대해서 알아보도록
하겠습니다.
이번 글의 코드를 적용하시면 위 사진처럼 블로그 상단에 진행바 스크롤이 적용됩니다!
스크롤 진행바, 프로그레스바, 스크롤 비율, 읽기 진행바 등등.. 다양한 이름을
가지고 있는 진행바인데요!
본문의 코드만 테마에 적용하면 바로 블로그 상단에 진행바가 나타나니
따라해보시기 바랍니다.
블로그스팟 진행바 코드
화면 스크롤을 내리면 블로그 상단에 진행바가 나타나게 하는 코드입니다.
먼저 이 코드를 복사하고, 테마 > HTML 편집으로 이동하겠습니다.
<!-- 블로소득 스크롤 진행바 START -->
<div id="scrollProgressBar"></div>
<style>
/* 진행바 스타일 */
#scrollProgressBar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 4px;
background: #29a329;
z-index: 9999;
transition: width 0.25s ease-out;
}
</style>
<script>
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrollPercent = (scrollTop / scrollHeight) * 100;
document.getElementById("scrollProgressBar").style.width = scrollPercent + "%";
};
</script>
<!-- 블로소득 스크롤 진행바 END -->
위 코드를 복사하고, 테마 메뉴의 HTML 편집으로 이동하겠습니다.
붙여넣기 위치는 테마마다 모두 다르기 때문에 Fletro_Pro V6.1 테마 기준에서 말씀드리겠습니다.
(특정 위치를 정확히 넣는게 중요한게 아니라 테마 상단부분에 넣으면 대부분 적용됩니다)
저는 <-- Site Verification --> 부분 아래에 붙여넣었습니다.
사이트 인증(구글 서치콘솔, 애널리틱스, 네이버 서치어드바이저 등) 아래에 넣었는데 정상 작동됩니다.
다시한번 말씀드리지만 테마마다 이런 부분이 없는 것도 있기 때문에 적절한 위치에 넣으시면 됩니다.
만약 작동을 안한다면 좀더 상단 부분에 넣고 저장하면서 확인해보시면 되겠습니다.
블로그스팟 진행바 상단에 표시하는 이유
어떻게 보면 상단에 표시되는 진행바의 경우 불필요한 코드일수도 있습니다.
그럼에도불구하고 넣는 이유는 방문자(검색자)가 이 글을 어느정도 읽었는지 바로 보여주기 때문입니다.
책은 읽다보면 얼마나 남았는지 알수 있지만, 온라인 콘텐츠는 그런 부분을 가늠하기 어렵습니다.
도착지점을 알고 달리는것과 언제 끝날지 모르고 달리는 것은 체류시간에 큰 영향을 줍니다.
물론 이 코드로 인해서 드라마틱한 체류시간의 상승을 불러오기엔 어려움이 있을수 있습니다.
진행바와 같은 부수적인 것들은 좋은 콘텐츠를 만났을때 빛을 발휘하기 때문이죠!
우선 글쓰기에 집중하면서 오래 걸리지않는 진행바 적용 같은 것들은 하나씩 미리해두시기 바랍니다.
.png "블로소득")