How To Add Reading Progress Bar In Your Blogger Website?

Hello Guys! how are you? I hope you are all good. Welcome Freemium Tech website's today's article. Today we will show you how to set reading Progress bar in your blogger website? So, If you are looking for a reading Progress bar script for Blogger then definitely this post will help you.

Should you add a Reading Progress bar?

As I would see it, I will tell yes you need to add a perusing progress bar in your Blogger site on the grounds that your site guests will consider this like a difficult model, to peruse the article totally and the advancement bar will assist with perusing the article totally for guests and your site impressions increments.

How progress bar works?

At the point when the site guests visits the site that adds a perusing progress bar they can see a line going front when looks down and returning when looks up it works with involving a few codes in your Blogger site.

So, without wasting important time let's check How To Add Reading Progress Bar To Blogger?

Before Add this let's see a preview

Demo

How To Add 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> or /*]]>*/</style> and paste the following CSS Codes just above to it. Or you can paste it above <head/> tag by adding <style></style>

/* Reading Progress Bar by Freemium Tech */ .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}

Don't forget to change .drK with your website theme dark mode class, if your theme did not have a dark mode feature then keep default!

Step 6: Then find the following code. 👇

header{position:relative

Step 7: Then change the word relative to sticky, like this. 👇

header{position:sticky;border-bottom:0

Step 8: Now search the code </header> or <header> and paste the following Codes just above for </header> or bellow for <header> to it.

<!--[ Progress Bar ]-->

<b:section class='Reading Process bar' id='Reading Process bar by Freemium Tech' 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>

If you want to add the Reading Progress Bar to the top of your website, add the code below the <header> And if you want to add below name-ber then add the code above </header>.

Step 9: Save or Publish the html changes by clicking on Save Icon.

That's done. 👍 You are Successfuly set reading Progress bar.

CONCLUSION

In this article, I shared with you How To Add Reading Progress Bar In Your Blogger Website? I hope you have liked It. Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily.

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.