How to add Reading processing bar [Style 2]

Hello, Bloggers! Welcome to Raghavendra Technic.

Blog we have seen many websites using the reading progress bar and you also thinking about how to add a reading progress bar to your Blogger website. So we published an article to show you how to add a reading progress bar in Blogger. So without wasting time let's check!

First of all, we would like to give some information about the Reading Progress bar.

How progress bar works?

When the website visitors visits the website that adds a reading progress bar they can see a line going front when scrolls down and going back when scrolls up it works with using some codes in your Blogger website.

Should you add a Reading progress bar?

In my opinion, I will tell yes you want to add a reading progress bar in your Blogger website because your website visitors will think of this like as a challenging example: to read the article completely and the progress bar will help to read the article completely for visitors and your website impressions increases.

How to add a reading progress bar in Blogger?

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

/* Reading Progress Bar by (T_MK)  */ .drK .pRs{border:1px solid var(--darkBs);background:var(--darkBa)}.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}.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}

---

Step 6: Now search the code </header> and paste the following Codes just above to it.

<!--[ Progress Bar ]-->
 <b:section class='Reading Process bar' id='Reading Process bar by (T_MK) Style 2' 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'>
 <!--[ Reading Progress Bar ]-->
 <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>

---

Step 7: Now click on Save by clicking this icon

Step 8: That's done!

---

Credit

Created by : Shiva Technic World.

Conclusion

In this article I have made a tutorial on How to add Reading processing bar [Style 2]. I hope you have liked it and Please do share with your friends and follow our blog for more

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Raghavendra Technic | All Rights Reserved

© Copyright:
raghavendratechnic.blogspot.com