MENÚ Horizontal con buscador

Voy a explicar como he colocado un menú horizontal en mi plantilla de Blogger.
El código principal lo  encontré en EL ESCAPARATE DE ROSA, pero como le hice cambios
porque yo no la quería encima del titulo, sino debajo, voy a explicar mis pasos.

En esta foto podéis ver la barra con el buscador incorporado debajo del titulo de mi blog.
En primer lugar abrimos DISEÑO-Edición de HTML  y os aconsejo que siempre, antes de hacer cualquier cambio a vuestra plantilla guardéis una copia. Lo digo por experiencia.
(fue mi salvación)


No activéis la casilla de Expandir plantilla de artilugios.
Este es el código que tenéis que copiar y pegar:
*-- CSS Menu Superior-- */
#navtop { background: #760839 ; height: 26px; width: 100%; margin: 5px auto 5px auto; font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif; font-variant: small-caps; font-weight: bold; color:#ffffff; font-size: 16px; border-bottom: 1px solid #2b0315
;}
.nav {width: 990px; margin: auto;}
ul.navtop { padding: px;}
ul.navtop li { list-style: none; display: inline;}
ul.navtop li a { background: transparent; color:#ffffff; display: block; float: left; padding: 4px 7px 3px 7px; margin-right: 3px; text-decoration: none; border-right: 1px solid #cb567d; border-left: 1px solid #cb567d;}
ul.navtop li a:visited { text-decoration: none; color: #ffffff;}
ul.navtop li a:hover { background: #e1477d; color: #7ec7dc; text-decoration: none; border-right: 1px solid #cb567d; border-left: 1px solid #cb567d; }
ul.navtop li a:active { text-decoration: none; color: #ffffff; }
ul.navtop li a:focus { color: #41a5c3; outline: 1px dotted #e1477d; }
ul.navtop li.current_page_item a { text-decoration:none; color:#fff; background: #E1477D ; }
ul.navtop li ul { float:left; margin:0; padding:0; }
#searchcont { width: 100%; margin: 12px auto 12px auto; }
#searchform { height:26px; line-height:25px; float:right; margin: 1px; padding: 1px;}
input#s {color: #e1477d; width: 283px; background:#f4ed26; padding: 2px 4px 2px 4px; border: 1px solid #cb567d;}
input#searchsubmit{ background:#ffffff; color:#fff; font-size:13px; padding: 2px;}
Justo antes de

En esta parte del código es donde cambiaremos los colores de fondo, del
texto, el tamaño de este y el tipo de fuente.Se trata de ir probando y adaptándolo a nuestro blog.
Ahora copiaremos  el siguiente código;
<!-- Menu Superior -->
<div id='navtop'>
<div class='nav'>
  <ul class='navtop'>
  <li><a href='http://mirincon-misaani.blogspot.com'>Inicio</a></li>
<li><a href='http://mirincon-misaani.blogspot.com/2009/06/entradas.html'>Todas mis entradas</a></li>
<li><a href='http://www.blogger.com/profile/00861632899446696417'>Mis datos personales</a></li>
<li><a href='mailto:misaani@hotmail.com'>Contacto</a></li>
<li><a href='http://www.blogger.com/home'>Blogger</a></li>
  </ul>
<form action='/search' id='searchform' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form>
encima de



Fijaros bien en el sitio donde lo colocáis, pues es la clave para que aparezca justo debajo del título.
Estos son mis enlaces , que tendréis que sustituirlos por los vuestros.
Si queréis añadir algún otro enlace , copias el código:
<li><a href=’URL DE ENLACE’>TEXTO DEL BOTÓN</a></li>