Share css Label blogspot tuyệt đẹp dành cho Blogger

Khi vào một Blog, phần lớn chúng ta đều có có một Widget đó là phần Label, nó có tác dụng thống kê tất cả các Nhãn của bài viết trên Blog. Bài viết này mình sẽ chia sẻ một mẫu code CSS để làm đẹp phần Label này.

Đây là một mẫu Label có tên là Arrow Label. Các bạn xem demo trực tiếp dưới đây

Cách thêm Widget Label

Các bạn vào quản trị blog > Bố cục > Thêm tiện ích Label và cấu hình widget Label theo mặc định như hình dưới đây:

Tiện ích Label được thêm vào và bạn có thể di chuyển nó đến nơi yêu thích của mình.

Làm đẹp cho Label với CSS

Các bạn vào Chủ đề > Tùy chỉnh > Chỉnh sửa HTML

Và tìm đến thẻ </head>

Coppy đoạn code CSS sau dán lên trên thẻ </head>

<style>
.Label li:before {
background-image: -moz-linear-gradient(center top , #1E5799 0%, #207CCA 100%);
border-bottom: 1px solid #145091;
border-left: 1px solid #145091;
content: "";
height: 1.39em;
left: -0.69em;
position: absolute;
top: 0.2em;
transform: rotate(45deg);
width: 1.3em;
z-index: 1;
}
.Label li:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #3F6893;
border-radius: 4.167em 4.167em 4.167em 4.167em;
box-shadow: 0 1px 0 #B5D8FF;
content: "";
height: 0.5em;
left: -0.083em;
position: absolute;
top: 0.667em;
width: 0.5em;
z-index: 9999;
}
.Label li {
background-image: -moz-linear-gradient(center top , #1E5799, #207CCA);
border-bottom: 1px solid #145091;
border-radius: 0 0.25em 0.25em 0;
border-right: 1px solid #145091;
border-top: 1px solid #145091;
box-shadow: 0 1px 0 #CCE4FF inset, 0 1px 1px rgba(0, 0, 0, 0.1);
color: #996633;
float: left;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 0.75em;
font-weight: bold;
list-style: none outside none;
margin: 0 0 7px 20px;
padding: 0.417em 0.417em 0.417em 0.917em;
position: relative;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
z-index: 1;
}
</style>

Trường hợp các bạn bỏ cặp thẻ <style>...</style> ra và chèn CSS vào ]]></b:skin> thì các bạn sửa .Label thành #Label để CSS hoạt động nhé!

Trước kia mình cũng có share một bài về làm đẹp Lebel này. Hy vọng các bạn sẽ thích nó!

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 ✅