Navigation Tab #7

Live Preview

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

<style>
a.navee, a.navee2, a.navee3, a.navee4{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:8px;display:block;
text-align:center;
background: #fff;
color:#000;
font-family:arial;
text-transform:uppercase;font-size:10px;
width:40px;
height:40px;
border:5px solid #FFD685;
padding:5px;
border-radius:1000px;
}
a.navee:hover, a.navee2:hover, a.navee3:hover, a.navee4:hover{
text-align:center;
color: #fff;
font-size:10px;
border:5px solid #fff;
background: #FFD685;
-moz-box-shadow: 0 0 5px 5px #eee;
-webkit-box-shadow: 0 0 5px 5px #eee;
box-shadow: 0 0 5px 5px #eee;
-webkit-transform: scale( -1.0) rotate( 540deg);
-moz-transform: scale( -1.0) rotate( 540deg);
}
a.navee , a.navee3 {
border:5px solid #BE81F7;
}
a.navee2 , a.navee4 {
border:5px solid #819FF7;
}
a.navee:hover , a.navee3:hover {
background: #819FF7;
}
a.navee2:hover , a.navee4:hover {
background: #BE81F7;
}
</style><br />
<div style="left: 4px; position: fixed; top: 150px;">
<a class="navee" href="http://www.blogger.com"><br />Home</a>
<a class="navee2" href="http://www.blogger.com"><br />Owner</a>
<a class="navee3" href="http://www.blogger.com"><br />Tutor</a>
<a class="navee4" href="http://www.blogger.com"><br />Free</a></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 ? ? ? :)