label

Modif Label dengan CSS

7:43 AM

label css
Live Demo

Semua blogger pasti sudah mengerti apa fungsi label.
Yup bener, untuk mengelompokkan postingan ke dalam kategori.
Tutorial kali ini tentang modifikasi label blog dengan menambahkan sentuhan css.


Berikut caranya:
1. Login blogger
2. Template > edit html
3. letakkan kode css berikut di atas  ]]></b:skin>
.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:0 1px 0 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:100;
}
.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;
}

4. save template
5. Menuju ke layout > add gadget dan pilih 'Labels '
6. Konfigurasi labels pilih 'clouds'
7. save dan lihat hasilnya



You Might Also Like

0 comments

SUBSCRIBE

Like us on Facebook