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 a similar menu at a topmost position of Google homepage which has a beautiful look. This menu bar uses simple CSS property and can be integrated into 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 has following advantages

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

Also Read: Increase Blog Security By Changing Login Information

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.
  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>
  1. Paste the following code just above it.
    /* code written by http://altrenews.com/ */
    #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://Altrenews.com */
  1. Now search for following the piece of code in BT
<body>

OR

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

  1. And adds following code just below it.

 

<div id="abtbox">
<ul>
<li><a href="http://google.com">+Altrenews</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 +Altrenews with the name that you want to display as a menu.

Also Read: Check blog Backlinks With Google Analytics Tool

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

Leave a Reply

error: Content is protected !!