1997: Tutorial : Label List Style

Tutorial : Label List Style

14 November 2015


Gambar kiri before hover. Gambar kanan after hover.

Sebelum tu, make sure korang dah add widget labels ni dalam layout korang. Then tukar setting dia macam bawah ni. Tak semestinya sama. Macam setting aku ni, aku tick "Show number of post.." dengan sorting "by frequencies" kan. So hasilnya macam dekat atas ni la.


Korang buka template korang, pilih edit HTML, then  Ctrl + F  cari code ]]></b:skin>

Paste code bawah ni atas code ]]></b:skin> tadi.
/* label */
.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:center;
}
.label-size {
transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s;
background:#2e2e2e;
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
}
Lepas dah siap edit color code dia, save pastu tengok la hasilnya.

4 comments:

Related Posts Plugin for WordPress, Blogger...