Tutorial : Floating Navigation #1

Assalamualaikum & Salam Sejahtera

Okay hari ni nak bagi satu tutorial yang memang aku tak pernah bagi sebelum sebelum ni . first sekali nak ucap terima kasih kepada Wana untuk inspiration this tutor . dia punya floating navigation sangat awesome . tak percaya boleh lawat blog dia . okay , aku buat yang version simple punya . macam mana ? meh tengok gambar dekat bawah ;

Better Preview Here

Amacam , berminat nak buat macam tu dekat blog korang ? meh nak ajar kan :D


For Template Designer : Layout > Add a Gadget > HTML & JavaScript .

For Classic Template : Edit HTML

<style>
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.go {
background:black;
text-align:center;
font-family:tt;
font-size:8px;
text-transform:uppercase;
letter-spacing:1px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
margin:2px;
border-left:0px solid #666;
box-shadow:1px 1px 0px #aaa;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.go:hover {
border-left:15px solid #666;
}
.ga {
color:white;
font-family:tt;
font-size:16px;
text-align:center;
display:inline-block;
width:100px;
background:black;
padding:5px;
margin-bottom:2px;
}

</style>

<div style="display:inline-block;background:#000;width:12px;height:280px;position:fixed;top:0px;left:10px;box-shadow:1px 1px 0px #aaa;"></div>
<div style="position:fixed;top:100px;left:20px;">
<div class="ga">Navigation</div><br>
<div class="go" style="display:inline-block; width:55px;"> <a href="LINK">Home</a> </div><br>
<div class="go" style="display:inline-block; width:70px;"> <a href="LINK">TutoBies</a> </div><br>
<div class="go" style="display:inline-block; width:100px;"> <a href="LINK">Link Exchange</a> </div><br>
<div class="go" style="display:inline-block; width:80px;"> <a href="LINK">Fanfiction</a> </div><br>
<div class="go" style="display:inline-block; width:60px;"> <a href="LINK">Twitter</a> </div><br>
<div class="go" style="display:inline-block; width:50px;"> <a href="LINK">Tumblr</a> </div></div>

mana mana bahagian berkenaan korang nak edit , boleh je edit . ikut korang punya citarasa . okay ? kalau nak pakai sila beritahu , kalau nak pakai dekat mana mana skin untuk di freebies or nak re-tutor , WAJIB credit and bagitau dulu . kalau nak pakai dekat blog korang , just komen dekat entry ni sahaja , tak perlu credit :D kbai o/