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.

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

Đâ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:

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

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

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

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

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

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

0 Nhận xét