Cómo hacer Menú Horizontal para Blogger y otros (Varios estilos)

Menú Horizontal en Blogger (Formato plano, botones con sombra, redondeados + buscador integrado)

En Blogger y otras plataformas, en ocasiones deseamos facilitar enlaces mediante algún menú, pero encontramos ciertas limitaciones.  En WordPress, el asunto es diferente y además existen varios plugins que mejoran lo definido por defecto.

Si deseas un menú y si tu sitio no va de la mano con WordPress, entonces el contenido de esta entrada te conviene.

De tal manera, si necesitas ofrecer a los visitantes de tu web, enlaces categorizando la opción a elegir, te puede servir mucho un menú horizontal que contenga submenús relacionados con la opción principal.  Además, es mucho mejor, si se ha adicionado una muy útil caja de búsqueda, con un formato tal como se muestra en la imagen.

Los botones del menú, son de tamaño variable de acuerdo al texto que contienen.

MANOS A LA OBRA

Menú horizontal en Blogger u otros (acciones)

La disposición de este menú en tu sitio, se ha predefinido y se basa en dos acciones:

1. Código CSS para definir el estilo.
2. Código HTML que necesitas donde deseas que aparezca el menú.

Lógicamente, a esto se suma la acción tuya, editando el código CSS y el HTML según sea tu requerimiento.

1. Código CSS para definir el estilo del menú

1.1 Copia el código CSS

Copia unos de los estilos que encontrarás en esta entrada: Estilos predefinidos – Menú Horizontal para Blogger y otros.  (Después regresa para continuar con los pasos.)

Recuerda que puedes editar el CSS, de acuerdo a los colores y fuentes de tu sitio.

1.2 Inserta el código CSS

Si deseas insertar el CSS en una plataforma No Blogger, deberás insertarlo antes de la etiqueta </head> y entre las etiquetas  <style >  y  </style>, por ejemplo:

<style type=”text/css”>
…Aquí pegas código CSS…
</style>
</head>

En Blogger, también puedes hacerlo, pero para que no toques la plantilla, el código CSS puedes insertarlo tal como te lo muestro, utilizando las opciones:

1. Tema (o Diseño)
2. Personalizar (o Diseñador de temas)
3. Opciones avanzadas
4. Agregar CSS (aparece como última opción en el menú desplegable que comienza con texto de la página)

Menú horizontal para Blogger y otros

2. Código HTML que necesitas donde deseas que aparezca el menú.

Luego de lo anterior, según el lugar donde requieras el menú, solo quedaría que lo estructures con las opciones que necesites.  Para esto, entrando en modo de edición HTML, identifica el lugar donde colocarás el menú.

Inserta este código donde desees que aparezca el menú:

 <div id="CssMenu1" style="position:relative;width:100%;height:38px;z-index:999;">
<ul>
<li class="firstmain"><a href="#" target="_self">Item 1</a>
</li>

<li><a class="withsubmenu" href="#" target="_self">Item 2</a>
<ul>
<li class="firstitem"><a href="#" target="_self">Item2-1</a>
</li>
<li class="lastitem"><a href="#" target="_self">Item2-2</a>
</li>
</ul>
</li>

<li><a class="withsubmenu" href="#" target="_self">Item 3</a>
<ul>
<li class="firstitem"><a href="#" target="_self">Item3-1</a>
</li>
<li><a href="#" target="_self">Item3-2</a>
</li>
<li class="lastitem"><a href="#" target="_self">Item3-3</a>
</li>
</ul>
</li>

<li><a class="withsubmenu" href="#" target="_self">Item 4</a>
<ul>
<li class="firstitem"><a href="#" target="_self">Item4-1</a>
</li>
<li><a href="#" target="_self">Item4-2</a>
</li>
<li><a href="#" target="_self">Item4-3</a>
</li>
<li class="lastitem"><a class="withsubmenu" href="#" target="_self">Item4-4</a>
<ul>
<li class="firstitem"><a href="#" target="_self">Item4-4-1</a>
</li>
<li><a href="#" target="_self">Item4-4-2</a>
</li>
<li><a href="#" target="_self">Item4-4-3</a>
</li>
<li class="lastitem"><a href="#" target="_self">Item4-4-4</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

<!-- Buscador -->
<div style='float:right'>
<form align="right" action='/search' id='search' method='get' name='searchForm' style='display:inline'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' size='26' type='text' value='Buscar...'/></form></div>

</div>

Como te darás cuenta, este código se ha segmentado con el fin de ofrecerte una mejor visualización de la estructura.

En este punto, ya podrías ir visualizando como se presenta el menú horizontal según el estilo que escogiste.  No te asombres si no lo ves bien en la cabecera de Blogger, más abajo hay un detalle.

Imagen  ejemplo según el estilo escogido (Formato plano – Tono celeste)

Editando las opciones del menú y el submenú

Ahora, solo bastará que añadas o elimines los vínculos, los ítems y si deseas puedes modificar o eliminar el target.

Tomaremos como ejemplo el segmento del Item4-4 (en la imagen es el de la flechita).

