Tutorial : Navigate Hover { 1 }

Kawaii
Assalamualaikum and annyeonghaseyo. Dah lama sbnarnya yg request tutor ni. Cuma tieqa je baru nak buat. Navi ni asalnya dari layout lama yg tieqa pakai utk official blog dulu. Credit to owner. 

HOME ABOUT STUFF FOLLOW DBOARD

{ preview }

1. Copy code ni

<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 dalam blog korang
3. Preview & save

Biru : warna background
Pink : link / url
Purple : title

Posted by at 9:10 PM

6 comment [s]:

HunHan said...

thanzs akak,,

July 29, 2013 at 9:13 PM [REPLY]
atiqahjaidin said...

@// Alyaa Najlaa U're welcome :)

July 29, 2013 at 9:17 PM [REPLY]
Aimi Wardina ♥ said...
This comment has been removed by the author.
July 29, 2013 at 10:43 PM [REPLY]
Aimi Wardina ♥ said...

guna, thank you !

August 1, 2013 at 1:04 AM [REPLY]
Unknown said...

thank you

November 29, 2013 at 12:23 PM [REPLY]
Auni said...

assalamualaikum ! thanks for the tutorial ! thanks sangat-2

January 1, 2014 at 2:24 PM [REPLY]

Post a Comment