Đặt quảng cáo

[Series Share] Style css beauty label for blogspot

Bài viết liên quan:

Hihi.! Hiện tại trên blog mình có 4 cái cần share cho các bạn và hôm nay Style css beauty label for blogspot là bài đầu tiên mình share. Đây là một kiểu trang trí cho Label blog đơn giản nhưng cũng rất là bắt mắt.

style-css-beauty-label-for-blogspot

Style css beauty label for blogspot edit

Bước 1: Trước tiên các bạn nên xóa hết css cũ có sẵn của Label, sau đó các bạn chèn thay thế đoạn code sau vào css đã xóa hoặc là có thể chèn code vào cặp thẻ style
.widget.Label li a,.widget.Label li span{text-decoration:none;float:left;width:45%;white-space:nowrap;text-overflow:ellipsis;border-radius:20px!important;border:1px solid #138882;overflow:hidden;height:24px;line-height:20px;position:relative;margin:2px;padding:4px 3px 0 5px;background:#222;color:#888!important;font-size:100%;font-family:Arial,sans-serif;font-weight:500;text-align:left}.widget.Label li a:hover{background:#2980b9;color:#fff!important}.sidebar ul,.footer ul{list-style:none;margin:0;padding:0}.widget-content.list-label-widget-content ul li a:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;content:'\f02b';float:left;margin:0 5px;display:block!Important;opacity:.9;color:#fff!important}
.cloud-label-widget-content{text-align:left}
.cloud-label-widget-content .label-count{color:#fff!important;margin-left:-3px;white-space:nowrap;font-size:12px!important;padding:0 10px 0 0 !important}
.cloud-label-widget-content .label-size{display:block;float:left;background-color:#138882;font-size:11px;margin:0 5px 5px 0;border-radius:3px;transition:all .3s ease}
.cloud-label-widget-content .label-size a,.cloud-label-widget-content .label-size span.label-count{height:16px!important;color:#fff;display:inline-block;font-size:12px;font-weight:400!important;text-transform:uppercase;cursor:pointer;padding:6px 8px;transition:all .3s ease}
.cloud-label-widget-content .label-size a,.cloud-label-widget-content .label-size span:first-child{cursor:pointer;display:inline-block;padding:6px 10px}
.cloud-label-widget-content .label-size,.cloud-label-widget-content .label-count{height:26px!important;line-height:15px!important}
.cloud-label-widget-content .label-size:hover{background-color:#272727}
.cloud-label-widget-content .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:10}
.label-size-1,.label-size-2{opacity:100}
Bước 2: Các bạn vào Bố cục > thêm Widget Label > tùy chỉnh như ảnh dưới

style-css-beauty-label-for-blogspot

Các bạn có thể tùy chỉnh số lượng Label muốn hiển thị cho phù hợp với blog của các bạn (1)

Một đoạn code css khá đơn giản để có một style label khá bắt mắt. Hy vọng sẽ giúp ích được phần nào cho các bạn trong quá trình design blog.

Phan Niệm

Không muốn hoặc không thích, không tồn tại hoặc không thể! Cám ơn các bạn đã ghé thăm, chúc các bạn có những phút giây thoải mái và bổ ích trên blog của mình! Thanks for... Xem thêm về tôi

  1. Niệm Style ơi, xong chưa !!!

    ReplyDelete
    Replies
    1. pi pi pi pi pi pi pi pi pi pi pi pi pi

      Delete
    2. Cung shop pi pi pi pi pi

      Delete
  2. Temp mới đây rồi nhưng vẫn đậm chất Niệm :)) K cần edit trước, up lên xài luôn :d

    ReplyDelete
    Replies
    1. Còn phải edit nhiều lắm :v, vài chỗ nhìn chưa mượt

      Delete
  3. Cứ UP Template lên đã Edit sau :v

    ReplyDelete
  4. vừa đăng lên group Blogger Family Give And Take xin ké temp mà giờ thay luôn à

    ReplyDelete
    Replies
    1. Người ta 198x đấy nhé, ăn vs nói. Như kiểu bạn bè 2k vậy -_-

      Delete
    2. nếu nó có não đã không dị rồi anh cường ><

      Delete
  5. Đìu định share cho anh kho template chuẩn mặc định blogger dùng mà giờ anh có cái khác rồi v:

    ReplyDelete
  6. temp mới nhanh kinh luôn á anh

    ReplyDelete
  7. Hông có gì để mặt hết

    ReplyDelete
  8. Một màu xanh xanh chấm thêm màu vàng

    ReplyDelete
  9. ms zô mà thấy ảnh hera mà ngon rồi đó anh :v
    theme mượt vcl :v

    ReplyDelete
  10. Template chất chơi a :v

    ReplyDelete

  11. Template mượt quá anh oiw

    ReplyDelete