Trong blogger bạn có thể thay đổi hoặc tùy chỉnh các widget mà bạn muốn. Các nhãn trong blogger là theo mặc định rất đơn giản trong gần như tất cả các mẫu bao gồm những tùy chỉnh. Nhưng, chúng ta có thể thay đổi các nhãn để một fancy tương ứng. Như một blogger nhãn là các loại cho toàn bộ bài viết của blog, do đó, nên làm cho nó hấp dẫn và đẹp hơn. Và cho mục đích này hôm nay mình có một mẹo để chia sẻ với bạn. Bí quyết là một số mã CSS3 mà sẽ thay đổi nhãn mặc định của bạn cho một nhãn ưa thích.
Hãy nhớ rằng,
thủ thuật blogspot này sẽ chỉ mang lại kết quả tốt nhất nếu bạn giữ các loại nhãn như nhãn đám mây. Điện toán đám mây cho thấy tất cả các liên kết nhãn trong một hộp. Vì vậy, thủ thuật này sẽ tạo nút. Bây giờ chúng ta hãy bắt đầu thêm các widget.
 |
| Thủ thuât tạo nhãn dẹp cho blogspot |
Làm thế nào để thêm một widget label để blog?
Để áp dụng thủ thuật đầu tiên của ngày hôm nay bạn sẽ có thêm một widget label vào blog của bạn. làm theo bước sau để thêm các nhãn đám mây widget trong blogger:
- Layout >> Thêm một Gadget >> Trượt xuống (Scroll Down) và Chọn Nhãn Widget
- Thêm nó và chọn các đám mây, nơi nó nói "Display" cũng bỏ chọn hộp mà nói: "Hiện số nhãn"
Bây giờ khi bạn đã thêm các widget label thành công, bạn có thể thực hiện thủ thuật này trên nhãn. Nhưng nếu bạn đã thêm vào các widget label sau đó bạn chỉ cần thay đổi nó để thiết lập tôi đã đề cập ở bước 3.
Làm thế nào để tùy chỉnh Widget Label với CSS3?
Bây giờ là phần thực tế là ở đây, để làm ưa thích của bạn và phụ tùng nhãn theo hấp dẫn các bước dưới đây và làm điều đó ngay lập tức:
- Tới Blogger
- Template HTML=> Chỉnh sửa HTML
- Tìm ]]> và khi dán đoạn mã dưới đây trước mã vừa tìm được
.label-size {
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: #996633;
text-shadow: 0px 1px 0px rgba(255,255,255,.4);
padding: 0.417em 0.417em 0.417em 0.917em;
border-top: 1px solid #d99d38;
border-right: 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(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: 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,.1);
-moz-box-shadow: inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
z-index: 1;
}.label-size:before {
content: '';
width: 1.30em;
height: 1.39em;
background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
position: absolute;
left: -0.69em;
top: .2em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(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:after {
content: '';
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;
position: absolute;
top: 0.667em;
left: -0.083em;
z-index: 9999;
}
#Label1 {
height: 210px;
}
.label-size:hover {
background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color: #e1b160;
}
.label-size:hover:before {
background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color: #e1b160;
}
Lưu lại để kiểm tra kết quả xem đã tạo nhãn thành công chưa? Cảm ơn bạ đã đọc bài viết "
Thủ thuật tạo nhãn (Label) đẹp cho blogspot " . Chúc thành công!
