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!

42 nhận xét

  1. Trả lời
    1. Thanks e. Mà viết 1 dòng thôi e. Có thêm khoảng trắng nó mất 1 dòng nữa rồi :(

      Xóa
    2. :v 2 dòng nó mới đẹp a

      Xóa
  2. Bài viết hay, template chất, trên điện thoại thì vẫn chưa ổn cho lắm :)) kết cái phần icon động :v mà e nghĩ nên chèn icon giống fb luôn cho nó trất's.

    Trả lờiXóa
    Trả lời
    1. Mỗi lần chỉnh res là phải cầm 1 bên đt, 1 bên lap để chỉnh. Để đỡ tốn 3G ae e sẽ loại hết widget cả mục k cần thiết :D icon fb xấu lắm, e k thích lắm.

      Xóa
  3. Template a dần dần giống Facebook rồi đó anh. Cố lên nha ah :)

    Trả lờiXóa
    Trả lời
    1. Ừ. A vừa học vừa làm dần e ạ. Thanks e nhá.
      Mà e cập nhật hộ a logo ở bài viết phía dưới bài này nha :3

      Xóa
  4. Bên WP có Huykira còn Blogspot có Cường :v

    Trả lờiXóa
    Trả lời
    1. Ông Huy đó giỏi hơn t nhiều. Ông ý học xong hết web rồi :(

      Xóa
    2. uh công nhận lão thiết kế theme phiên bản trc giống face đến 80%. nhưng mà giờ up lên bản mới đỡ đẹp nhiều rồi nếu k mún nói là xấu value :))

      Xóa
    3. Hiện giờ ông blogthuthuatwin10 còn đang giấu nghề cơ ông ạ. 2 phần khó khắc phục nhất là đặt time cache và k bị báo cáo giảm kích cỡ ảnh khi check speed ông ý vẫn đang k cho biết hay sao ý :( Blog ông ý 99/100 @@

      Xóa
    4. UH nhỉ, hay ông già hắn làm trong Google @@

      Xóa
    5. Maybe, tại t hỏi mà ông ý k trả lời :( trong khi mấy bài kia ông ý vẫn rep như thường. Có ng hỏi temp ông ý thì ông ý bật mí là điểm speed cao. Có khi giấu nghề r :3

      Xóa
  5. cảm ơn bác nhiều nhiều lắm

    Trả lờiXóa
    Trả lời
    1. Thanks bác. À mà bác vào bài này rồi cập nhật logo theo yêu cầu giúp e nha.

      Xóa
  6. bác ơi, cho tôi xin code tạo trang ẩn hết các thẻ chỉ hiện mỗi phần post giống trang : http://phucuongblogger.blogspot.com/p/comment.html của bác với.
    mail: vthao1st@gmail.com

    Trả lờiXóa
    Trả lời
    1. Cái này tùy mỗi template thì class và id sẽ khác nhau bác ạ. Bác phải view source ra tìm thẻ cần ẩn rồi cho vào cặp thẻ điều kiện này.
      <b:if cond='data:blog.pageType == "static_page"'>
      CSS các class, id cần ẩn
      Ví dụ: .abc {display:none!important}
      </b:if>

      Code trên chèn trước thẻ </head> nha.

      Xóa
    2. Em muốn ẩn phần thống kê cho mobi thì phải làm sao a

      Xóa
    3. E vào Chủ đề - Chỉnh sửa HTML - Chuyển đến tiện ích (cạnh nút Lưu chủ đề) - Stats1. Mỗi widget sẽ có dạng gần gần như này (a lấy ví dụ mục liên hệ - ContactForm, cái Stats1 - thống kê làm tương tự nha)
      <b:widget id='ContactForm1' locked='false' title='Biểu mẫu liên hệ' type='ContactForm'>
      E thêm lệnh ẩn widget khỏi mobi này vào sẽ đc code mới như sau:
      <b:widget cond='data:blog.isMobileRequest == "false"' id='ContactForm1' locked='false' title='Biểu mẫu liên hệ' type='ContactForm'>

      Xóa
  7. cố lên anh ơi :v blog sắp thành cái fb rồi, tạo ra fb thứ 2 trên blog :rofl

    Trả lờiXóa
    Trả lời
    1. A chỉ là tự học rồi làm thôi, a k phải dân CNTT chính gốc :( Nên phải 1 tgian nữa nó mới giống e ạ.

      Xóa
  8. . Liên kết đii a ơi
    Tên : Văn Huy IT
    Url : http://www.vanhuyy-it.tk/

    Trả lờiXóa
    Trả lời
    1. Bạn vào bài này đặt liên kết theo form giúp mình nha. Đầy đủ 3 mục thông tin đó để đỡ phải cập nhật lại thêm :))

      Xóa
  9. Template chất lắm anh ơi ^^

    Trả lờiXóa
  10. Cám ơn bạn đã chia sẻ thêm 1 thủ thuật mới. Đây có lẽ là thủ thuật mới và đầu tiên bạn chia sẻ. Tuy nhiên, mình vẫn chưa hiểu ứng dụng này dùng để làm gì cho blogspot? Bạn có thể lấy 1 ví dụ cụ thể được không? Hy vọng những bài viết tương tự bạn nên nêu 1 chút ứng dụng cụ thể của thủ thuật để người đọc có thể hiểu ứng dụng dùng để làm gì, có tác dụng gì không. Ưu, nhược điều của thủ thuật khi áp dụng!!!
    Lầm nữa vẫn cám ơn bạn nhiều.

    Trả lờiXóa
    Trả lời
    1. 1. Mình hơi shock vì comment của bạn (chắc do dài quá :v)
      2. Đây k phải tut đầu tiên mình chia sẻ nhé bạn, trc đó nếu bạn biết TSM Blogger thì sẽ k bảo đây là đầu tiên :(
      3. Cái này rất đơn giản là chỉ dùng là trang trí, đặc biệt rất hữu dụng đối với những landscape template ở chỉ mục nêu skills của bản thân bạn nha.

      Xóa
    2. Hi!!!, Cám ơn bạn đã phản hồi.
      1. Không biết có phải bạn shock vì comment của mình dài quá không??? =(
      Nhưng thực sự khi đọc bài viết của bạn mình không hiểu thủ thuật này dùng để làm gì trong blogspot? Vì:
      - Mở bài của bạn là đoạn văn không liên quan đến thủ thuật này mà liên quan đến ... cảm xúc,... chửi bới ai đó (chắc không có mình trong đó...kkk).
      - Thân bài là phần thực hiện thủ thuật - phần này bạn hướng dẫn chi tiết như vậy theo mình là Ok! Ai cũng có thể thực hiện theo đó là làm được!
      - Nhưng kết bài thì ... theo mình chưa êm lắm. Ở chỗ là chỉ làm được đúng như vậy, muốn sáng tạo thêm thì... bó tay!!!...kkk.
      Cái này mình không trách được. Mình biết bạn không phải là dân chuyên về CNTT nên mình hiểu. Tuy nhiên, mình cũng từng đọc nhiều thủ thuật trên nhiều blog khác như: Namkna.blogspot.com, traidatmui.com, duypham.blogspot.com... mình thấy họ hứng dẫn rất chi tiết nên mình nói vậy thôi!!!.
      2. Ý mình không phải nói đây là lần đầu tiên bạn viết 1 tut chia sẻ thủ thuật. Tuy nhiên, với cái thủ thuật "Thanh tiến độ dự án hiệu ứng động cho blogspot" mình thấy bạn là người đầu tiên chia sẻ về thủ thuật này, có thể ở đâu đó chia sẻ nhưng mình chưa từng đọc hoặc gặp!!! Vì vậy mới nói là bạn nên viết đoại mở đầu gới thiệu ứng dụng về thủ thuật dùng để là gì...
      3. Có thể thủ thuật này rất đơn giản mới nhiều người - không có mình trong đó..haha, tuy nhiên cũng rất nhiều người không biết - có mình. Do đó, rất cần những người am hiểu thủ thuật nên cho những so sánh ưu nhược khi áp dụng thủ thuật.
      P/S: Bạn có thể chèn nút thích vào trong comment này được không nhỉ? giống như trên bài viết vậy đó. Để có gì mình nhấn 1 cái cho nó ok, chứ từ nãy giờ gõ mỏi tay quá trời...kkkk
      - Gõ mỏi tay không biết có ai đọc mỏi miệng không nữa.... hihihi

      Xóa
    3. Do bạn lần đầu vào blog mình nên k hiểu về Phú Cường Blogger thôi. Blog mình thực chất k phải như TSM Blogger là chuyên chia sẻ thủ thuật nữa nhé. Mình chỉ viết khi nào có hứng thôi. Tất cả hơn 600 comments ở blog mình thì comment của bạn là đầu tiên đấy :3 Nên có gì sau mong bạn hiểu rõ blog trc khi comment nha Tại theo mình 1 blog thủ thuật thì hơn 30 bài k thể chỉ có 2 tut kia đc. Vs lại việc tối ưu blog để đc good trên google speed thì mình cũng đang k làm điều đó. Thực sự là mình rất shock version 2 :D
      À mình quên là nếu là 1 blogger thì mình nghĩ cái này chắc dễ quá nên k ai viết bài thôi. Chứ nó ở trên w3shools (tự học về web rồi)

      Xóa
    4. Chắc mỏi tay lắm

      Xóa
  11. Lại lên hơn 600 còm men rồi. Thật đáng xợ :D (tiếp nối anh Cường đẹp trai :v)

    Trả lờiXóa
    Trả lời
    1. Cảm ơn e. Do ae chém gió kinh quá đấy chứ mình a thì k thể đc như thế :D Thanks ae nhiều :))

      Xóa
  12. nếu mình mún thêm nền cho 1 trang thì làm ntn hả Ah
    demo: https://phucuongblogger.blogspot.com/p/viet-chu-nguoc.html

    Trả lờiXóa
    Trả lời
    1. E chèn 1 trong 2 đoạn code sau trước thẻ </head>
      1. Áp dụng cho tất cả page:
      <b:if cond='data:blog.pageType == "static_page"'>
      <style>
      body{background: #fff url(Link ảnh) no-repeat center fixed;background-size:cover}
      </style>
      </b:if>

      2. Áp dụng cho 1 số page chỉ định:
      <b:if cond='data:blog.url == "URL nhất định"'>
      <style>
      body{background: #fff url(Link ảnh) no-repeat center fixed;background-size:cover}
      </style>
      </b:if>

      Xóa
  13. Bạn có tut nào hướng dẫn chèn nút like trong comment blogspot không? Giống như chèn trên bài viết vậy đó, nhưng phải từng comment và hiển thị số lượng like!!!

    Trả lờiXóa
    Trả lời
    1. Trc mình có test nút like và dislike mặc định trong blogspot nhưng k đc. Hiện tại thì mình chưa tìm ra cách nào khác bạn ạ :3

      Xóa