如何在Blogger加入進度百分比長條 How to add a Progress Bar to your blog?

花了一些時間製作了網誌側欄顯示進度的小工具，因為一直找不到自己喜歡的樣式@@
不過因為這並非我的專業，因此只能用最簡單的方式做一個，而我想將這個過程記錄下來，方便自己日後查詢，也希望有幫助到遇到跟我一樣問題的朋友們。 :-)
Since I couldn't find an ideal design of progress bar for my blog...I decided to make one by myself and it just a quite simple one.^^ Here I record how I've done and hope it can helps people who came across to the same problem as me. :-)


讓我們開始吧!
So let's begin!

------------------------------------------------------------------------------------------------------------

 增加一個進度百分比長條  Add a Progress Bar 

首先，先到部落格後臺點選版面配置
First, log in your blog and go to Layout.

選擇新增小工具，找到HTML/Javascript
Click "Add a Gadget", and find "HTML/Javascript" widget

複製以下藍色的區域並貼在小工具的空格中。
Paste the following HTML code

The name you choose
<div id="progressbar" style="width:150px;background-color:#000;border-radius:6px;padding:3px;">
<div style="background-color:#fff;width:60%;height:6px;border-radius:4px;"></div>

看到的樣子!
This is what you will see!

The name you choose

-------------------------------------------------------------------------------------------------------------

 如何改顏色、大小、比例?  How to change colors, size and percentage? 

The name you choose
<div id="progressbar" style="width:150px;background-color:#000;border-radius:6px;padding:3px;">
<div style="background-color:#fff;width:60%;height:6px;border-radius:4px;"></div>


width:150px 
這部分用於更改整個長條的寬度
Here is where you change the width of progress bar

background-color:#000, background-color:#fff
更改呈現的顏色
顏色的部分使用Color Hex 編碼，參考網址如下
Here is where you change the colors. Use Color Hex to get the code of color, under is the link

Color Hex Color Code 

width:60%
更改進度比例
where  you change the percentage of your project!