label cloud cho blogger thật đẹp với CSS

☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog

2- Vào Bố cục (Layout)

3- Chọn thêm tiện ích (Add widget)=> Thêm tiện ích Nhãn (Label)

- Nếu blog của bạn đã thêm tiện ích này rùi thì có thể bỏ qua bước 3 này.

4- Bấm vào chỉnh sửa (Edit) Widget Label vừa tạo (hoặc có sẵn) và cài đặt mục hiển thị là Cloud, Bỏ chọn ở mục Hiển thị số bài đăng theo nhãn, còn các mục khác tùy ý bạn:

- Lưu cài đặt lại.
5- Vào Mẫu (Template) => Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Xem video:

6- Thêm đoạn code bên dưới vào trước thẻ  ]]></b:skin>
Chọn một trong các style bên dưới:
Style1:
Ảnh minh họa:

.label-size{ 
margin:0 2px 6px 0; 
padding: 3px; 
text-transform: uppercase; 
border: solid 1px #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-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out; 
-moz-transform: rotate(7deg);  
-o-transform: rotate(7deg);  
-webkit-transform: rotate(7deg);  
-ms-transform: rotate(7deg);  
transform: rotate(7deg);  
filter: progid:DXImageTransform.Microsoft.Matrix( 
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); 
zoom: 1;  
}

.label-size a  { 
text-transform: uppercase; 
float:left; 
text-decoration: none; 
}
.label-size a:hover  { 
text-decoration: none; 
}

7- Lưu mẫu lại và xem kết quả nha.

Lưu ý: Nếu bạn muốn các hộp nhãn có kích thước ngẫu nhiên, hãy xóa font-size:10px; từ mã được cung cấp ở trên các bạn edit tùy theo ý mình cho phù hợp blogger

.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}

.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
background: #ffffff;
border: solid 1px #000000;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #ffffff;
background: #FBB117;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}