Wednesday, 17 April 2013

Tutorial : Cute Bias List





Assalamualaikum . Jom kita hias blog dengan cute bias list ni ? Okay , let's do it ! 

Example :
Hover :

1. Copy code bawah ni 
<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


Credit to : AtiQah

0 comments: