Tutorial { Menu Float }

• Add Gadget > HTML/Javascript
• Copy dan paste dalam HTML/Javascript

<style>
.mas erma{
width:60px;
padding:15px;
margin-top:15px;
box-shadow:2px 2px 4px #DFDFDF;
background:#eee;
font:10px tt; 
text-align:center;
Text-decoration:none;
color:#888;
text-transform:uppercase;
display:block;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
border-left:0px solid #000;
-webkit-border-top-right-radius: 333px;
-webkit-border-bottom-right-radius: 333px;
-moz-border-radius-topright: 333px;
-moz-border-radius-bottomright: 333px;
border-top-right-radius: 333px;
border-bottom-right-radius: 333px;
}
.mas erma:hover{
width:66px;
border-left:10px solid #aaa;
}
@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>
<div style="background:#eee;color:#000; position:fixed; top:0px;left:35px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="background:#eee;color:#000; position:fixed; top:0px;left:90px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="position:fixed; top:100px;left:20px;width:100px; color:#aaa;">
<div style="background:#C5C5C5;color:#fff;width:100px; box-shadow:2px 2px 4px #FFF;text-align:center; font-size:12px; text-transform:uppercase;">
Navi</div>
<img src="URL IMAGE" style="width:90px;border:9px solid #eee;margin-top:5px;box-shadow:2px 2px 4px #ddd;" />

<a class="mas erma" href="LINK">NAME</a>
<a class="mas erma" href="LINK">NAME</a>
<a class="mas erma" href="LINK">NAME</a>
<a class="mas erma" href="LINK">NAME</a>
<a class="mas erma" href="LINK">NAME</a>
</div>

• Lepas dah edit code tu mcm yang korang nak, korang boleh la save ja :-)
• Thanks Wanaseoby