Tutorial : Cute Bias List
Name
|
Name
|
Name
|
Name
|
<style>
.icon2 {
margin: 5px;
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
border: 3px solid #BBBBBB;
float: left;
}
#bias {
position: absolute;
display: block;
width: 300px;
height: 30px;
top: 30px;
margin-left: -20px;
opacity: 0;
text-align: center;
color: #fff;
background: #7C7C7C;
-webkit-transition-duration: 0.8s;
border-top: 3px solid #BBBBBB;
border-bottom: 3px solid #BBBBBB;
line-height: 4px; text-transform: uppercase ;
-webkit-transform: rotate(-30deg);
font-size: 12px;
font-family:arial;
}
.icon2:hover #bias{left: 20px; top: 60px;
bottom: 5px; opacity: 1;
width: 103px; height: 20px;
line-height: 20px;
-webkit-transform: rotate(0deg)
}
}
</style>
<table border="0" bordercolor="" cellpadding="3" cellspacing="0" style="text-align: center; width: 520px;">
<tbody>
<tr>
<td><div class="icon2">
<img src="URLIMG" width="100px" /><br />
<div id="bias">
Name</div>
</div>
</td>
<td><div class="icon2">
<img src="URLIMG" width="100px" /><br />
<div id="bias">
Name</div>
</div>
</td>
<td><div class="icon2">
<img src="URLIMG" width="100px" /><br />
<div id="bias">
Name</div>
</div>
</td>
<td><div class="icon2">
<img src="URLIMG" width="100px" /><br />
<div id="bias">
Name</div>
</div>
</td>
</tr>
<tr>
</tr>
</tbody></table>
2. Template designer. Paste dalam page
3. Template classic. Paste dalam HTML
4. Preview & save.
Biru : warna border
Pink : URL gambar
Hijau : nama
29 comment [s]:
kak, kite pakai ea. da lame carik tuto ni, timekasih. thankGyu~
@kaikayy : Pakai la :) yeol welcome
mkasih! blehla try
ThankGYU ;) dah lama carik tuto ni!
Akak kita pakai tau :) ThankYou ;)
kita pakai tau :) thanks
TQQ!!!
err . akk yang warna pink ngan hijau tu mne ?
okey2 da nampak >.<
unnie try lg..xboleh jgk..nk ngis rase..uwaa..klu ade code table slain dr code nie mmg xleh masuk ea,dongsaeng?
@Farhana Lee : Yeke, unnie? tak boleh. sbb nt akan ada lg satu border kan? ermm :/
@All : Welcome all :)
Ha'ah dongsaeng.Table tu jd kt bwh skli.uar page. :/
unnie kalau macam ni nak pakai Untuk Blogskin ade tak ? :'3
thanxxxxx ! ^^
Unnie guna ni. :)
saya nak pakai ~ Thanks :)
Thanks for the tuto. Dah lama cari. 고마워요 ^^
unnie saya punya kluar tapi knapa kalau scroll bawah baru nmpk .. dia xde kat atas ..
@ikaido Eh jadi mcm tu eh? ._. maybe code salah kot.
@AtiqahJaidinsalah macam mana tu ? penat saya buat :'(
kita guna tau ^^ terima kasih sangat :))
akk , nk paste code tuh kat ne ??
nice. saya guna ye. :)
Guna ya!! Thanks ^^
Kai Oppa Why So HANDSOME .. btw, Thanks Kak
Kai Oppa Why So HANDSOME .. btw, Thanks Kak
Thanks kak, saya guna :3
Hi akak ^^ saya guna yer ? Best XD
akak, macam mana nak centerkan tuto ni dalam page kita?
Post a Comment