4.5 488

How to Make Progress Bars in WordPress and Blogger

Posted by zerochan on August 28, 2018

Loading the translation ...

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.

<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

Comments

Waiting Load Disqus Comments ...