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

 
 

No comments:

Post a Comment

Moshi - Moshi

Leave comment here
Request ? tell in cbox
Dont bad words

Obey the rules ? Free comment :)

1
2
3
4
5
 
Related Posts Plugin for WordPress, Blogger...