theme by iliyon
bleu-rian
TUTO - Bias List #1
Thursday, 11 April 2013 | 4/11/2013 | 1comments
----------------------------------------------------------------------------------------------------
aigooo~~~ *wink2

assalamualaikum, salam sejahtera dan salam 1 malaysia #macamcakapdalamperhimpunanpula
untuk kali ini aq nak buat tuto....ni ialah first tuto aq...tuto ni sebenarnya di request oleh QILA....kalau tidak jangan harap aq nak buat tuto ni...hahahahak
ok i hope korang faham cara-caranya...maklumlah first tuto......

bias list ni jenis macam ni.....

then bila cursor menghala ke arah gambar tuh nama nya akan keluar..

  1. paste kan code html di bawah nih dekat </style> atau pun dekat page navigation korang...
<style>
.icon2 {
margin: 5px;
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
border: 1px solid #fff;
float: left;
}
#bias {
position: absolute;
display: block;
width: 300px;
height: 30px;
top: 30px;
margin-left: -2
0px;
opacity: 0;
text-align: center;
color: #A4A4A4;
background: #fff;
-webkit-transition-duration: 0.8s;
border-top: 2px solid #E0E6F8;
border-bottom: 2px solid #E0E6F8;
line-height: 4px; text-transform: uppercase ;
-webkit-transform: rotate(-36deg);
font-size: 12px;
font-family:bradley hand ITC;
}
.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="2" bordercolor="#E0ECF8" cellpadding="3" cellspacing="0" style="text-align: center; width: 520px;">
<tbody>
<tr>
<td><div class="icon2">
<img src="IMAGE URL" width="100px" /><br />
<div id="bias">
NAME</div>
</div>
</td>
<td><div class="icon2">
<img src="IMAGE URL" width="100px" /><br />
<div id="bias">
NAME</div>
</div>
</td>
<td><div class="icon2">
<img src="IMAGE URL" width="100px" /><br />
<div id="bias">
NAME</div>
</div>
</td>
<td><div class="icon2">
<img src="IMAGE URL" width="100px" /><br />
<div id="bias">
NAME</div></div>
</td>
</tr>

<td><div class="icon2">
<img src="IMAGE URL" width="100px" /><br />
<div id="bias">
NAME</div></div>
</td>
</tr>
<tr>

IMAGE URL tuh letak url gambar bias korang. kalau nak cantik lagi gambar tuh berukuran 200x200 / 100x100
NAME korang letak la nama bias korang
NOMBOR bagi yang dihighlight dengan hijau nih korang boleh tukar ikut suka korang la...highlight hijau nih ialah ukuran/tebal line
#WARNA tukar ikut warna yang korang suka..list warna boleh ambil dekat sini http://html-color-codes.info/
FONT boleh tukar font...font boleh cari dekat microsoft office words
SIZE tukar size font
TYPE jenis border boleh tukarkan kepada solid / dashed / dotted

-CREDITS : ATINTORY-