Trang Trí Phần Tags (nhãn) Đẹp Cho Blogger

Ibiet - Chia sẽ with you cách trang trí phần Tags (nhãn) đẹp cho Blogger

Trang trí phần  Nhãn (Tags)  đẹp luôn is one of the following mối quan tâm of the  Blogger . Bài viết giới thiệu this as you one of the following cách làm đẹp thêm cho  blog của  directory. 

Mẫu 1:

Bước 1:  Bạn vào Phần tử trang -> Thêm tiện ích / HTML -> Add khóa theo hướng dẫn hình ảnh below.

Bước 2:  Bạn vào phần chỉnh sửa  HTML -> Ctrl + F  -> Tìm đoạn thẻ  ]]> </ b: skin>
Thêm vào trước it đoạn mã sau:

.label kích thước {margin: 0 2px 6px 0; padding: 3px; text-transform: chữ hoa; border: 1px rắn # c6c6c6; border-radius: 3px; float: left; text-decoration: none; font-size: 10px; color: # 666; } .label-Size: hover {border: 1px solid # 6BB5FF; text-decoration: none; -moz-chuyển tiếp: tất cả 0.5s dễ ra; -o-chuyển tiếp: tất cả 0.5s dễ ra; -webkit-chuyển tiếp: tất cả 0.5s dễ ra; -ms-chuyển tiếp: tất cả 0.5s dễ ra; chuyển tiếp: tất cả 0.5s dễ ra; -moz-transform: rotate (7deg); -o-transform: xoay (7deg); -webkit-transform: rotate (7deg); -ms-transform: rotate (7deg); transform: rotate (7deg); lọc: progid: DXImageTransform.Microsoft.Matrix (M11 = ,9961946980917455, M12 = -,08715574274765817, M21 = ,08715574274765817, M22 = ,9961946980917455, sizingMethod = 'tự động mở rộng'); zoom: 1; } .label Kích thước a {text-transform: chữ hoa; float: left; text-decoration: none; } .label Kích thước a: hover {text-decoration: none; }

Bước 3: . Lưu mẫu
Lưu ý:  Thay đổi all the information số màu sắc tùy ý, tham khảo  Bảng Mã Màu Thập Lục Đẹp Cho Blogger

Mẫu 2:

Thầy Mã out bước 2

.label cỡ {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: # 996.633;
    text-shadow: 0px 0px 1px rgba (255.255.255, 0,4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid # d99d38;
    cửa quyền: 1px solid # d99d38;
    border-bottom: 1px solid # d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear gradient (hàng đầu, rgb (254, 218, 113), rgb (254, 186, 71));
    background-image: -moz-linear gradient (hàng đầu, rgb (254, 218, 113), rgb (254, 186, 71));
    background-image: -o-linear gradient (hàng đầu, rgb (254, 218, 113), rgb (254, 186, 71));
    background-image: -ms-linear gradient (hàng đầu, rgb (254, 218, 113), rgb (254, 186, 71));
    background-image: linear gradient (hàng đầu, rgb (254, 218, 113), rgb (254, 186, 71));
    lọc: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = '# feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba (0,0,0, 0,1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba (0,0,0, 0,1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba (0,0,0, 0,1);
    z-index: 1;
}

.label-size: before {
    nội dung: '';
    width: 1.30em;
    chiều cao: 1.39em;
    background-image: -webkit-linear gradient (trên cùng bên trái, rgb (254, 218, 113), rgb (254, 186, 71));
    background-image: -moz-linear gradient (trên cùng bên trái, rgb (254, 218, 113), rgb (254, 186, 71));
    background-image: -o-linear gradient (trên cùng bên trái, rgb (254, 218, 113), rgb (254, 186, 71));
    background-image: -ms-linear gradient (trên cùng bên trái, rgb (254, 218, 113), rgb (254, 186, 71));
    background-image: linear gradient (trên cùng bên trái, rgb (254, 218, 113), rgb (254, 186, 71));
    lọc: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# feda71', EndColorStr = '# feba47');
    vị trí: tuyệt đối;
    trái: -0.69em;
    top: .2em;
    -webkit-transform: rotate (45deg);
    -moz-transform: xoay (45deg);
    -o-transform: rotate (45deg);
    chuyển đổi: xoay (45deg);
    border-left: 1px solid # d99d38;
    border-bottom: 1px solid # d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}

.label-size: sau {
    nội dung: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid # d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    vị trí: tuyệt đối;
    top: 0.667em;
    trái: -0.083em;
    z-index: 9999;
}

# Label1 {
    height: 210px;
}

.label-size: hover {
    background-image: -webkit-linear gradient (hàng đầu, rgb (254, 225, 141), rgb (254, 200, 108));
    background-image: -moz-linear gradient (hàng đầu, rgb (254, 225, 141), rgb (254, 200, 108));
    background-image: -o-linear gradient (hàng đầu, rgb (254, 225, 141), rgb (254, 200, 108));
    background-image: -ms-linear gradient (hàng đầu, rgb (254, 225, 141), rgb (254, 200, 108));
    background-image: linear gradient (hàng đầu, rgb (254, 225, 141), rgb (254, 200, 108));
    lọc: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# fee18d', EndColorStr = '# fec86c');
    border-color: # e1b160;
}

.label-size: hover: before {
    background-image: -webkit-linear gradient (trên cùng bên trái, rgb (254, 225, 141), rgb (254, 200, 108));
    background-image: -moz-linear gradient (trên cùng bên trái, rgb (254, 225, 141), rgb (254, 200, 108));
    background-image: -o-linear gradient (trên cùng bên trái, rgb (254, 225, 141), rgb (254, 200, 108));
    background-image: -ms-linear gradient (trên cùng bên trái, rgb (254, 225, 141), rgb (254, 200, 108));
    background-image: linear gradient (trên cùng bên trái, rgb (254, 225, 141), rgb (254, 200, 108));
    lọc: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# fee18d', EndColorStr = '# fec86c');
    border-color: # e1b160;}

Mẫu 3:

Thầy Mã out bước 2

# Label1 một {
outline: 1px dotted # FEB380; border: 1px rgba (0,0,0,0.2) giỏi; padding: 6px 8px 6px 14px; text-decoration: none;
color: black; # f8f8f8-space: nowrap;
font-family: arial, serif; text-transform: tận;
font-size: 12px; font-weight: bold;
! position: relative quan trọng; background: # aa00ff;
-moz-opacity: 0.75;
-khtml-opacity: 0.75; opacity: 0.75;
lọc: alpha (opacity: 75%);
float: left; padding: 4px 3px;
margin: 5px 5px 0 0;
border-radius: 4px 4px; -moz-border-radius: 8px 4px 4px 4px; -khtml-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
}
# Label1 a: hover {
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
background: # A55A27; color: # f8f8f8;
-webkit-chuyển tiếp: tất cả .5s dễ-trong-ra;
-moz-chuyển tiếp: tất cả .5s dễ-trong-ra;
-o-chuyển tiếp: tất cả .5s dễ-trong-ra;
chuyển tiếp: tất cả .5s dễ-trong-ra;
}
# Label1 a: active {
background: # B24700; color: # 80FFFE;
-webkit-chuyển tiếp: tất cả .5s tuyến tính;
-moz-chuyển tiếp: tất cả .5s tuyến tính;
-o-chuyển tiếp: tất cả .5s tuyến tính; chuyển tiếp: tất cả .5s tuyến tính;
}

