A Professional Good Looking Horizontal Menu Bar In Google Style

My previous article, that relates to customize blogger template with google button, engage me to make a good looking professional horizontal navigation menu.The idea to make this cool horizontal menu is taken from Google designing. You can see similar menu at top most position of Google homepage which have a beautiful look. This menu bar uses simple CSS property and can be integrated to many blogging platforms like Blogger, Wordpress, Joomla etc.

How To Add Google Horizontal Menu To Blog

Why Add Google Horizontal Menu

This horizontal menu bar have following advantages

• Reflect the Google designing in your blog.
• Take readers attention
• Doesn't effect page loading time
• Easily integrable to different platforms
• Give a professional look to blog

How To Add Horizontal Menu

1. Go to Design /  Edit HTML in blogger dashboard.
2. Click Expand Widget Templates and take backup of your template ( more info ).
3. Search following piece of code in blogger template or Go to Template Designer /  Advanced /  Add CSS and paste the code given in step 4.

]]></b:skin>

4. Paste the following code just above it.

/* code written by http://internetricks4u.blogspot.in/ */
#abtbox {
    font-family: Arial,sans-serif;
    font-size: 13px;
    font-size-adjust: none;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 27px;
    height: 30px;
    background-color: #222222;
    margin-top:0px;
    width: 100%;
    }

#abtbox ul
   { display: block;
    text-decoration:none;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
   -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: 0;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: -moz-use-text-color;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: none;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 0;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: -moz-use-text-color;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: none;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 0;
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: 0;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
     }

#abtbox ul li
    {text-decoration:none;
     -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: 0;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: -moz-use-text-color;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: none;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 0;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: -moz-use-text-color;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: none;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 0;
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: 0;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none; 
     line-height: 27px;
    display: inline-block;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    position: relative;
    vertical-align: top;
    margin-left:10px;
   
   
    }
#abtbox ul li a
    {
    color:#BBBBBB;
    font-weight: bold;
    -moz-text-blink: none !important;
    -moz-text-decoration-color: -moz-use-text-color !important;
    -moz-text-decoration-line: none !important;
    -moz-text-decoration-style: solid !important;
     display: block; 
     text-decoration:none; 
     }
#abtbox ul li a:hover, #abtbox ul li a:active
      {   
      color: #FFFFFF;
      }
/* code written by http://internetricks4u.blogspot.in/ */

5. Now search for following piece of code in BT

<body>

OR

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

6. And add following code just below it.

<div id="abtbox">
<ul>
<li><a href="http://google.com">+Shahbaz</a></li>
 <li><a href="http://google.com">Search</a></li>
<li><a href="http://google.com">Images</a></li>
</ul>
</div>

Note

• Replace the URL ( http://google.com ) written in red color with URL that you want to use.
• Don't write ( www ) before the domain name.
• Change +Shahbaz with name that you want to display as a menu.

This CSS code given above is originally created by Shahabz Malik, the author and founder of this blog. You are free to use this tricks on your blog :))

More Amazing Stuff's

• Google Search Bar For Blog
• How To Modify Feedburner Recent Post Widget