How to Create Horizontal menubar in blog

Look at sample horizontal menu bar above,which will navigate to specific pages when you Click on it.
Most of the blogger would like to add them at their Blog. Because it helps to navigate to other blog posts or website you wish. For this reason i gonna publish  a sample Horizontal menu code here .

You may get may such scripts in web.Just Google it.Styledmenus is one of the best tool providing stylish CSS enabled Horizontal Menu bar.
  1. Go to Page Elements from Deisgn and Slect  "HTML/JAVASCRIPT" Gadget from the List of gadgets..
  2.  Copy down the code below and Cusomize it.After Save the Gadget and Save the Gadget

<style type="text/css">
.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;
<div class="underlinemenu">
 <ul> <li>
<a href="">Home</a></li>
<li><a href="">My Tumblr</a></li>
<li><a href="">Twitter</a></li>
<li><a href="">Official blogger Help Forum</a></li> 
</ul> </div>

  • You should Change the Red colored code with website URL, that you wish to navigate when it get click.
  • Blue Color represents the Names displayed in Horizontal Menu Bar.You can customize according to you.
Look,How simple as that!

By : Sooji


  1. hi! can't figure out where to exactly paste this. please help!

  2. You can paste this code on html/script gadget.
    -Go to layout
    -Click on 'Add a gadget'
    -Select "HTML/SCRIPT" Gadget
    -Paste the above code on it.
    -Hit on save.

    Thanks for your compliment

  3. very nice and very cooooooooooooool!!

  4. hello haseeb, how if i want to change the twitter or tumblr to another page?

    i mean like 'How to order'and 'contact' page?
    i dont know how to create the page and then add it to be on a tab together with the other horizontal menus.

    i did found the
    Layout-->design-->add gadget-->pages

    but it only add 1 page for home and not pages as it claim inside the brief descriptiob under the add gadget details.

  5. omg thnx for the help...i hv been getting mad about this stufff...but it is so easy,,,but tell me how to connect my exixting pages with these tabs

  6. thnx alot man i v been lookingfor this stuff ..GOD beless you :)


Type your Comment Here...!