How to Make Progress Bars in WordPress and Blogger

Posted on August 28th, 2018, 244 viewed

This time I will share how to create a progress bar on a wordpress or blogger. This progress bar is often used in blog fansubs or fanshare blogs, besides beautifying the look of your blog, this progress bar can also help visitors your blog to see how far your work is in editing the anime subtitles that are being worked on..

I’ve also shared a tutorial on how to make a progress bar on my usagilabs blog, but i late backup my blog posts before my blog removed. so I take this progress code directly from w3school progress bars

How to Add Widget Progress Bars in WordPress

1. Log in to your WordPress Dashboard.
2. Go to Appearance > Editor
3. Copy the css code below then paste it into your css wordpress editor.

/* Progress Bar by W3schools */
.progress-title{margin:0;font-size:14px;letter-spacing:.1px;color:#202021}
.progress{background:#e9ecef;height:20px;line-height:20px;overflow:hidden;font-size:.75rem;border-radius:.25rem;margin:8px auto 16px}
.progress-bar{background:#337AB7;color:#fff;text-align:center;white-space:nowrap;transition:width .6s ease;height:100%}
4. Click Update FIle
5. Go to Appearance > Widgets
6. Drag Widget Custom HTML in Sidebar
7. Copy the html code below and paste it into the widget.

See Also :How to make Anime List Pages Responsive in WordPress
How To Create a Recruitment Form on Blogger Page
How to make Genre List Pages Clean Responsive in WordPress

<div class="progress-title">Progress Bar 1</div>
<div class="progress"><div class="progress-bar" style="width:20%">30</div></div>

<div class="progress-title">Progress Bar 2</div>
<div class="progress"><div class="progress-bar" style="width:30%"></div></div>

<div class="progress-title">Progress Bar 3</div>
<div class="progress"><div class="progress-bar" style="width:40%"></div></div>
9. Click Saved

How to Add a Progress Bar to Your Blogger

1. Choose your blog
2. Click Menu Theme
3. Click Button Edit HTML
4. Add the css code below just above the ]]></b:skin> or </style> code (use CTRL + F in editor)

/* Progress Bar by W3schools */
.progress-title{margin:0;font-size:14px;letter-spacing:.1px;color:#202021}
.progress{background:#e9ecef;height:20px;line-height:20px;overflow:hidden;font-size:.75rem;border-radius:.25rem;margin:8px auto 16px}
.progress-bar{background:#337AB7;color:#fff;text-align:center;white-space:nowrap;transition:width .6s ease;height:100%}
5. Click Button Save Themes
6. Then Go to Menu Layout
7. Click Add a Gadget and Select HTML/JavaScript
8. Copy the html code below and paste it into the widget.

<div class="progress-title">Progress Bar 1</div>
<div class="progress"><div class="progress-bar" style="width:20%">30</div></div>

<div class="progress-title">Progress Bar 2</div>
<div class="progress"><div class="progress-bar" style="width:30%"></div></div>

<div class="progress-title">Progress Bar 3</div>
<div class="progress"><div class="progress-bar" style="width:40%"></div></div>
9. Click Save

Result

Progress Bar #1
Progress Bar #2

Style

Rounded

Replace the css code above with css below. (Use this css)

/* Progress Bar by W3schools */
.progress-title{margin:0;font-size:14px;letter-spacing:.1px;color:#202021}
.progress{background:#e9ecef;height:19px;line-height:19px;overflow:hidden;font-size:.75rem;border-radius:15px;margin:8px auto 16px}
.progress-bar{background:#337AB7;color:#fff;text-align:center;white-space:nowrap;transition:width .6s ease;height:100%;border-radius:0 15px 15px 0}
Result

Progress Bar Rounded #1
Progress Bar Rounded #2

RTL Mode

Replace the css code above with css below. (Use this css)

/* Progress Bar by W3schools */
.progress-title{margin:0;font-size:14px;letter-spacing:.1px;color:#202021;direction:rtl;text-align:right}
.progress{background:#e9ecef;height:20px;line-height:20px;overflow:hidden;font-size:.75rem;border-radius:.25rem;margin:8px auto 16px;direction:rtl;text-align:right}
.progress-bar{background:#337AB7;color:#fff;text-align:center;white-space:nowrap;transition:width .6s ease;height:100%}
Result

Progress Bar RTL #1
Progress Bar RTL #2

Related Post

Please wait....
Disqus comment box is being loaded