Add a Multi-Color Reading Progress Bar in Plus UI v2.6.5, Blogger Template

Brief

Reading Progress Bar enhances the user experience by displaying a progress bar at the top of the page, showing how much of the content has been read as the user scrolls. Such an addition not only improves engagement but also provides readers with a satisfying way to track their reading progress, making it easier to navigate through lengthy posts. By following the step-by-step instructions to insert the necessary code into the Blogger theme, users can effortlessly implement this feature and enhance the readability of their blog content.

Procedure

1. Go to Blogger Dashboard.
2. Click  icon next to the Customize button.
3. Backup your Theme and then click Edit HTML, you will be redirected to the editing page.
4. Now, find this  </header> and paste the below code just above it;

   <b:section class='Reading Process bar' id='Reading Process' showaddelement='false'>
   <b:widget id='HTML98' locked='true' title='Reading Progress Bar' type='HTML' version='2' visible='true'><b:widget-settings><b:widget-setting name='content'><![CDATA[<!--[ This is Progress Bar that appears at top showing the reading progress of a page ]-->]]>
   </b:widget-setting></b:widget-settings><b:includable id='main'><div class='pRs'> <div class='pBar pSt pAn' id='progBar'/></div>
   <script type='deferjs'> /*<![CDATA[*/ 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("progBar").style.width = scrolled + "%";} /*]]>*/</script>
   </b:includable></b:widget></b:section>

5. Now, find the code ]]></b:skin> and paste the below code just above to it.

   .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;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}
   .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}
   /* Dark Mode */
   .drK .pBar{background:var(--darkU)}
   .drK .pRs{border:1px solid var(--darkBs);background:var(--darkBa)
   .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}

6. Save it

The article was specifically made for the Plus UI v2.6.5 Blogger template by Fineshop Design. The instructions and codes provided in the article are optimized for this particular template. However, it is highlighted that developers with adequate knowledge and understanding of coding and template structures may adapt and implement the provided codes for other Blogger templates or platforms. While the article focuses on Plus UI v2.6.5, its content can be modified as needed for broader use at the discretion of the developer.