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.
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.
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}Bước 2: Các bạn vào Bố cục > thêm Widget Label > tùy chỉnh như ảnh dưới
.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}
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.
Niệm Style ơi, xong chưa !!!
ReplyDeletepi pi pi pi pi pi pi pi pi pi pi pi pi
DeleteCung shop pi pi pi pi pi
DeleteTemp 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
ReplyDeleteUh :V
DeleteCòn phải edit nhiều lắm :v, vài chỗ nhìn chưa mượt
DeleteCứ UP Template lên đã Edit sau :v
ReplyDeletetemplate mới :v
ReplyDeletevừa đăng lên group Blogger Family Give And Take xin ké temp mà giờ thay luôn à
ReplyDeleteNgười ta 198x đấy nhé, ăn vs nói. Như kiểu bạn bè 2k vậy -_-
Deletenếu nó có não đã không dị rồi anh cường ><
Deleteđìu theme đẹp :V
ReplyDeleteĐì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:
ReplyDeletetemp mới nhanh kinh luôn á anh
ReplyDeleteđã thay temp rồi :3
ReplyDeleteHông có gì để mặt hết
ReplyDeleteMột màu xanh xanh chấm thêm màu vàng
ReplyDeletems zô mà thấy ảnh hera mà ngon rồi đó anh :v
ReplyDeletetheme mượt vcl :v
mới có 70% edit thôi em :)
DeleteTemplate chất chơi a :v
ReplyDeletecòn chỉnh sữa nhiều lắm em :3
DeleteDạ hihi
Delete
ReplyDeleteTemplate mượt quá anh oiw
:3
ReplyDeletecái gì đấy :p
DeleteFast load template :p
ReplyDeletethanks for watching blogs <3
Deletechờ a mỏi mòn
ReplyDeletebuổi sáng vui vẻ mát mẻ nha anh
ReplyDelete