Hướng Dẫn Tạo Thanh Reading Progress Bar Cho Blogger

Tạo thanh tiến trình đọc (reading progress bar) cho Blogger

Xin chào các bạn, trong bài viết này mình sẽ hướng dẫn các bạn cách tạo thanh reading progress bar cho blogger (hay còn gọi là thanh tiến trình đọc). Bạn chỉ cần áp dụng những đoạn code đơn giản dưới đây.

---

Hướng dẫn tạo thanh tiến trình đọc cho blogger

Thanh tiến trình đọc giúp cho người đọc biết được độ dài của bài đăng và tạo nên sự thu hút cho blog của bạn. Để thực hiện các bạn làm như sau:

Bước 1: Đăng nhập vào trang quản lý Blogger.

Bước 2: Vào tùy chỉnh HTML.

Bước 3: Bạn copy đoạn css dưới đây và dán trên ]]></b:skin>

  #Reading-progress { position: fixed; top: 0px; width: 100%;height: 2px; margin-top: 20px; left: 0px; z-index: 99; } .bar { height: 5px; background: var(--linkC);;position: fixed; top: 0px; z-index: 99; } 
.drK .bar {background: var(--darkU);}
.pRs{border:1px solid var(--darkBa);background:var(--darkBs)}.pRs{border:.1px solid var(--contentL);top:0;left:0;z-index:999;height:6px;display:-webkit-box;display:-ms-flexbox;display:flex;background:#e9ecef}.pBar{top:0;left:0;z-index:2;border-radius:.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content;transition:width .6s ease}.pSt{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:50px 50px}

.pBar{top:0;left:0;z-index:2;border-radius:.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content;background:var(--linkC);transition:width .6s ease}.pSt{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:50px 50px}
.drK .bar {background: var(--darkU);}

.pAn{animation:AnPr 2s linear infinite}.pSt1{background-image:linear-gradient(45deg,rgba(204,204,204,.15) 25%,transparent 25%,transparent 50%,rgba(204,204,204,.15) 50%,rgba(204,204,204,.15) 75%,transparent 75%,transparent);background-size:50px 50px}.drK .pBar{background:var(--darkU)}.drK .pSt{background-image:linear-gradient(45deg,rgba(255,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(255,0,0,.15) 50%,rgba(255,0,0,.15) 75%,transparent 75%,transparent);background-size:50px 50px}

Bước 4: Bạn copy đoạn html dưới đây và dán trên </header>

            <div class='addons section' id='progress-bar'>
<div class='pRs'>
<div class='pBar pSt pAn' id='Progress-bar'/>
</div>

</div>

Bước 5: Bạn copy đoạn js dưới đây và dán trên </body>

  <script type='text/javascript'> window.addEventListener(&#39;scroll&#39;, function(e) { var s = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; var body = document.body; var html = document.documentElement; var d = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); var c = window.innerHeight; var position = (s / (d - c)) * 100; document.getElementById(&#39;Progress-bar&#39;).setAttribute(&#39;style&#39;, &#39;width: &#39; + position + &#39;%&#39;); }); </script>

Bước 6: Bạn lưu lại và xem kết quả.

Video hướng dẫn chi tiết cách tạo thanh tiến trình đọc cho blogger.

Kết luận

Trên đây là code reading progress bar cho blogger . Nếu bạn có bất kỳ câu hỏi hoặc khiếu nại về bản quyền, hãy để lại ý kiến của bạn bên dưới để mình biết. Chúc bạn có một ngày học tập và làm việc hiệu quả.