This is a very beautifull tricks for your blog visitor go any page of your blog he saw this menu always this is depend on you what you want to show in here i give you how to show this menu
Go to layout>add a gadget
select HTML java script
Paste Following Code Into content And
All highlght www.Onlinehelperblog.blogspot.com Replace with your own link and save it.....
How to Add the Fixed Navigation Menu
Go to Blogger account
Template>costumize>Advance>add css
Paste following Code into And save template
/* CSS Style for Horizontal Menu - info @ http://www.onlinehelperblog.blogspot.com*/ #hor { list-style:none; padding:0; margin:0; } #hor li { float:left; padding:5px; } #hor a { display:block; height: 12px; text-indent:-999em; } #hor a.home { width:46px; background:url(vHome.gif) no-repeat 0 0; } #hor a.download { width:94px; background:url(vDownload.gif) no-repeat 0 0; } #hor a.contact { width:74px; background:url(vContact.gif) no-repeat 0 0; } /* CSS Style for Vertical Menu */ #ver { list-style:none; padding:0; margin:0; } #ver li { padding:2px; } #ver li a { display:block; height:12px; text-indent:-999em; } #ver a.home { width:47px; background:url(hHome.gif) no-repeat 0 0; } #ver a.download { width:95px; background:url(hDownload.gif) no-repeat 0 0; } #ver a.contact { width:74px; background:url(hContact.gif) no-repeat 0 0; } .clear { clear:both; } *{ /* A universal CSS reset */ margin:0; padding:0; } #navigationMenu body{ font-size:14px; color:#666; background:#111 no-repeat; /* CSS3 Radial Gradients */ background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); font-family:Arial, Helvetica, sans-serif; } #navigationMenu li{ list-style:none; height:39px; padding:2px; width:40px; } #navigationMenu span{ /* Container properties */ width:0; left:38px; padding:0; position:absolute; overflow:hidden; /* Text properties */ font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; /* CSS3 Transition: */ -webkit-transition: 0.25s; /* Future proofing (these do not work yet): */ -moz-transition: 0.25s; transition: 0.25s; } #navigationMenu a{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLwYXahhgfzrK98vuwG8PrKuterVbzzaFTnGFYJlRj1uL_qVUCgS9SzxFum768BF4Ki6UScqd9ejITh7fa6IxaHsqIPbsAmZWuzsylbzAXhGsSOToZMgusQMORmzug-CTqhr2x-WiZ4M/s1600/navigation.jpg') no-repeat; height:39px; width:38px; display:block; position:relative; } /* General hover styles */ #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } #navigationMenu a:hover{ text-decoration:none; /* CSS outer glow with the box-shadow property */ -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5; } /* Green Button */ #navigationMenu .home { background-position:0 0;} #navigationMenu .home:hover { background-position:0 -39px;} #navigationMenu .home span{ background-color:#7da315; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31; } /* Blue Button */ #navigationMenu .about { background-position:-38px 0;} #navigationMenu .about:hover { background-position:-38px -39px;} #navigationMenu .about span{ background-color:#1e8bb4; color:#223a44; text-shadow:1px 1px 0 #44a8d0; } /* Orange Button */ #navigationMenu .services { background-position:-76px 0;} #navigationMenu .services:hover { background-position:-76px -39px;} #navigationMenu .services span{ background-color:#c86c1f; color:#5a3517; text-shadow:1px 1px 0 #d28344; } /* Yellow Button */ #navigationMenu .portfolio { background-position:-114px 0;} #navigationMenu .portfolio:hover{ background-position:-114px -39px;} #navigationMenu .portfolio span{ background-color:#d0a525; color:#604e18; text-shadow:1px 1px 0 #d8b54b; } /* Purple Button */ #navigationMenu .contact { background-position:-152px 0;} #navigationMenu .contact:hover { background-position:-152px -39px;} #navigationMenu .contact span{ background-color:#af1e83; color:#460f35; text-shadow:1px 1px 0 #d244a6; } /*End menu css - info @ http://www.onlinehelperblog.blogspot.com */
Go to layout>add a gadget
select HTML java script
Paste Following Code Into content And
<div style='position: fixed; top: 40%; left: 0%;'/> <ul id="navigationMenu"> <li> <a class="Home" href="http://www.Onlinehelperblog.blogspot.com"> <span>Home</span> </a> </li> <li> <a class="about" href="http://www.Onlinehelperblog.blogspot.com/p/about-spice-up-your-blog.html"> <span>About</span> </a> </li> <li> <a class="services" href="http://www.Onlinehelperblog.blogspot.com/p/hire-us_08.html"> <span>Services</span> </a> </li> <li> <a class="portfolio" href="http://www.Onlinehelperblog.blogspot.com/"> <span>Portfolio</span> </a> </li> <li> <a class="contact" href="http://www.Onlinehelperblog.blogspot.com/2009/09/contact-us.html"> <span>Contact us</span> </a> </li> </ul> </div><a href="http://www.Onlinehelperblog.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>
All highlght www.Onlinehelperblog.blogspot.com Replace with your own link and save it.....