Monday, December 17, 2012

Tutorial : Navigate Hover

Tumblr_lotue3esjn1qc5qv5o1_500_large
Tutorial yang kali ni atin dah tunjuk contoh gambar bawah ni, harap korang pahamlah >< . Sebab ade orang minta buat navigate macam atin ni .. 
  • Template designer boleh paste di  HTML/GADGET 
  • Blogskin ikut cara bawah ni

1. Cari code </style>
2. Copy code bawah ni
a.navi {
display:inline-block;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
padding:2px;
width:210px;
text-decoration:none;
font-family:calibri;
font-size:13px;
height:20px;
text-transform:uppercase;
color: #444;
background: #FED4EB;
text-align:center;
border: 1px #ffffff solid;
}
a.navi:hover {
color: #fff;
background:url(URL IMAGE);
background-position:50% 80%;
background-size:400px;
}

3. Paste di atas code </style>
4. Next, copy code bawah ni
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
5. Paste kat sideber korang .

---------------------------------------------------------------------------------------------

puple : put image 
hijau : color background

2 comments: