Menu en la parte superior con buscador

24 abr. 2016

Hola ¡mis seres mágicos! espero estén muy bien! Yo he estado aún atareada, pero más tranquila, he tenido pensada esta entrada desde hace algún tiempo, por lo cual ahora es el mejor momento de llevarles más tutoriales de cómo hacer sus blogs más bonito.



¿Han visto la barra de menú que tengo en mi blog? Varias personas me han preguntado:
¿Cómo pones ese menú? y la verdad es muy fácil, todo está en saber posicionar y manejar un conocimiento básico en html.

Mi barra como han visto tiene varias opciones y dentro de las mismas tienen otras, esta permite al lector una búsqueda más precisa en los temas a tratar en tu blog, sin embargo he agregado el buscador por si alguien está interesado en una entrada "especifica" en tu blog, yo de momento no la tengo ya que no cuento con más de 50 entradas. Cabe destacar que la principal función de este menú es a base de links a url especificas o etiquetas, por lo cual si no manejas eso en tu blog no podrás gozar plenamente de las opciones.

Para dar inicio al tutorial te recomiendo ampliamente que descargues la plantilla de tu blog y la tengas reservada, o que hagas el tutorial en algún blog de pruebas y ya que hayas tenido listo todo, puedas pasarlo tranquilamente a tu blog principal.

Antes que nada nos vamos a la configuración de tu blog Para ello vamos a Plantilla > Editar HTML de allí con ctrl+f (dentro del recuadro de la plantilla html) buscamos esto:

 photo Sin tiacutetulo-0_zpsd8iqqyvh.png
Copia el código haciendo click aqui

Debajo de este código pegaremos lo siguiente:
 photo codigo1_zpsxcrwc7pw.png


Copia el código haciendo click aquí

PARA PERSONALIZAR NUESTRO MENÚ

Lo que dice URL  es la dirección que quieres que vaya tu menú (ejemplo la etiqueta que desees agregar) Sería algo así: nombredemiblog.blogspot.com/search/label/Etiqueta

Lo que dice NOMBRE DE PESTAÑA pues sería lo que aparecería en nuestro blog y NOMBRE DE SUB PESTAÑA seria la que aparecería al pasar el mouse por el NOMBRE DE PESTAÑA, lo que dice NOMBRE DE PESTAÑA UNICA, es la pestaña sin sub pestañas.

Si deseas agregar una pestaña sin sub pestañas agrega lo siguiente:
 photo Sin tiacutetulo-2_zpspceflulc.png
Si deseas otra sub pestaña agrega otra de esta forma:

 photo codigo2_zpsv3soqxh9.png

Puedes colocar o quitar las subpestañas que desees lo importante acá es que cada una de ellas termine en photo Sin tiacutetulo-4_zpsmsbpjw8y.pngy que el final de cada sección del menú sea photo Sin tiacutetulo-5_zpsmewwrj5v.png

No obstante si usamos una barra de menú con buscador debemos tener en cuenta que no podemos agregar más de 8 opciones de menú porque el buscador quedará por debajo de la barra, debido a la gran cantidad de pestañas del menú. Recomiendo que organices que sección quedará como pestaña y que quedará como sub pestaña, por ejemplo:

Si tenemos en nuestro blog Nail Art, Make up, Skincare en diferentes opciones del menú podemos colocarlo todo bajo la pestaña de Belleza entonces allí podrás englobar todo lo referente al tema del cuidado y belleza.

Si no deseas que el buscador esté integrado a la barra deja el menú pon la ultima terminación de la barra con
  photo Sin tiacutetulo-6_zps1kaab8rw.png
AÑADIENDO ESTILO AL MENÚ

Dada a esta explicación vamos a guardar y de allí nos iremos a darle forma a nuestro menú
para ello vamos a Plantilla> Personalizar>Avanzado >Añadir CSS y pegamos el código:

 photo Sin tiacutetulo-7_zpsoqkgueqp.png

Copia el código haciendo click aquí

Una vez colocado el código verás en la vista predeterminada como se va viendo en el blog, para obtener los códigos de colores puedes ir a una tabla de colores html o tu mismo con cualquier programa que maneje carta de colores buscar el indicado, siempre ten en cuenta que ante todo código de color debe permanecer un "#" por ejemplo el blanco: #ffffff

PARA PERSONALIZAR NUESTRO BUSCADOR

Si no quitaste el buscador de tu menú y quieres que sea más personalizado en tamaño deberás tener en cuenta lo siguiente:

Código HTML de nuestro buscador:
 photo Sin tiacutetulo-8_zps3yszrzmu.png

Lo que dice "BUSCA AQUÍ" lo puedes cambiar a lo que tú quieres que diga

AÑADIENDO ESTILO AL BUSCADOR

Para ello vamos a Plantilla> Personalizar>Avanzado >Añadir CSS y pegamos el código:

 photo Sin tiacutetulo-9_zpstflj8fgq.png

Copia el código haciendo click aquí

Importante: Si nosotros queremos colocar el buscador hacia la derecha o izquierda deberás modificar los márgenes descritos en el código ya sea con valores negativos por ejemplo (-6 px). El margen tiene por código "margin" Si desean ver el resultado final en mi blog de pruebas podrán ver como queda el menú

De igual modo tienen alguna duda, comenten con confianza yo les ayudaré, y si necesitan saber alguna otra cosa también. ¡Espero les sea de mucha utilidad! y disculpen si la entrada es un poco larga, quise tratar de explicar todo a detalle. Esta entrada fue inspirada en el blog de Miss Lavanda.


¡Nos leemos en la próxima!



¡Esto también te gustará!

3 comentarios:

  1. Gracias por el tutoriales linda ;__; yo ya quiero cambiar el diseño de mi Blog pero soy realmente mala para ello ;n;.

    Saludos linda

    ResponderEliminar
  2. Yo fui una de las que pregunto es que es verdaderamente lindo. Gracias por compartirlo con estas almas que se nos dificulta html xD💟💞

    ResponderEliminar
  3. Yo fui una de las que pregunto es que es verdaderamente lindo. Gracias por compartirlo con estas almas que se nos dificulta html xD💟💞

    ResponderEliminar