August 13, 2013

Tutorial: Navigate Hover

Soup - Everyone

Kembali bertutorial. Baiklah. Kali ini saya nak share tutorial navigation bar yang ada effect apabila hover. Tutorial ini bukanlah dari saya. Credit to owner.


HOME ABOUT STUFF CONTACT
[Preview]

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

<br />
<center>
<a class="navi" href="http://www.blogger.com/LINK">HOME</a>
<a class="navi" href="http://www.blogger.com/LINK">ABOUT</a>
<a class="navi" href="http://www.blogger.com/LINK">STUFF</a>
<a class="navi" href="http://www.blogger.com/LINK">CONTACT</a>
</center>
2. Pergi ke Layout > Add a Gadget > HTML/Javascript. Paste code yang telah copy tadi di situ.

3. Preview dan save.

NOTA KAKI
Boleh tukar ikut kesesuaian.
kelabu : Warna background
merah : Link page blog anda. 
biru : Title


0 comments: