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
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>
#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>
<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