Rumah_Thalib-Silahkan kamu ambil saja kode-kode dibawah ini. Kamu coba saja satu-satu yang sesuai dengan selera kamu. Belum tahu cara pasangnya? Lihat selengkapnya disini
Desain Label 1 :
/* Label 1*/ .label-size-1, .label-size-2, .label-size-3, .label-size-4, .label-size-5 { font-size: 100%; opacity: 10; } .cloud-label-widget-content {text-align: left} .label-size { background-color: #56b8e2; display: block; float: left; margin: 0 3px 3px 0; color: #ffffff; font-size: 11px; text-transform: uppercase; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; transition: .5s; } .label-size a, .label-size span { display: inline-block; color: #ffffff!important; padding: 6px 8px; font-weight: bold; } .label-size:hover {background-color: #333333} .label-size:hover .label-count {background-color: #56b8e2} .label-size:hover .label-count:before {border-right: 6px solid #56b8e2} .label-count { position: relative; white-space: nowrap; padding-right: 3px; margin-left: -2.5px; background-color: #333333; } .label-count:before { content: ""; width: 0; height: 0; border: 0 solid transparent; border-top-width: 5px; border-bottom-width: 5px; border-right: 6px solid #333333; position: absolute; top: 8px; left: -6px; }
Desain Label 2 :
/* CSS label 2 */ #sidebar-wrapper .Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #f1f1f1;transition:all .3s ease-out;} #sidebar-wrapper .Label li:hover {background:#fff;color:#ef4824;} #sidebar-wrapper .Label li:before {content:"\f105";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px; color:#666;transition:all .3s ease-out;} #sidebar-wrapper .Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#ef4824;} #sidebar-wrapper .Label li a {color:#666;font-size:95%;transition:all .3s ease-out;} #sidebar-wrapper .Label li a:hover {color:#ef4824;} #sidebar-wrapper .Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-size:12px;transition:initial;border-radius:2px;} #sidebar-wrapper .Label li span:hover{background-color:#ef4824;color:#fff} #sidebar-wrapper .label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-size:13px;border:1px solid #e6e6e6;transition:all 0.3s;} #sidebar-wrapper .label-size:hover{background:#ef4824;border-color:#b69c6c;} #sidebar-wrapper .label-size a {display:inline-block;color:#444;padding:8px 10px; font-weight:400;} #sidebar-wrapper .label-size a:hover {color:#fff;} #sidebar-wrapper .label-size a:before {content:"\f02b";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px; color:#444;transition:initial;} #sidebar-wrapper .label-size a:hover:before {content:"\f02b";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
Desain Label 3 :
/* CSS label 3*/ .label-size{ margin:0; padding:0; position:relative; } .label-size a , .label-size span{ float:left; height:24px; line-height:24px; position:relative;font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; } .label-size a:before , .label-size span::before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent;border-style:solid; border-width:12px 12px 12px 0; } .label-size a:after , .label-size span::after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px;height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .label-size a:hover , .label-size span::hover { background:#555;} .label-size a:hover:before , .label-size span::hover::before{border-color:transparent #555 transparent transparent;}
Desain Label 4 :
/* Labels 4*/ .widget-content.list-label-widget-content {padding:0;} .widget-content.cloud-label-widget-content {display:inline-block;} .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1} .cloud-label-widget-content{text-align:left;padding:10px;} .label-count {background:#fff;white-space:nowrap;display:inline-block;padding:5px 7px;margin-right:3px;border:1px solid #FF9934;border-radius:4px;} .label-count:hover {background:#fafafa;color:#222;border-radius:4px} .Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #eee;transition:all .3s ease-out;} .Label li:hover {background:#fff;color:#FF9934;} .Label li:before {content:"\f105";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px; color:#666;transition:all .3s ease-out;} .Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#29abe2;} .Label li a {color:#666;transition:all .3s ease-out;} .Label li a:hover {color:#FF9934;} .Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:12px;transition:initial;border-radius:2px;} .Label li span:hover{background-color:#FF9934;color:#fff} .label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;border:1px solid #FF9934;transition:all 0.3s;border-radius:5px;} .label-size:hover{background:#FF9934;border-color:#FF9934;} .label-size a {display:inline-block;color:#444;padding:8px 10px; font-weight:400;} .label-size a:hover {color:#fff;} .label-size a:before {content:"\f02b";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px; color:#444;transition:initial;} .label-size a:hover:before {content:"\f02b";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;} .Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;} .Label li:hover {color:#29abe2;} .Label li a {color:#aaa;transition:all .3s ease-out;} .Label li a:hover {color:#29abe2;} .Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:13px;font-weight:400;border-radius:2px;} .Label li span:hover{color:#29abe2} .label-size{background:#fff;color:#fff;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;transition:all 0.4s;} .label-size a {display:inline-block;color:#fff;padding:8px 10px; font-weight:400;transition:initial;} .label-size a:hover {background:#29abe2;color:#fff;transition:all 0.2s;} label-size a:before {content:"\f02b";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px; color:#fff;transition:initial;} .label-size a:hover:before {content:"\f02b";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;} .label-size:hover, #footer-wrapper-inner .label-size:hover{background:#29abe2;color:#fff;transition:initial;} .label-count {background:#333;}
Desain Label 5 :
/*CSS Label 5* .Label a{ padding-left: 5px; padding-right: 31.5px; color: #fff; height: 32px; background: #359bed; margin-right: 2px; line-height: 32px; text-decoration: none; -webkit-transition: all .3s ease-in-out !important; float: left; margin-top: 2px; font-size: 13px; text-align: left; display: inline-block; border: 1px solid transparent; border-radius: 3px; } .Label a:hover{ background:none; border: 1px solid #545454; border-radius:3px; color:#222; } .Label a:after{ content: ""; position: absolute; width: 0px; height: 0px; border-width: 16.5px; border-style: solid; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent; }
Desain Label 6 :
/* Label 6*/ .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:10}.cloud-label-widget-content{text-align:left}.label-size{background:#0dd7b4;display:block;float:left;margin:0 3px 3px 0;color:#fff;font-size:11px;text-transform:uppercase}.label-size a,.label-size span{display:inline-block;color:#fff!important;padding:6px 8px;font-weight:700}.label-size:hover{background:#333}.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333;color:#fff!important}.label-size{line-height:1.2}
Desain Label 7 :
/*CSS Label 7*/ #sidebar-wrapper .Label li{position:relative;background:#fff;border-bottom: 1px solid #bbb;color:#444;padding:0;margin:0;text-align:left;width:100%;font-size:90%;transition:all .3s ease-out} #sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;} #sidebar-wrapper .Label li:before {content:"";position:absolute;width:0;height:100%;background:#4fafe9;transition:all .2s ease-in-out;} #sidebar-wrapper .Label li:hover:before {width:100%;} #sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s ease-out} #sidebar-wrapper .Label li a:hover {color:#fff;} #sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2} #sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;} #sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;} #sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;} #sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;} #sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;} #sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;} #sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;} #sidebar-wrapper .label-size a{background:#fff;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #e3e3e3;background-repeat:repeat-y;background-size:100% 90px;background-position:0 -30px;transition:all .3s} #sidebar-wrapper .label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s} #sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;top:-5px} #sidebar-wrapper .label-size a:hover{color:#444;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);background-position:0 0} .Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;} .Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-size:13px;font-weight:400;border-radius:2px;}
Desain Label 8 :
/* label cloud */ .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 { font-size:100%; filter:alpha(100); opacity:10 } .cloud-label-widget-content{ text-align:left } .label-size { background:#2ea9da; display:block; float:left; margin:0 3px 3px 0; color:#ffffff; font-size:11px; text-transform:uppercase; } .label-size a,.label-size span{ display:inline-block; color:#ffffff !important; padding:6px 8px; font-weight:bold; } .label-size:hover { background:#333333; } .label-size { line-height:1.2 } .label-count { white-space:nowrap; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; }
Desain Label 9 :
/*Labels Cloud Style*/ .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 #B20000; 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; }
Desain Label 10 :
/* label cloud seo indigo*/ .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 { font-size:100%; filter:alpha(100); opacity:10 } .cloud-label-widget-content{ text-align:left } .label-size { background:#2ea9da; display:block; float:left; margin:0 3px 3px 0; color:#ffffff; font-size:11px; text-transform:uppercase; } .label-size a,.label-size span{ display:inline-block; color:#ffffff !important; padding:6px 8px; font-weight:bold; } .label-size:hover { background:#333333; } .label-size { line-height:1.2 } .label-count { white-space:nowrap; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; }
Desain Label Cloud 11 :
/* label cloud seo indigo*/ .Label a{padding-left: 5px;padding-right: 31.5px;color: #fff!important;height: 32px;background: #1abc9c;margin-right: 2px;line-height: 32px; text-decoration: none;border: none !important;-webkit-transition: all .3s ease-in-out !important;float: left;margin-top: 2px;font-size: 13px;text-align: left; } .Label a:hover{color:#fff !important;background:#16a085; } .Label a:after{content: "";position: absolute;width: 0px;height: 0px;border-width: 16.5px;border-style: solid;border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent;}
Desain Label Super Mantap Cloud 12 :
/* label cloud*/ .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10;float:left;width:48%;} .cloud-label-widget-content{text-align:left} .label-size{border-radius:3px;display:block;float:left;line-height:normal;margin:0 3px 3px 0;color:#ffffff;font-size:12px;max-width:100%;text-transform:capitalize;} .label-size:hover{background:#337DAE;transition:.5s} .label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:500;} .label-size a{background:#337DAE;border-radius:3px;font-weight:400;} .label-size a:hover{font-weight:500;transition:.5s} .label-count{float:right;white-space:nowrap;border-radius:3px;padding-right:3px;margin-left:-3px;background:#E0492C;color:#fff !important;}
Nah sobat Thalib, itulah kumpulan kode Label terkeren yang dapat saya berikan. Jangan lupa untuk ikuti terus Blog ini agar sobat Thalib selalu mendapatkan Update terbaru seputar tutorial Blogging. Dan jangan lupa untuk share artikel ini kepada teman-teman kamu.
Kalau kamu ada pertanyaan atau masih ada yang kurang paham, langsung saja tanyakan di kolom komentar Artikel ini. Atau langsung saja kirimkan pertanyaan kamu lewat E-Mail ke Rumah_Thalib disini.
-----SUBSCRIBE THIS BLOG HERE-----