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

GroupMMO tháng 10 06, 2020

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