Tuesday 27 October 2009

Create Additional Horizontal Menu bar just using Html/script gadget

If u would like to add A Horizontal menu bar to your blogger,without indulging,in any of the fuss of editing css,html of your template.Then this menu bar Is the best For your blogger.If your desire is more i recommend you to try  cssmenubuilder

Demo:The menu bar will Look like the image below.

Characteristics
  • Can be easily added
  • Can be customized to change its color
  • Hovering effect present.
  • Any number of links can be added.



<style type="text/css">

/*URL: http://www.myfundoo-blog.blogspot.com */
.underlinemenu{ font-weight: bold; width: 100%;

.underlinemenu ul{ padding: 6px 0 7px 0;
/*6px should equal top padding of "ul li a" below, 7px should equal bottom padding   bottom border of "ul li a" below*/ margin: 0; text-align: right; //set value to "left", "center", or "right"*/ } .underlinemenu ul li{ display: inline; } .underlinemenu ul li a{ color: #494949; padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/ margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; border-bottom: 3px solid gray; /*bottom border is 3px*/ } .underlinemenu ul li a:hover, .underlinemenu ul li a.selected{ border-bottom-color: black; } </style> <div class="underlinemenu"> <ul> <li><a href="http://myfundoo-blog.blogspot.com/">Home</a></li> <li><a href="http://myfundoo-blog.blogspot.com/search/label/templates">Free Blog templates</a></li> <li><a href="http://myfundoo-blog.blogspot.com/">Widget</a></li> <li><a href="http://myfundoo-blog.blogspot.com/search/label/blogging%20tricks">Tricks and Hack</a></li> <li><a href="http://myfundoo-blog.blogspot.com/search/label/Simply%20Google">Simply Google</a></li>  </ul> </div>
<a href "http://myfundoo-blog.blogspot.com/"><h6>Myfundoo-blog</h6></a>
 All You have to do is:
1.copy the above code.
2.Go to your Dashboard then page element.Then click on add a gadget
3.select Html/javascript
4.paste the above copied code and place It just below your header
click save and view changes

No comments:

Post a Comment