How to add Floating Navigation to your blog - Style 4

Assalamualaikum and hi! In this entry I would like to post another style of floating navigation on the side of your blog. Floating mean sticking navigation and I added special effect to this cutie. Click the Live Preview to see how it works!

Live preview 

To apply this thing to your blog, edit the code in http://htmledit.squarefree.com/ - To customize the colors, link, and purpose. Then paste the codes in your HTML/Javascript gadget. For classic template, paste the code under </style>

<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>

Thanks for reading :)