Tutorial : Floating Navigation Style #2

    Hai-hai........ kali ini aku bagi floating navigation yang kedua , karena yang pertama sudah di request oleh Neira jadi aku post yang kedua
Preview :  

• Kalau pake classic template, paste didekat </style>
• Template designer tinggal taruh di HTML/GADGET

 Code :

<style>
a.you{
width:13px;
display:inline-block;
color:#fff;
text-align:left;
padding:2px;
overflow:hidden;
height:18px;
text-decoration:none;
padding-left:7px;
-webkit-transition: all 0.5s ease-in-out;
-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;
font-family:calibri;
margin:5px;
font-size:12px;
border-radius:333px;
}

a.you:hover{
width:80px;
{
</style><br />
<br />
<div style="position:fixed; top:200px;left:20px;"><br />
<a class="you" style="background:#FF8888;" href="LINK HERE"> <span style="padding-right:10px;font-size:16;">+</span>facebook</a><br />
<br />
<a class="you" style="background:#FFBBBB;" href="LINK HERE"> <span style="padding-right:10px;font-size:16;">+</span>twitter</a><br />
<br />
<a class="you" style="background:#9BF1D2;" href="LINK HERE"> <span style="padding-right:10px;font-size:16;">+</span>fanfiction</a><br />
<br />
<a class="you" style="background:#5EDFC9;" href="LINK HERE"> <span style="padding-right:10px;font-size:16;">+</span>tumblr</a><br />
<br />
</div>

 REPOST GIVE ME A CREDIT MY NAME AND MY LINK OK

Credit: Kak Wana