Kumpulan Css Label Keren Dan Cara Pemasangan

Diblogger label adalah suatu fitur untuk menunjukan konten yang diberi label tertentu, Membuat label didalam blog adalah suatu keharusan menurut seorang blogger karna tanpa membuat label disetiap postingan/konten maka akan sangat sulit untuk menemukan postingan/konten tersebut oleh karna itu membuat label diblog dianggap wajib. Yang biasanya disimpan disidebar kiri atau kanan agar menarik perhatian pengunjung, dan bagai mana cara mempercantik tampilan label agar
lebih menarik yuk simak dibawah ini :

1. Style 1



Cara pemasangan : masuk ke blogger > Tema > Sesuaikan > Lanjutan > Tambahkan Css > Terapkan Ke blog > Done

Html css style 1 :

.label-size { float: left; margin: 0 0 7px 20px;position: relative;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 0.75em;font-weight: bold;text-decoration: none;color: #996633;text-shadow: 0px 1px 0px
rgba(255,255,255,.4);padding: 0.417em 0.417em 0.417em 0.917em;border-top: 1px solid #d99d38; border-right: 1px solid #d99d38;border-bottom: 1px solid #d99d38; -webkit-border-radius: 0 0.25em 0.25em 0; -moz-border-radius: 0 0.25em 0.25em 0;border-radius: 0 0.25em 0.25em 0;background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47'); -webkit-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1);-moz-box-shadow: inset 0 1px 0 #faeaba,0 1px 1px rgba(0,0,0,.1);box-shadow: inset 0 1px 0 #faeaba,0 1px 1px rgba(0,0,0,.1);z-index: 1;}.label-size:before { content: '';width: 1.30em;height: 1.39em;background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');position: absolute;left: -0.69em;top: .2em;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg); -o-transform: rotate(45deg);transform: rotate(45deg);border-left: 1px solid #d99d38;border-bottom: 1px solid #d99d38;-webkit-border-radius: 0 0 0 0.25em;-moz-border-radius: 0 0 0 0.25em;border-radius: 0 0 0 0.25em;z-index: 1;}.label-size:after {content: '';width: 0.5em;height: 0.5em;background: #fff;-webkit-border-radius: 4.167em; -moz-border-radius: 4.167em;border-radius: 4.167em;border: 1px solid #d99d38;-webkit-box-shadow: 0 1px 0 #faeaba; -moz-box-shadow: 0 1px 0 #faeaba;box-shadow: 0 1px 0 #faeaba;position: absolute;top: 0.667em;left: -0.083em;z-index: 9999;}#Label1 {height: 210px;}.label-size:hover {background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');border-color: #e1b160;}.label-size:hover:before {background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c'); border-color: #e1b160;

Style 2 : 

Cara pemasangan : masuk ke blogger > Tema > Sesuaikan > Lanjutan > Tambahkan Css > Terapkan Ke blog > Done

Html Css Style 2 :

.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:#0dd7b4;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-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333333;color:#fff!important} .label-size{line-height:1.2}

 Style 3 : 

Cara pemasangan : masuk ke blogger > Tema > Sesuaikan > Lanjutan > Tambahkan Css > Terapkan Ke blog > Done

Html css Style 3 :

.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{border-radius:30px;background:#FA0830;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{border-radius:30px;background:#333333} .label-count{white-space:nowrap;border-radius:30px;padding-right:3px;margin-left:-3px;background:#333333;color:#fff!important} .label-size{line-height:1.2}

 Style 4 :

Cara pemasangan : masuk ke blogger > Tema > Sesuaikan > Lanjutan > Tambahkan Css > Terapkan Ke blog > Done

Html css 4 :

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{border-radius:30px;background:#FA0830;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{border-radius:30px;background:#333333} .label-count{white-space:nowrap;border-radius:30px;padding-right:3px;margin-left:-3px;background:#333333;color:#fff!important} .label-size{line-height:1.2}

Style 5 :

Cara pemasangan : masuk ke blogger > Tema > Sesuaikan > Lanjutan > Tambahkan Css > Terapkan Ke blog > Done

Html css 5 :

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-size{ 

Itu lah 5 style label keren, yang bisa dipakai untuk memperkeren tampilan label, buat yang sudah paham css bisa diedit font atau warna sesuai keinginan masing - masing.