Ads Nhà Tài Trợ Nam Trung JSC Thớt Gỗ, Ván Ghép Các Loại

Nam Trung JSC Thớt Gỗ, Ván Ghép Các Loại

Tổng hợp tùy chỉnh nhãn đám mây bằng CSS

seotop247 21:03 0

* Mẫu 1 chép đoạn code này chèn sau thẻ <head>

<style>
.label-size{     
display: inline-block;     
padding: 0px 10px;     
height: 29px;     
line-height:29px;     
border-radius: 5px;     
font-weight:bold;     
font-size:12px;     
text-decoration:none;  
}    
.label-size{    
border: 1px solid #769e42;    
box-shadow: inset 0 1px 0 #c5e59c ;    
background-color: #9ed35a;    
text-shadow: 0px 1px 1px #6ea23b;    
color: #fff;    
background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);  
}    
.label-size:hover{    
background-color: #b7fa66;    
background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);    
background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);    
background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);    
background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);    
background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);  }    
.label-size:active{    
background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);  
}    
.label-size{    
display:inline-block;    
border-radius: 5px 0 0 5px;    
border-right-width:0;    
position:relative;    
z-index:5;    
margin-right: 20px;    
margin-bottom: 10px;  
}    
.label-size:after{    
content: " ";    
width: 22px;    
height: 22px;    
line-height: 18px;    
font-size:25px;    
border-top: 1px solid #769e42;    
border-right: 1px solid #769e42;    
box-shadow: inset 0 1px 0 #c5e59c ;    
background-color: #9ed35a;    
text-shadow: 0px 1px 1px #7eac46;    
border-radius: 3px 7px 3px 0;    
color: #fff;    
background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    position:absolute;    top: 3px;    right: -12px;    z-index:-3;    -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */         -moz-transform: rotate(45deg);  /* FF3.5+ */          -ms-transform: rotate(45deg);  /* IE9 */           -o-transform: rotate(45deg);  /* Opera 10.5 */              transform: rotate(45deg);                 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */                         M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');                   zoom: 1;  }    
.label-size:hover:after{    
background-color: #b7fa66;    
background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);    
background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);    
background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);    
background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);    background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);  }    
.label-size:active:after{    
background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);  }    .label-size:before{    
content: " ";    
height:5px;    
width:5px;    
display:block;    
position:absolute;    
right:-3px;    
top:11px;    
background-color: #fcfdf5;    
border: 1px solid #83ab52;    
border-radius:5px;    
box-shadow: 0 1px 0 #b2ddd83;  
}    
.label-size span{    
padding:2px 5px;    
border: 1px solid #9e5c26;    
border-radius: 5px;    
box-shadow: inset 0 1px 0 #f5bf8c;    
background-color: #ed943f;    
text-shadow: 0px 1px 1px #000;    
margin-left: 10px;    
background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);    background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);    background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);    background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);    background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);  }    
#Label1 {height:210px !important;}

</style>

* Chú ý dòng cuối

#Label1 {<strong>height:210px</strong> !important;}

* Số 210 là chiều cao của nhãn bạn tùy chỉnh lại cho phù hợp

* Mẫu 2 chép đoạn code này chèn sau thẻ <head>

<style>
.widget li, .BlogArchive #ArchiveList ul.flat li{ list-style: none;
padding: .25em 0;
margin: 0;
text-indent: 0;}
.label-size {
float: left;
font-size: 13px;
}
.list-label-widget-content ul,
.list-label-widget-content li {
list-style: none outide none;
}
.list-label-widget-content li a {
background: #F3F3F3;
color: #525252;
border: 1px solid #E2E2E2;
border-radius: 3px;
float: left;
padding: 5px;
margin-bottom: 5px;
line-height: 16px;
width: 153px;
}
.list-label-widget-content li span {
color: orangered;
background: #F3F3F3;
border-radius: 3px;
min-width: 40px;
float: right;
padding: 6px;
margin-bottom: 5px;
text-align: center;
border: 1px solid #E2E2E2;
}
.list-label-widget-content li span:first-child {
background: #F3F3F3;
border: 1px solid #E2E2E2;
border-radius: 3px;
border-right: 10px solid;
border-left: 10px solid;
width: 113px !important;
float: left;
padding: 5px;
margin-bottom: 5px;
line-height: 16px;
width: 250px;
}
.list-label-widget-content li a:hover,
#footer-nav .list-label-widget-content li a:hover {
background: orangered;
color: #fff;
}
.cloud-label-widget-content .label-size {
font-size: 100%;
float: left;
}
.cloud-label-widget-content .label-size a {
color: #666;
float: left;
font-size: 12px;
margin: 0px 5px 5px 0px;
padding: 5px;
text-decoration: none;
border: 1px solid #E2E2E2;
border-radius: 3px;
}
.label-size a:hover, .label-size:hover .label-count, .label-size:hover a {
background-color: #FD4326;
color: #FFF;
text-decoration: none;
transition: all 0.2s ease-out 0s;
}
.cloud-label-widget-content .label-size span {
color: #666;
float: left;
font-size: 12px;
margin: 0px 5px 5px 0px;
padding: 5px;
text-decoration: none;
border: 1px solid #E2E2E2;
border-radius: 3px;
}
.cloud-label-widget-content .label-size span:first-child,
.cloud-label-widget-content .label-size span:first-child span:nth-child(2) {
background: #FD4326;
color: #FFF;
}
</style>

Tags

Đăng nhận xét

* Please Don't Spam Here. All the Comments are Reviewed by Admin.