Đăng ký kênh Youtube

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

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
tạo thanh reading progress bar
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ả.

2 comments

  1. Bổ ích quá nhaa! Cảm ơn bạn tôi nhá!
    1. Oke ông nha
➥ Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Bạn hãy dán link ảnh vào khung bình luận và ấn xuất bản, ảnh sẽ được tự động tải lên.
➥ Bạn có thể Upload Ảnh bất kì để lấy link và dán vào khung bình luận và ấn xuất bản ảnh sẽ được tải lên.
➥ Không spam trong khung bình luận, hạn chế viết tắt.
➥Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.