Tùy biến label cloud với CSS cho blogger - Phần 1

Blogger đã cung cấp cho các bạn tiện ích nhãn dưới dạng đám mây tuy nhiên nó còn khá là sơ sài, đơn giản. Bài viết này namkna sẽ hướng dẫn bạn tùy biến tiện ích label cloud (nhãn đám mây) này bằng CSS. Với thủ thuật này tên mỗi nhãn sẽ được đóng khung kết hợp với hiệu ứng xoay tên nhãn một góc lệch so cới ban đầu khi dê chuột vào một tên nhãn bất kỳ nào đó!.

Hãy dê chuột vào hình bên dưới để xem Demo. Hãy chú ý nhãn Javarscipt xoay nha.

☼ 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ập nhật mầu khác?

.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;
}

Style 3:

Ảnh minh họa:

.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;
}

MyBloggerTricks