<li class="lastitem"><a class="withsubmenu" href="#" target="_self">Item4-4</a>
<ul>
<li class="firstitem"><a href="#" target="_self">Item4-4-1</a>
</li>
<li><a href="#" target="_self">Item4-4-2</a>
</li>
<li><a href="#" target="_self">Item4-4-3</a>
</li>
<li class="lastitem"><a href="#" target="_self">Item4-4-4</a>
</li>
</ul>
</li>

• Fíjate que en esta línea se añade class=”withsubmenu”

<li class=”lastitem”><a class=”withsubmenu” href=”#” target=”_self”>Item4-4</a>
Esto permite que definas una opción que contiene un submenú y además le añade la flechita.

• El contenido entre las etiquetas <ul> … </ul> permite definir un grupo de opciones en el submenú.

• El contenido entre las etiquetas <li> … </li> permite definir cada una de las opciones.  Solo la primera y la última tienen sus respectivas clases class=”firstitem”  y class=”lastitem”

Reemplaza entonces:
<li><a href=”#” target=”_self” >Item4-4</a>

#  por la url de vinculo que deseas.
target=”_self” por target=”_blank” si deseas que se abra el enlace en una pestaña nueva.
Item4-4  por el Item que en realidad desees que se presente.

De igual manera, basta con que añadas o elimines las líneas desde <li>… </li> en caso de necesitar más o menos opciones.

⚠ BLOGGER (Inserción de menú horizontal en espacio cabecera).

Siendo honesto, es muy probable que elijas colocarlo en un gadget de la cabecera en Blogger, pero no logres obtener los resultados deseados (no se despliegan los submenús) debido a la estructuración.

No obstante, en otros gadget de Blogger que no sean de cabecera o bien en otro tipo de plataforma (No Blogger), si podrás ver dichos resultados.

Pero, si se te hace necesario insertar este menú en el sector de cabecera BLOGGER, eso es muy fácil y puedes seguir los sencillos pasos que te detallo aquí: Como insertar cualquier menú en espacio de cabecera Blogger (truco)

¿Ves un listado con viñetas, porque colocaste el código en una entrada?

Si decides colocarlo por ejemplo dentro de una entrada editando en modo Vista HTML y luego pasas a modo “Vista de Redacción”, verás que solo aparece como un listado con viñetas.  Sin embargo, eso no quiere decir que al presentarlo (vista previa o publicarlo) no puedas verlo como realmente aparecerá.

Espero que esta publicación sobre “Menú horizontal en Blogger u otros”, te haya gustado y resuelva algún requerimiento que pudieras haber tenido. Cualquier duda, pregunta en los comentarios.

👍 ¿Te gustó esta publicación? “Por favor, ayúdame a difundirla compartiéndola con tus amigos y seguidores.”
💬 Déjame tus comentarios, estaré complacido de responder.
⭐ También puedes dejar tu calificación a este post. (Te toma solo unos segundos)
📧 Suscríbete. Nunca olvides que también puedes suscribirte para que no te pierdas nada. (Es rápido y gratuito)

Mira aquí otros post con Códigos

https://chentito.com/category/codigo

• Detalles del autor
• Más sobre el autor

Vicente Ramírez Administrator

Me encantan los blogs y todo lo que se puede aprender con ellos.
Me desempeñé como profesor de sistemas informáticos unos años de mi vida. Estudios de Licenciatura en Publicidad y Marketing. Tnlgo. en Sistemas de Computación, enseñando lo poco o mucho que puedo saber y ahora con gusto lo comparto con ustedes.

web

https://chentito.com

email

contacto@chentito.com

follow me

Soy autor y fundador de este sitio. Me encantan los blogs y todo lo que se puede aprender con ellos.

Unos años de mi vida me desempeñé como técnico en una empresa de telecomunicaciones y otros como profesor de sistemas informáticos, enseñando lo poco o mucho que puedo saber y ahora lo comparto con ustedes.

En casa, no le huyo a preparar recetas de cocina, sobre todo si se trata de compartir la mesa con mis hijos. Me gusta  también ver la vida en el proceso de las plantas y el respeto a los animales.

Tengo estudios formales de Tecnología en Sistemas de Computación y Licenciatura en Publicidad y Marketing.  Aunque sobre varias  temáticas me gusta ser autodidacta y experimentar para obtener resultados que pueda compartir de manera confiable.

Sin embargo, respecto a mi formación, regularmente evito me llamen por título y simplemente soy Vicente Ramírez, un instructor, un papá, un amigo.  Y es que en ocasiones he escuchado cuando a alguien le preguntan por su nombre y responde… Mi nombre es “Ingeniero Juan Pérez” o “Master Ana Piguave”, por lo que me pregunto si sus padres le habrán puesto por nombre “Ingeniero” o “Master” (😃 Je, je, je, una cosa es el nombre, otra cosa es la profesión). 

Realmente me apasiona el emprendimiento combinado con la tecnología, por lo que me he dado impulso para gestionar con mi proyecto web actual, plasmando este blog en el que se incluyen varias temáticas.

Así, esta web nace con la vocación de ser un sitio para compartir y divulgar estos conocimientos combinados con el de otros autores que poco a poco se van integrando.