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>

AMIGOS ( expandir y contraer )

Esta entrada va ha ser un poco especial y sin tema donde encajarlo, porque es especial.
Quiero contaros una gran historia, por lo menos para mí, luego cada uno que piense lo que quiera.
Cuando salió la versión 8 del EXPLORER, vista ya me estaba ofreciendo actualizarlo y así lo hice.
Parecía que todo funcionaba bien, hasta que intentaba ver alguno de vuestros blogs, pues en algunas páginas me daba un error y se empeñaba en cerrarse.(cosa que por cierto ya han solucionado colocando un par de parches ).
Aconsejada por un gran amigo, me descargué FIREFOX 3.5 y aunque no estaba muy suelta con este navegador empecé a trabajar con él, incluso se actualizó 2 veces, hasta llegar a 3.5.2.(hasta aquí todo iba bien).
Encontré un post donde me explicaba como expandir y contraer mis gagets y como tengo un par de ellos que bajan y bajan en las barras laterales y rompen la estética pues les apliqué el código que me ofrecían y conseguí lo que buscaba.
La semana pasada me pedían ayuda con un combo box para crear un código de enlace a DE TODO UN POCO Y UN POCO DE MUCHO, entre las dos lo conseguimos y nos intercambiamos nuestros respectivos enlaces .
Pues cual fué mi sorpresa cuando, Cuchillita que es la propietaria del blog me mandó otro comentario que no podía agregarse a mis seguidores porque no se veían.
Tenía razón yo tampoco los veía con Firefox y sí con Explorer, cosa que le comenté y efectivamente desde Explorer si que pudo agregarse y ella misma me estuvo buscando la solución al problema, sin éxito, pero con mi eterno agradecimiento.
Yo seguía viendo los seguidores de todos los blogs con Firefox, menos el mío.
Enseguida me puse en contacto con el amigo que siempre está cuando lo necesito ,José M de
EL BLOG DE LA INFORMÁTICA, y empezó a enviarme consejos a seguir para solucionarlo, porque él con Firefox si que veía mis seguidores.
Fui probando todo lo que me decía en sus correos y no conseguimos nada y ya desesperados, pensamos incluso en cambiar las plantillas, de los 2 blogs, pero me sugirió que antes de empezar, como última prueba, subiera la última plantilla guardada en mi disco duro y como soy bastante obediente, cada vez que hago un cambio importante en mi plantilla la guardo antes.
Subí la última plantilla que guardé justo antes del cambio de expandir y ya se veían los seguidores, tanto desde mi blog como desde el de Cuchillita.
José M probó un expandir en una plantilla suya y con Firefox yo no podía ver los seguidores.
Le comenté que me había traido un un manual de Firefox de la biblioteca para ojearlo, pero que era de una versión muy antigua, así que iba a desinstalar FIREFOX y volverlo a instalar por si estaba dañado . Esto fué después de robarle una semana de vacaciones de Agosto lo que hizo que se le encendiera la bombilla y encontrara mi problema y la solución, que puede que os afecte a muchos de vosotros también.
La versión de FIREFOX que yo tengo es tan nueva que tiene errores, que por supuesto no tardaran en solucionar y lo mismo le pasa a Cuchillita que tiene la misma versión que yo.
José.M, tiene toda la razón y lo e comprobado en un blog de pruebas, expandiendo y visualizando con un navegador Firefox portable que guardo en una llave USB desde hace tiempo.

CONCLUSIÓN

Cuando comencé con los blog, tuve la duda, entre si crear una web o un blog.
Me decidí por los blogs, porque quería que los demás conocieran mis aficiones y pudieran aconsejarme, cosa que no suele ocurrir con una web,si no es muy espectacular, que no es mi caso.
También quería hacer amigos y eso si que lo conseguí con creces, empezando por José M, Marietta, Cuchillita,Panchito,Ceo y perdonar si me olvido de nombrar alguno, ya que empiezan a ser muchos.
Gracias por estar cuando os necesito.

PHOTOSHOP(Relámpagos)

Lo primero será crear un nuevo documento de 400X173px.
Le aplicamos un degradado lineal de negro a blanco un poco inclinado
y como ya veremos más adelante jugando un poco con la forma de hacer el degradado se convertirá en un modelo de rayo u otro.

Ahora vamos a FILTROS-INTERPRETAR-NUBES DE DIFERENCIA

y esto es lo que vamos a ver de momento.
Para cambiar vamos a IMAGEN-AJUSTES-NIVELES o más rápido CTRL+L
y le cambiamos:

los niveles de entrada y Aceptamos.

Este es un ejemplo más o menos de como quedará,
(si no lo veis igual es porque pertenece a otro rayo)
y ahora tenemos que invertir los colores y para ello vamos a
IMAGEN- AJUSTES-INVERTIR o más rápido CTRL+i

Una vez terminado solo nos queda colorear a nuestro antojo,
para ello IMAGEN-AJUSTES-TONO SATURACIÓN y activamos la casilla COLOREAR.

Estos son distintos modelos creados según la inclinación o la anchura del degradado
que creamos al principio como ya comenté.