Home
Blogger

Progress Bar in Blogger | How to Create a Progress Bar in Blogger Website

Assam Job

Progress Bar in Blogger Website


Creating a progress bar in your Blogger website can enhance user experience and provide visual feedback. A progress bar can be useful for tracking reading progress, download completion, or form submission status. Follow this comprehensive guide to integrate a custom progress bar in your Blogger site.

Step 1: Access Blogger Dashboard

a) Sign in to your Blogger account.

b) Select the blog you want to edit.

c) Navigate to "Theme" and click on "Customize" or "Edit HTML" for advanced customization.

Progress Bar in Blogger

Step 2: Add HTML Structure

In the HTML editor, locate the <body> section where you want the progress bar to appear. Add the following code:

<div id="progress-bar-container">
  <div id="progress-bar"></div>
</div>

This creates a container (progress-bar-container) and the actual bar (progress-bar).

Step 3: Style the Progress Bar with CSS

Next, add CSS to style the progress bar. Insert the following code within the <style> tags or in your Blogger’s CSS section:

#progress-bar-container {
  width: 100%;
  height: 5px;
  background-color: #e0e0e0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

#progress-bar {
  height: 100%;
  width: 0%;
  background-color: #4caf50;
  transition: width 0.25s ease-out;
}

This will create a sleek and smooth progress bar at the top of your website.

Step 4: Add JavaScript to Track Scrolling

Add the following JavaScript code before the closing </body> tag:

<script>
  window.onscroll = function() {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    let scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    let progress = (scrollTop / scrollHeight) * 100;
    document.getElementById("progress-bar").style.width = progress + "%";
  };
</script>

This script calculates the scroll position and updates the width of the progress bar dynamically.

Step 5: Save and Preview

a) Click "Save" to update your Blogger theme.

b) Visit your blog to see the progress bar in action.

Additional Customization Options

  • Color Customization: Change the background-color in the CSS to match your blog's theme.
  • Height Adjustment: Adjust the height of the progress bar by modifying the #progress-bar-container height.
  • Smooth Animation: Modify the transition property for smoother effects.

Benefits of Adding a Progress Bar

  • Enhanced User Experience: Provides a visual cue for users to track their progress.
  • Increased Engagement: Keeps readers engaged and encourages them to read more.
  • Professional Look: Adds a modern and dynamic touch to your Blogger website.

How to show the progress bar in posts only?


If you want to show the progress bar only in the blog posts then you can use the blogger conditional tag in the above code. 

Here, you can wrap the step 1 and step 3 code with the conditional Tags and paste it above the </body> tag. 

<b:if cond='data:view.isPost'> <--Insert code here--> </b:if>

Reading Progress bar code (EASY)


You can also use the below code for the reading progress bar in blogger. Just paste the code just above the </body> tag.

<style>
#site-navigation{margin-top:10px!important;}
.reading-meter {position: fixed;top: 0!important;z-index: 1111;width: 100%;background-color: #f1f1f1;}
.K2progress {width: 100%;height: 7px;  z-index: 1111;background: #ccc;}
.progress-bar {height: 7px;background-color:tomato;width: 0%;}
</style>
<div class='reading-meter'><div class='K2progress'><div class='progress-bar' id='myBar'/></div>  </div>
<script> 
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(&quot;myBar&quot;).style.width = scrolled + &quot;%&quot;;
}
</script>

Conclusion


Integrating a progress bar in your Blogger website is a simple yet effective way to improve user experience. By following these steps, you can create a visually appealing and functional progress indicator that keeps your visitors engaged. Experiment with different styles and positions to match your blog’s design perfectly.