Live Demo
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
Comments
Post a Comment