How To Add Horizontal Menu Bar in Google Style for Blogger Blog

Horizental Menubar like Google

In this article i will discuses about blog menu bar
you have seen many blogger use the horizontal
menu bar in this article i help you to make your
blog menu bar smiler to Google in good looking
To add Horizontal menu bar in your blog follow
these steps

 How To Add this Widget

1..Log in you account

2..Click on the dashboard

3..Select template

4..Click on the edit HTML

5..Now Find  ]]></b:skin> To find press CTR+F

6..Now Past the Following code just above (before) ]]></b:skin>

  

/* code written by http://www.nafisflahi.blogspot.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:#9ACD32;
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: #D2B48C;
}
/* code written by http://www.nafisflahi.blogspot.com/ */

7..Now find   <body>  and past the following code above   <body>

<div id=”abtbox”>
<ul>
<li><a href=”http://Yourpage link.com”>+Nafis</a></li>
<li><a href=”http://your page link.com”>Search</a></li>
<li><a href=”http://your page link.com”>Contact me</a></li>
</ul>
</div>

8..Save Your tamplate
You are done

Leave a Reply