Share beauty css label code for blogspot

Anh Trai Nắng
0
Posts Share beauty css label code for blogspot. The article is in the blogspot tricks section.

Hello everyone, in order to reach more than foreign blogger friends, Anh Trai Nang will write a code-sharing article entirely in English today.

Share beauty css label code for blogspot

The article 'Share beauty css label code for blogspot' is completely edited and shared by me. Hope you will receive it for template!

Live Demo

Install beauty css label code for blogspot

Step 1: First, you should delete all old css of Label, then you insert and replace the following code into deleted css.

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

Step 2: Go to Layout > add Widget Label > customize as shown below

Share beauty css label code for blogspot

You can customize the number of Labels you want to display to suit your blog (1)

A pretty simple css code to have an eye-catching style label. Hope to help you in the design process. If you have any questions please leave a comment, I will support as much as possible!

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

0 Nhận xét

Đăng nhận xét (0)

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu