Four navigation style

Assalamualikum dan hai semua....setelah bereksperiment dengan kod akhirnya terhasilah empat style navigation ini... (over pulak)

boleh guna code ni tapi credit taw... penat saya ubah suai code...

This is an updated style on 11 October 2013

For blogskin / classic tempate paste the navigation code  anywhere you want it to appear...for template designer Layout --> Add gadget --> HTML/Javascript 

Live preview Here

Style  number one

<style>
.tablo{
font-size:12px;
color:black;
text-transform:uppercase;
background:#FFF9FA;
font-family:century gothic;
text-decoration:none;
padding:3px;
width: 50px;
display:inline-block;
border:1px solid #FFE3E6;
margin-top: 5px;margin-bottom: 5px;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tablo:hover {
background:#FFC6CF;
color:white;
}
</style>
<center>
<div style="background: #FFEBED;width:260px;border: 2px solid #FFEEEE;margin-bottom:7px; margin-top:7px;box-shadow:0px 2px 2px 2px #ffeeee;border:3px solid #ffffff;">
<a class="tablo" href="http://kawaiilady.blogspot.com/">Home</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">About</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">Stuff</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">Linky</a>
</div>
</center>

Style number two :

<style>

.haha{

width:60px;height:40px;

box-shadow:0px 0px 2px 3px #FFE9C6;

background:#FFF9E1;

font:12px century gothic;

text-align:center;

Text-decoration:none;

color:#888888;

display:inline-block;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

padding-bottom:5px;

padding-top:20px;padding-left:0px;padding-right:0px;

display:inline-block;

border-bottom-left-radius: 35px;

border-bottom-right-radius: 35px;

}

.haha:hover{

background:#FFFFFF;

color:#777;

border-top-right-radius: 35px;

-webkit-transform: rotate(-50deg) ;

-moz-transform: rotate(-50deg) ;

-o-transform: rotate(-50deg) ;

-ms-transform: rotate(-50deg) ;

}

</style>

<center>

<a class="haha" href="http://kawaiilady.blogspot.com/">Home</a>

<a class="haha" href="http://kawaiilady.blogspot.com/">About</a>

<a class="haha" href="http://kawaiilady.blogspot.com/">Stuff</a>

<a class="haha" href="http://kawaiilady.blogspot.com/">Linky</a>

</center>

Style number three :

<style>
.lola{
width:51px;height:35px;
padding-top:17px;
text-transform:uppercase;
border: 1px solid #E7F4FF;
background:#EFF8FF;
font:12px century gothic;
text-align:center;
Text-decoration:none;
color:#333333;
display:inline-block;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin:5px;margin-bottom:20px;
display:inline-block;
border-radius: 100%;
}
.lola:hover{
background:#FFFFFF;
color:#FFFFFF;text-shadow:0px 37px 0px #333333;
-webkit-transform: rotate(-360deg) ;
-moz-transform: rotate(-360deg) ;
-o-transform: rotate(-360deg) ;
-ms-transform: rotate(-360deg) ;
}
</style>
<center>
<a class="lola" href="http://kawaiilady.blogspot.com/">Home</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">About</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">Stuff</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">Linky</a>
</center>

Style number 4 :

<style>

.leaf {

width:45px;height:30px;

padding-top:15px;

text-transform:uppercase;

border: 3px solid #E2FFD5;

background:#E8FFE1;

font:11px century gothic;

text-align:center;

Text-decoration:none;

color:#333333;

display:inline-block;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

margin:3px;

display:inline-block;

border-radius: 100%;

border-top-right-radius:0px;

}

.leaf:hover{

background:#FFFFFF;

color:#000000;

border: 3px solid #E8FFE1;

background:#E2FFD5;

border-top-right-radius:100%;

border-bottom-left-radius:0px;

}

</style>

<center>

<div style="width:240px;padding:5px;background:#FFFCF2;box-shadow:0px 0px 2px 3px #FFF9E7;border:2px solid #ffffff;">

<a class="leaf" href="http://kawaiilady.blogspot.com/">Home</a>

<a class="leaf" href="http://kawaiilady.blogspot.com/">About</a>

<a class="leaf" href="http://kawaiilady.blogspot.com/">Stuff</a>

<a class="leaf" href="http://kawaiilady.blogspot.com/">Linky</a>

</div>

</center>

Kalau dah jadi comment taw... kalau tak jadik pon comment jugak...