Blogger 페이지 상단에 읽기 진행률 바 설치해보기 (RPI 판독위치표시기)

 Blogger 페이지 상단에 읽기 진행률 바 설치해보기

블로그 게시물이나 페이지 기사의 판독 위치를 에니메이션으로 보여줍니다. 

페이지를 스크롤 할때 페이지 진행률 바가 늘어나네요 ^^

코드 추가하면 간단히 적용됩니다.

1

</body>

cs

1. body 코드 전에 아래 Javascript 코드를 삽입해주세요

1 2 3 4 5 6 7 8 9 10 11

<script> window.onscroll = function() {     myFunction() }; function myFunction(){     var winScroll = document.body.scrollTop || document.documentElement.scrollTop;     var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;     var scrolled = (winScroll / height) * 100;     document.getElementById("myBar").style.width = scrolled + "%"; } </script> Colored by Color Scripter

cs

2. ]]> 코드를 찾아 그 전에 아래 코드를 넣어주세요

1 2 3 4

<style> .progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;} .progress-bar{height:5px;background:#F86152;} </style> Colored by Color Scripter

cs

3. <body...... 코드 다음에 아래 코드를 넣어주세요

1 2 3

<div class='progress-container'> <div class='progress-bar' id='myBar' style="width:0%;"></div> </div> Colored by Color Scripter

cs

4. Customize

Style CSS 코드에서 height 값과 background 값을 수정하시면 커스터마이징이 가능합니다.