Creating a Horizontal Menu on blogger

Good Afternoon my friend all on this happy day of the week that I wanted to share the Making "Horizontal Menu on the blogger"Actually a lot of tutorials on how to create a favorable internet hisontal menu on blogger, but it would not hurt if I come back to share the tutorial
ok we just into the tutorial Creating a Horizontal Menu on blogger

    * Log into your blogger account.
    * Choose Layout -> Edit HTML -> check "Expand Widget Templte". Before performing the edit template, you should keep your existing first by clicking Download Full Template. Then save the hard drive or other storage media, so when things happen that do not want you already have back-up to restore it as before.
    * Find the code code]]> </ b: skin> and Copy-Paste (copy and paste) the following code in above.If difficult to find, try and press the F3 key on the keyboard. It will appear below the search toolbar menu browser (Firefox), so you just enter the words you want searched.

 / * navbar
 ================== * /

 # bg_nav {background: # ffffff;width: 850px;height: 29px;font-size: 11px;font-family: Arial, Tahoma, Verdana;color: # 000000;font-weight: bold;margin: 0px auto 0px;padding: 0px;border-top: 1px solid # 000000;border-bottom: 1px solid # ffffff;overflow: hidden;
 }
 # bg_nav a, # bg_nav a: visited {color: # 000000;font-size: 11px;text-decoration: none;text-transform: uppercase;padding: 0px 0px 0px 3px;
 }
 # bg_nav a: hover {color: # 000000;text-decoration: underline;padding: 0px 0px 0px 3px;
 }

 # navleft {width: 500px;float: left;margin: 0px;padding: 0px;
 }# navright {width: 220px;font-size: 11px;float: right;margin: 0px;padding: 3px 0px 0px 5px;
 }
 # navright a img {border: none;margin: 0px;padding: 3px 0px 0px 5px;
 }

 # nav {
 margin: 0px;
 padding: 0px;
 list-style: none;
 }
 # nav ul {margin: 0px;padding: 0px;list-style: none;
 }
 # nav a, # nav a: visited {background: # ffffff;color: # 000000;display: block;font-weight: bold;margin: 0px;padding: 8px 8px 15px 15px;border-left: 1px solid # ffffff;
 }# nav a: hover {background: # c06000;color: # 000000;margin: 0px;padding: 8px 8px 15px 15px;
 text-decoration: none;
 }
# nav li {
 float: left;
 margin: 0px;
 padding: 0px;
 }
 # nav li li {
 float: left;
 margin: 0px;
 padding: 0px;width: 150px;}
 # nav li li a, # nav li li a: link, # nav li li a: visited {background: # ffffff;width: 160px;float: none;margin: 0px;padding: 30px 7px 7px 10px;border-bottom: 1px solid # ffffff;border-left: 1px solid # ffffff;border-right: 1px solid # ffffff;}
 # nav li li a: hover, # nav li li a: active {background: # c06000;padding: 30px 7px 7px 10px;
 }
# nav li ul {
 position: absolute;
 width: 10em;
 left:-999em;
 }

 # nav li: hover ul {
 left: auto;
 display: block;}
 # nav li: hover ul, # nav ul {li.sfhover
 left: auto;
 }


* The code css in red above customize your blog.
* Then find the return code is as below.
<div id='header-wrapper'><b: section class = 'header' id = 'header' maxwidgets = '1 'showaddelement = 'no'><b: widget id = 'header1' locked = 'true' title = 'test(header) 'type =' header '/>and so on ...</ h: section></ hiv>

Put the following code just below (header) 'type =' header '/>

<div id='bg_nav'>

 <div id='navleft'>
 <div id='nav'>
 <ul>
 <a href='http://address_youre_blog.blogspot.com/'> home </ a> </ li><a href='http://the intended_link'> Add Link </ a> </ li><a href='http://the intended_link'> Add Link </ a> </ li><a href='http://the intended_link'> Add Link </ a> </ li><a href='http://the intended_link'> Add Link </ a> </ li>
 </ ul></ div>
 </ div>

 <div id='navright'>

 <form action='http://address_youre_blog.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id = 's' name = 'q' type = 'text' value ='' /> <input id='searchsubmit' type='submit' value='Search'/>
 </ form>

 </ div>

 </ div> <! - end bg_nav ->

    * Then save your template.
I hope to help and bring benefits to us all
Regards .....