스크롤 진행률 표시가 있는 블로그를 꽤 많이 보았는데요. 일반적으로 이러한 읽기 진행률 표시는 긴 내용이 있는 블로그 게시물에 사용되며 게시물을 모두 읽는 시점까지 얼마나 남았는지 이해하는 데 도움이 됩니다.
구글 블로그는 간단한 코드를 추가하면 읽기 진행률 표시줄을 쉽게 추가할 수 있습니다.
구글 블로그에 읽기 진행률 표시줄을 추가하는 방법
- Blogger 계정에 로그인합니다.
- 테마 메뉴로 이동합니다.
- HTML 편집을 클릭합니다.
-
<body>태그 바로 아래에 다음 코드를 붙여 넣습니다.
<div id="mybar"></div> <style> #mybar { position: fixed; top: 0; left: 0; width: 0; height: 3px; z-index: 99; transition: all .2s ease; background: #000; } </style> -
</body>태그 바로 위에 다음 코드를 붙여 넣습니다.
<script> function myBar() { var e = (document.body.scrollTop || document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100; document.getElementById("mybar").style.width = e + "%" } window.onscroll = function() { myBar() }; </script> -
이제 테마 저장을 클릭하고 변경된 사항을 확인합니다.
미리 보기
여기에서 미리 볼 수 있습니다. 도움이 되었길 바랍니다.