Mẫu 4:

Thầy Mã out bước 2

# Label1 một {float: left;
height: 18px;
line-height: 18px;
position: relative;
font-size: 12px;
margin-bottom: 9px;
margin-left: 10px;
padding: 5px;
background: rgb (69,72,77); / * Trình duyệt Old * /
background: -moz-linear gradient (hàng đầu, rgba (69,72,77,1) 0%, rgba (0,0,0,1) 100%); / * FF3.6 + * /
background: -webkit-gradient (tuyến tính, trên bên trái, phía dưới bên trái, màu sắc-stop (0%, rgba (69,72,77,1)), màu sắc-stop (100%, rgba (0,0,0,1 ))); / * Chrome, Safari4 + * /
background: -webkit-linear gradient (hàng đầu, rgba (69,72,77,1) 0%, rgba (0,0,0,1) 100%); / * Chrome10 +, Safari5.1 + * /
background: -o-linear gradient (hàng đầu, rgba (69,72,77,1) 0%, rgba (0,0,0,1) 100%); / * Opera 11.10+ * /
background: -ms-linear gradient (hàng đầu, rgba (69,72,77,1) 0%, rgba (0,0,0,1) 100%); / * IE10 + * /
background: linear gradient (xuống dưới, rgba (69,72,77,1) 0%, rgba (0,0,0,1) 100%); / * W3C * /
lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 45484d', endColorstr = "# 000000", GradientType = 0); / * IE6-9 * /
color: #fff;
text-decoration: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;}
# Label1 a: hover {fbackground: rgb (73.192.240); / * Trình duyệt Old * /
background: -moz-linear gradient (hàng đầu, rgba (73,192,240,1) 0%, rgba (44,175,227,1) 100%); / * FF3.6 + * /
background: -webkit-gradient (tuyến tính, trên bên trái, phía dưới bên trái, màu sắc-stop (0%, rgba (73,192,240,1)), màu sắc-stop (100%, rgba (44,175,227,1))); / * Chrome, Safari4 + * /
background: -webkit-linear gradient (hàng đầu, rgba (73,192,240,1) 0%, rgba (44,175,227,1) 100%); / * Chrome10 +, Safari5.1 + * /
background: -o-linear gradient (hàng đầu, rgba (73,192,240,1) 0%, rgba (44,175,227,1) 100%); / * Opera 11.10+ * /
background: -ms-linear gradient (hàng đầu, rgba (73,192,240,1) 0%, rgba (44,175,227,1) 100%); / * IE10 + * /
background: linear gradient (xuống dưới, rgba (73,192,240,1) 0%, rgba (44,175,227,1) 100%); / * W3C * /
lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 49c0f0', endColorstr = '# 2cafe3', GradientType = 0); / * IE6-9 * /}
.label cỡ {line-height: 1.5; sắp xếp: left;}
.h2head-text {margin: 10px -40px 8px 55px; color: # 666666; font-family: arial; font-size: 13px;}

# Label1 {width: 320px ;; biên giới-dưới-width: 1px;
border-bottom-style: solid; 
biên giới-dưới-color: # D8D8D8;}

Đọc thêm: http://blog.atsvn.net/2013/06/tuy-chinh-tien-ich-nhan-label-widget.html#ixzz2ps9SFxai

Lưu ý:  Thay đổi all the information số màu sắc tùy ý, tham khảo  Bảng Mã Màu Thập Lục Đẹp Cho Blogger