) AYEMRAWI;
HOME ABOUT CATEGORY ARCHIVE
Follow

Tutorial : Vertical Tab Menu


Heyho, allz !

Okay, tab menu ni bentuk vertical. So, let's get start.

Pergi Template. Pastekan kod bawah sebelum </style>

a.wink {
background: url(URL IMG);
padding: 1px;
letter-spacing: 2px;
display: inline-block;
width: 200px;
color: #ffffff;
-webkit-transition-duration: 0.5s;
font-family: Arial;
font-size: 10px;
text-align: center;
text-transform: normal;
}

a.wink:hover {
background: url(URL IMG);
width: 300px; 
-webkit-transition-duration: 0.5s;
color: #ffffff;
}  
Merah : URL gambar
Biru : Kelebaran vertical.
Hijau : Warna Font
Oren : Font
Gold : Saiz Tulisan
Purple : Text align
Pink : Text transform

Next,  pastekan kod di bawah pula selepas table sidebar
<center> <a class="wink" onClick="document.getElementById('entry').innerHTML=document.getElementById('entry').innerHTML" title="Entry">Home</a> <a class="wink" onClick="document.getElementById('entry').innerHTML=document.getElementById('me').innerHTML" title="Owner">About</a> <a class="wink" onClick="document.getElementById('entry').innerHTML=document.getElementById('tuto').innerHTML" title="Stuffs">Tutorials</a> </center>
Adios. 
 
 

Labels:







Monday, October 17, 2011

| ALL RIGHT RESERVED © EST. 2010