Floating Vertical Navigation Menu Using jQuery For Blogger Blogspot ~ Log-Tutorial

STEP #1 Log in to Blogger, go to Layout

Add a Gadget of HTML/JavaScript type.

Then add this code in to it:.

<div id="floatMenu" style="top: 350px; ">   <ul class="menu1">      <li><a href="#" onclick="return false;"> Home </a></li>   </ul>   <ul class="menu2">     <li><a href="#" onclick="return false;"> Table of content </a></li>     <li><a href="#" onclick="return false;"> Exam </a></li>     <li><a href="#" onclick="return false;"> Wiki </a></li>    </ul>   <ul class="menu3">     <li><a href="#" onclick="return false;"> Technical support </a></li>   </ul> </div>

Now click Save

Instructions To Follow:
STEP #2
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #3
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}
#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}

STEP #4
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately after it, paste this code:

<script language='javascript' src='http://files-teckzest.bravehost.com/jquery.js'></script>
<script language='javascript' src='http://files-teckzest.bravehost.com/jquery.dimensions.js'></script>
<script language='javascript'>
$(document).ready(function(){
// code will go here
});

$(document).ready(function(){
$(window).scroll(function () {
// code will go here
});
});
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
// code will go here
});
});
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});

</script>