'>
HOME ABOUT T.F.P.D EX LINK E - NOVEL ARTWORK FOLLOW DASHBOARD

Friday, April 25

Tutorial : Navigate Hover { 1 }


Semalam ada Kak Ekin request tutorial navi bar


TITLE TITLE TITLE TITLE

[PREVIEW]

1. Copy Code di bawah ini


<style>
a.navi {
border:1px solid #ebebeb;
text-transform:uppercase;
background:#fff;
text-decoration:none;
color: #666; padding: 6px;
font: 8px yow;
margin-left: 5px; margin-right: 5px;
 -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
text-decoration:none;
box-shadow:inset 0px 0px 0px #111,
inset 0px 0px 0px #111; display: inline-block;
width: 65px;
}

a.navi:hover {
-webkit-transition-duration: 0.5s;
box-shadow:inset 0px 14px 0px #111,
inset 0px -14px 0px #111; color: #fff;
}
@font-face { font-family:yow !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>
<center>
<a class="navi" href="LINK">TITLE</a>
<a class="navi" href="LINK">TITLE</a>
<a class="navi" href="LINK">TITLE</a>
<a class="navi" href="LINK">TITLE</a>
</center>

2. Paste dekat mana mana .  design>add gadget>html/javascript
3. Preview and Save.

Biru : warna background  http://immigration-usa.com/html_colors.html
Pink : link / url
Purple : title

Credit to : Atiqah Jaidin

4 comments:

wancrazykid said...

pandainya main code :) ...wan kalau bap2 code ni pening sikit...ahahahah

Ikha :) said...

@Lee Wa Wan : Ikha ni mana pandai main code.. code tu pun copy dekat seorang blogger..

Unknown said...

wahhh cam comel je navigate ni..lama dah cari..hukhuk

Ikha :) said...

@Niyaz zara : oh ye kew.. baguslah kalau dah jumpa.. :)