Thanh tiến độ dự án hiệu ứng động cho blogspot

Dạo này không có cảm xúc gì cả nên không có bài ngôn tình, chửi bới gì cho anh em đọc hết. Lúc rảnh thì chỉ ngồi để hoàn thành một phần nhỏ của giao diện mới thôi.



Sẵn đang nâng cấp giao diện thì mới nhớ ra có cái này hay hay mà chưa share nên viết bài này luôn. Đó là tạo một thanh tiến độ dự án hiệu ứng động cho blogspot. Cái này dùng để trang trí blog là chính, ngoài ra cũng là để thông báo cho người đọc biết blog đang trong quá trình nâng cấp hoặc fix lỗi giao diện đang dùng. Chúng ta cũng có thể thấy vài thanh tương tự ở các Landing Page Template những phân mục skills họ cũng dùng đó. Live demo thì ở ngay trên blog của mình rồi.

Cách thực hiện:
B1: Truy cập Quản trị blogger - Bố cục - Thêm tiện ích - HTML/Javascript.

B2: Copy và paste toàn bộ code dưới vào.

<style>.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);}
.progress-bar.active, .progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-striped, .progress-striped .progress-bar {
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #5cb85c;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}
</style>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete
</div>
</div>

- Sửa màu sắc thanh tiến độ thì thay #5cb85c thành màu bạn thích.

- Sửa số % thì sửa hết số 50 trong đoạn code này bằng số khác bạn muốn:

<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete
</div>
</div>

B3: Sau khi sửa xong hết theo ý thì lưu template lại nhé.

Rất đơn giản vậy thôi, giờ mình đi ăn cơm cái.

Chúc các bạn thành công!