Làm đẹp cho Label Cloud của Blogger với CSS
1. Đăng nhập vào Blog
2. Vào Bố cục (Layout)
3. Chọn Thêm Tiện ích (Add Widget)
4. Chọn Nhãn và thiết lập như sau :
Trong định cấu hình nhãn :
Trong hiển thị chon Cloud
Lưu lại
5. Thêm 1 trong các đoạn mã dưới đây vào trước thẻ ]]></b:skin>
* Label Cloud Kiểu số 01
1. Đăng nhập vào Blog
2. Vào Bố cục (Layout)
3. Chọn Thêm Tiện ích (Add Widget)
4. Chọn Nhãn và thiết lập như sau :
Trong định cấu hình nhãn :
Trong hiển thị chon Cloud
Lưu lại
5. Thêm 1 trong các đoạn mã dưới đây vào trước thẻ ]]></b:skin>
* Label Cloud Kiểu số 01
.label-size a {
padding: 8px 10px;
border:1px solid #e9e9e9;
background:#F7F7F7;
text-shadow:0 1px 0 white;
-webkit-transition-duration:.3s;
-moz-transition-duration:.3s;
-moz-box-shadow:inset 0 0 2px #fff,0 0 2px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0 0 2px white,0 0 2px rgba(0,0,0,0.1);
box-shadow:inset 0 0 2px white,0 0 2px rgba(0,0,0,0.1);
display:inline-block;
font-family: Droid Sans, sans-serif;
font-style: normal;
font-size: 8pt;
float: left;
margin: 1px;
}
.label-size a:hover {
background:#ededed;
}
* Label Cloud Kiểu số 02padding: 8px 10px;
border:1px solid #e9e9e9;
background:#F7F7F7;
text-shadow:0 1px 0 white;
-webkit-transition-duration:.3s;
-moz-transition-duration:.3s;
-moz-box-shadow:inset 0 0 2px #fff,0 0 2px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0 0 2px white,0 0 2px rgba(0,0,0,0.1);
box-shadow:inset 0 0 2px white,0 0 2px rgba(0,0,0,0.1);
display:inline-block;
font-family: Droid Sans, sans-serif;
font-style: normal;
font-size: 8pt;
float: left;
margin: 1px;
}
.label-size a:hover {
background:#ededed;
}
.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;
}
* Label Cloud Kiểu số 03margin: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;
}
.Label a{
padding-left:10px;
background:#0090D5;
padding:0 10px;
color:#fff!important;
height:26px;
line-height:26px;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:1px;
margin-top:1px;
font-size:13px; }
.Label a:hover{
background:#69625A;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: px;
}
* Label Cloud Kiểu số 04padding-left:10px;
background:#0090D5;
padding:0 10px;
color:#fff!important;
height:26px;
line-height:26px;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:1px;
margin-top:1px;
font-size:13px; }
.Label a:hover{
background:#69625A;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: px;
}
.Label a{
padding-left:20px;
background:#000;
padding:0 20px;
color:#fff!important;
border-radius:100px;
-moz-border-radius:100px;
height:32px;
line-height:32px;
text-transform:uppercase;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:5px;
margin-top:5px;
font-size:14px; }
.Label a:hover{
color:#000 !important;
background:#ff0; }
* Label Cloud Kiểu số 05padding-left:20px;
background:#000;
padding:0 20px;
color:#fff!important;
border-radius:100px;
-moz-border-radius:100px;
height:32px;
line-height:32px;
text-transform:uppercase;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:5px;
margin-top:5px;
font-size:14px; }
.Label a:hover{
color:#000 !important;
background:#ff0; }
.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:15px;
color:#000;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
background:#000;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
color:#fff;
}
* Label Cloud Kiểu số 06
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:15px;
color:#000;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
background:#000;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
color:#fff;
}
* Label Cloud Kiểu số 06
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:13px;
font-family:Open Sans;
color:#fff!important;
}
.sidebar .label-size a {
color:#fff!important;
font-weight:bold;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}
* Label Cloud Kiểu số 07 (Nhiều màu sắc)position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:13px;
font-family:Open Sans;
color:#fff!important;
}
.sidebar .label-size a {
color:#fff!important;
font-weight:bold;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}
.cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #fff;
font-family: 'Open Sans',"Segoe UI",Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.label-size:nth-child(1) { background: #F53477; }
.label-size:nth-child(2) { background: #89C237; }
.label-size:nth-child(3) { background: #44CCF2; }
.label-size:nth-child(4) { background: #01ACE2; }
.label-size:nth-child(5) { background: #94368E; }
.label-size:nth-child(6) { background: #A51A5D; }
.label-size:nth-child(7) { background: #555; }
.label-size:nth-child(8) { background: #f2a261; }
.label-size:nth-child(9) { background: #00ff80; }
.label-size:nth-child(10) { background: #b8870b; }
.label-size:nth-child(11) { background: #99cc33; }
.label-size:nth-child(12) { background: #ffff00; }
.label-size:nth-child(13) { background: #40dece; }
.label-size:nth-child(14) { background: #ff6347; }
.label-size:nth-child(15) { background: #f0e68d; }
.label-size:nth-child(16) { background: #7fffd2; }
.label-size:nth-child(17) { background: #7a68ed; }
.label-size:nth-child(18) { background: #ff1491; }
.label-size:nth-child(19) { background: #698c23; }
.label-size:nth-child(20) { background: #00ff00; }
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {background: #222;}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}
(Sưu tầm)
text-align: left;
}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #fff;
font-family: 'Open Sans',"Segoe UI",Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.label-size:nth-child(1) { background: #F53477; }
.label-size:nth-child(2) { background: #89C237; }
.label-size:nth-child(3) { background: #44CCF2; }
.label-size:nth-child(4) { background: #01ACE2; }
.label-size:nth-child(5) { background: #94368E; }
.label-size:nth-child(6) { background: #A51A5D; }
.label-size:nth-child(7) { background: #555; }
.label-size:nth-child(8) { background: #f2a261; }
.label-size:nth-child(9) { background: #00ff80; }
.label-size:nth-child(10) { background: #b8870b; }
.label-size:nth-child(11) { background: #99cc33; }
.label-size:nth-child(12) { background: #ffff00; }
.label-size:nth-child(13) { background: #40dece; }
.label-size:nth-child(14) { background: #ff6347; }
.label-size:nth-child(15) { background: #f0e68d; }
.label-size:nth-child(16) { background: #7fffd2; }
.label-size:nth-child(17) { background: #7a68ed; }
.label-size:nth-child(18) { background: #ff1491; }
.label-size:nth-child(19) { background: #698c23; }
.label-size:nth-child(20) { background: #00ff00; }
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {background: #222;}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}
(Sưu tầm)
Sạc dự phòng tích hợp màn hình Led Dung Lượng 10000MAH