A Professional Good Looking Horizontal Menu Bar In Google Style

My recent expedition with the ultimate power of Cascading Style Sheet(CSS) resulted in a good looking professional horizontal navigation menu bar. The most amazing thing about CSS is that it is super easy and you can build an awesome horizontal navigation menu bar using only CSS. Isn’t it amazing that you don’t need any programming knowledge for that?

How To Add Google Horizontal Menu To Blog?

Why Add Google Horizontal Menu?

How To Add Horizontal Menu?

Is your mind racing through all these questions? Are you tired of typing in google search typing these search queries? Don’t worry, this article provides you with the code to design a google style horizontal menu bar.

The idea to make this cool horizontal navigation menu bar is taken from Google designing. You can see a similar horizontal menu bar at the topmost position of Google homepage which has a beautiful look. Further, this menu bar uses simple CSS property and can be integrated into many blogging platforms like Blogger, WordPress, Joomla etc.

This horizontal menu bar has the 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: Top 6 Best WordPress Image Optimization Plugins Compared

 

Steps to Make Google Style Horizontal Menu Bar

  1. Go to Design /  Edit HTML in blogger dashboard.
  2. Click Expand Widget Templates and take backup of your template.
  3. Search the 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://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 */
Now search for following the piece of code in BT
<body>

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

And add 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:

  1. Replace the URL ( http://google.com ) written in red color with URL that you want to use.
  2. In addition to this, don’t write ( www ) before the domain name.
  3. Change +Altrenews with the name that you want to display as a menu.

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

Leave a Reply