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 class='header' id='header'> or <!--[ Header section ]--> and paste the following Codes just below to it.
<!--[ Progress Bar ]-->
<b:section class='Reading Process bar' id='Reading processing bar by (T_Mk)' 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!
Conclusion
In this article I have made a tutorial on How to add Reading processing bar. I hope you have liked it and Please do share with your friends and follow our blog for more