WANASEOBY: How to add Floating Navigation to your blog

Hi! Assalamualaikum. Today I will teach you on how to get this floating navigation. This is the fifth idea of the floating navigation. To browse other version of floating navigation that I have posted, please find the link on my tutorial list.

For classic template, copy and paste this code under/after the </style> in your blog theme code. For Blogger Template Designer users, copy this code and go to home > Layout > Add a gadget> HTML/Javascript > Paste the code on the HTML area.

<style>
.kev{
width:15px;
display:inline-block;
position:fixed;
color:#000;
text-align:center;
text-decoration:none;
padding-top:70px;
font-family:tt;
-webkit-border-bottom-right-radius: 55px;
-webkit-border-bottom-left-radius: 55px;
-moz-border-radius-bottomright: 55px;
-moz-border-radius-bottomleft: 55px;
border-bottom-right-radius: 55px;
border-bottom-left-radius: 55px;
font-size:8px;
}

#ones{
background:#FFD8D6;
height:200px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
top:0px;
left:20px;}

#ones:hover{
height:250px;}

#twos{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
background:#FF8585;
height:250px;
top:0px;
left:46px;}

#twos:hover{
height:300px;}

#tris{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
background:#CCC2C2;
height:100px;
top:0px;
left:71px;}

#tris:hover{
height:150px;}

@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
</style>

<a class="kev" id="ones" href="LINK">L<br/>I<br/>N<br/>K<br/><br/>1<br/></a>
<a class="kev" id="twos" href="LINK">L<br/>I<br/>N<br/>K<br/><br/>2<br/></a>

<a class="kev" id="tris" href="LINK">L<br/>I<br/>N<br/>K<br/><br/>3<br/></a>

As requested, this is the horizontal version of the navigation.

<style>
.kev{
height:11px;
display:inline-block;
position:fixed;
color:#000;
text-align:center;
text-decoration:none;
padding-left:70px;
padding-top:3px;
font-family:tt;-webkit-border-top-right-radius: 55px;
-webkit-border-bottom-right-radius: 55px;
-moz-border-radius-topright: 55px;
-moz-border-radius-bottomright: 55px;
border-top-right-radius: 55px;
border-bottom-right-radius: 55px;
font-size:8px;
}

#ones{
background:#FFD8D6;
width:200px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
left:0px;
top:20px;}

#ones:hover{
width:250px;}

#twos{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
background:#FF8585;
width:250px;
left:0px;
top:46px;}

#twos:hover{
width:300px;}

#tris{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
background:#CCC2C2;
width:100px;
left:0px;
top:71px;}

#tris:hover{
width:150px;}

@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
</style>

<a class="kev" id="ones" href="LINK">LINK 1</a>
<a class="kev" id="twos" href="LINK">LINK 2</a>
<a class="kev" id="tris" href="LINK">LINK3</a>

WANASEOBY

4/23/2013

How to add Floating Navigation to your blog - Style 5

4/23/2013