Tutorial : Navigation Tab #3

Live Preview 1. Layout --> Add A Gadget --> Edit HTML/JavaScript
2. Copy dan paste code di bawah :

<style>
navi {
font-family: arial; letter-spacing: 1px; font-size: 11px;
line-height: 13px; display: inline-block;
background: #F6CEE3; color: #fff; width: 110px; padding: 5px;
margin: 1px; text-align: center; text-transform: lowercase;
-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
navi:hover {
font-family: verdana; letter-spacing: 1px; font-size: 11px; line-height: 13px; display: inline-block;
background: #eee ;border: 3px solid #CEF6F5; color: #000; width: 110px;
-webkit-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    -ms-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
    }
</style>
<br />
<center>
<a href="LINK"><navi>home</navi></a>
<a href="LINK"><navi>about</navi></a>
<a href="LINK"><navi>stuff</navi></a>
<a href="LINK"><navi>link</navi></a>
<a href="LINK"><navi>site</navi></a>
</center>
</div>

 EDIT :
ABC : Link Page kome..
ABC : Background sebelum dan selepas hover..
ABC : Tajuk
3. Dah siap edit , Save..
4. Then , Preview.. Haaa jadi ke tidak ? ? ? :)