Menu con buscador incluido

Antes que nada nunca olvidar, guardar la plantilla, antes de hacer cualquier cambio.

En la parte de "Edición Html" de nuestra plantilla sin expandir las plantillas de artilugios, localizamos la etiqueta ]]> y justo antes pegamos este código CSS:

( presionar la tecla control + F  y os saldrá un buscador)


ENLACE:

/*-- CSS Menu Superior-- */
#navtop { background: #dcdcdc ; height: 26px; width: 100%; margin: 0px auto 24px auto; font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif; font-variant: small-caps; font-weight: bold; color:#737374; font-size: 14px; border-bottom: 1px solid #afafaf;}
.nav {width: 950px; margin: auto;}

ul.navtop { padding: 0px;}
ul.navtop li { list-style: none; display: inline;}
ul.navtop li a { background: transparent; color:#737374; display: block; float: left; padding: 4px 7px 3px 7px; margin-right: 3px; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf;}
ul.navtop li a:visited { text-decoration: none; color: #737374;}
ul.navtop li a:hover { background: #e1477d; color: #ffffff; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; }
ul.navtop li a:active { text-decoration: none; color: #737374; }
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: 0px; padding: 0px;}
input#s {color: #e1477d; width: 283px; background:#fcfcfc; padding: 2px 4px 2px 4px; border: 1px solid #afafaf;}
input#searchsubmit{ background:#afafaf; color:#fff; font-size:13px; padding: 2px;}


(Aquí, es donde podéis cambiar los colores, ancho, tipo de letra,etc del menú.)

Colocaremos ahora el código necesario para que se muestre la "barra menú" en la parte superior del blog y lo haremos justo sobre

y si en esa posición el resultado no es el esperado (dependerá del diseño de la plantilla) lo colocaremos después de donde debería de funcionar:

<!-- Menu Superior -->

<div id='navtop'>

<div class='nav'>

<ul class='navtop'>

<li><a href='http://elescaparatederosa.blogspot.com'>Inicio</a></li>

<li><a href='http://draft.blogger.com/profile/06743611108067453905' title='Perfil Blogger'>Sobre mi</a></li>

<li><a href='http://feeds.feedburner.com/blogspot/hnBy' title='Suscribe Feed'>Suscribe Feed</a></li>

<li><a href='mailto:lejaniaimposible@hotmail.com' title='Contactame'>Contacto</a></li>



<li><a href='http://elescaparatederosa.blogspot.com/search/label/?max-results=999' title='Ver todas las entradas'>Ver todas las entradas</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>

</div>

</div>

<!-- Fin Menu superior -->

Los datos que están en negrita, tendréis que copiarlos, por los vuestros propios.


-------------------------------------

Si quereís eliminar alguno os pongo un ejemplo desde donde borrar hasta terminar, para que siga funcionando el código:

<li><a href="http://www.blogger.com/%3Cb%3Ehttp://elescaparatederosa.blogspot.com/search/label/?max-results=999%3C/b%3E" title="Ver todas<b> </b>las entradas">Ver todas las entradas</a></li>

Lo mismo si queréis cambiar, este de arriba, por ejemplo para enlazar vuestro Flickr :

<li><a href="dirección flickr" title=" <b>Flickr</b> <b>Flickr</b> </a></li>

----------------------------------------------------------------------

Si no lo queréis arriba de todo, buscáis el DIV , que os interesa.

Darle a vista prévia, antes de acceptar los cambios.

Fuente : El escaparate de Rosa