Loading Progress Bar for your Blogger Website and other any websites to work.
|
| © Finestap Design | Loading progress |
Let's Install Progress Bar.
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.
If your template has a dark mode feature, and if you want a different color when in dark mode, you can customise the codes as per your need. Each template can have a different dark mode class, so please adjust it, you can replace the marked class with your template dark mode class.
/* pace.js v1.2.4 */ .pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none} .pace-inactive{display:none} .pace .pace-progress{background:#ff0000;position:fixed;z-index:500;top:0;right:100%;width:100%;height:2px}
Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.
Step 6: Now add the following JavaScript Code just above to </head> tag. If you don't find it, it is probably already parsed which is </head>.
<!--[ Progress JavaScript ]--> <script src='https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js'/>
Lazy Progress
Important!Here are two JavaScript codes you can use any one of them for your website. JavaScript Lazyload Code is given below. That will increase the performance of your website.
<!--[ Progress JavaScript (Defer.js / Lazyload) ]-->
<script>/*<![CDATA[*/ Defer.js('https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js', 10); /*]]>*/</script>Step 7: Save the changes by clicking on this icon