[Series Share] Style css beauty label for blogspot

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 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

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.
Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam