Hace tiempo se puso de moda un estilo de menú que daba un efecto muy especial. Al pasar el cursor por un enlace, debajo o encima de éste aparecía una flechita o una esquina doblada.
Se me ocurrió fabricar un menú con un diseño similar...
Ponerlo en tu blog es muy sencillo, simplemente debes seguir los pasos que voy a mostrarte.

Busca la etiqueta ]]></b:skin> y encima pega estos bloques de CSS que darán estilo al menú:
/*--- Menu pointy arrow ---*/
* html #menu {
float:left;
height:1%;
}
#menu {
overflow:hidden;
padding: 25px 0 20px;
clear:both;
background: #ffffff;
}
#menu .enlaces {
float:left;
text-decoration: none;
background: transparent;
}
#menu .enlaces li {
font-family: verdana,sans-serif;
font-weight: normal;
display: inline;
float:left;
text-decoration: none;
border-right: 1px solid #cccccc;
height: 24px;
letter-spacing:-1px;
}
#menu .enlaces li a {
float: left;
text-decoration: none;
padding:6px 8px 10px;
}
#menu .enlaces ul {
float:left;
text-decoration: none;
border-left: 1px solid #cccccc;
}
#menu .enlaces li ul li {
font-weight:400;
letter-spacing:normal;
}
#menu .enlaces li a:hover {
text-decoration:none;
background: #006699 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBA4WpcGMhXfAy-DPCLyJSkntTvg3yua7Xywb8aieRJV69dSP014qbL1ElCI4Kh83S76A72q2O4CKqwB2BqmyLi3mKettvMDklCfkkU_jZK1J9ate5ky2ELjUcXUXM4FJbznY5c1570k/s1600/pages-bot.png) no-repeat bottom center;
color: white;
}
#menu .enlaces .current_page_item .page_item a:hover {
background: #006699 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhii4RrHLryOR7l89W6-BoOomBdyCsujH21JnZD-3kyHkL2f5Qv1j4ZJkN-7tWFTMsPQ5s3wwXUuxxQJifPDWjxEKWLs1WSsHuX4me2tLw8kI1Hitrb9AbeK8UoYeRCRNYr_0zIWLCCCgA/s1600-r/flechabalcn.png) no-repeat bottom center;
color: #ffffff;
}
#menu .enlaces .current_page_item a, #menu .enlaces .current_page_item a:visited, #menu .enlaces .current_page_item a:hover {
color:#ffffff;
text-decoration:none;
background: #14a958 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhii4RrHLryOR7l89W6-BoOomBdyCsujH21JnZD-3kyHkL2f5Qv1j4ZJkN-7tWFTMsPQ5s3wwXUuxxQJifPDWjxEKWLs1WSsHuX4me2tLw8kI1Hitrb9AbeK8UoYeRCRNYr_0zIWLCCCgA/s1600-r/flechabalcn.png) no-repeat bottom center;
}
#menu .enlaces .current_page_item .page_item a, #menu .enlaces .current_page_item .page_item a:visited {
text-decoration:none;
background: #ffffff;
color: #cccccc;
}
/*--- Fin del menu pointy arrow ---*/
Puedes editar algunas características del menú:
- El color de fondo del primer enlace (el de inicio): Busca la línea de color naranja y cambia #14a958 por el código de tu color favorito [+].
- El color de fondo de los enlaces al pasar el cursor por encima: Busca la línea de color verde y cambia #006699 por el código de tu color favorito [+].
- La fuente de texto de los enlaces: Busca la línea font-family: verdana,sans-serif; y cambia verdana,sans-serif por la fuente que desees (por ejemplo, Comic Sans MS).
Una vez hayas terminado de personalizar la barra de navegación guarda la plantilla:

Para terminar, vamos a incluir los enlaces.


Pega esto:
<div id='menu'>
<div class='enlaces'>
<ul>
<li class='current_page_item'><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<li class='page_item page-item'><a href='URL DE LA PAGINA'><span>TITULO</span></a></li>
<li class='page_item page-item'><a href='URL DE LA PAGINA'><span>TITULO</span></a></li>
<li class='page_item page-item'><a href='URL DE LA PAGINA'><span>TITULO</span></a></li>
<li class='page_item page-item'><a href='URL DE LA PAGINA'><span>TITULO</span></a></li>
</ul>
</div>
</div>
Sustituye en cada caso URL DE LA PAGINA por la dirección de tu enlace (por ejemplo, http://google.es/) y TITULO por la palabra o texto con la que se mostrará el enlace.
Una vez incluidos los enlaces con sus respectivos títulos, podrás guardar el gadget y disfrutar de tu menú pointy arrow.
Me gusta, es sencillo pero esta muy bien. A lo mejor lo pongo en el blog.
Muchas gracias.
Un saludo
Sencillo y minimalista, Gildo Kaldorana, así es ;). En tu blog quedaría muy bien (ya que el fondo es blanco) aunque te comento que estoy fabricando nuevos diseños... por si te gustan más ☺.
¡¡Saludos!!
me gustan kiero kompra 1 pareja
Anónimo, ¿Qué es lo que te gusta? te comento que yo no vendo nada :S.
Hola Jaime!
En esto de los menus hay una cosa que no entiendo, los enlaces que quieren decir? Que por ejemplo si tu pones un enlace de un post te saldrá el título de el post en el menú y tú puedes acceder al post des de el menú? O si quieres poner las etiquetas y los nombres de los posts de esas etiquetas podrás acceder a ellos mediante el enlace?
Con esto me ago un lío, me podrías ayudar?
Gracias.
Marcus, un menú es una especie de lista de enlaces.
Esos enlaces pueden conducirnos a otras páginas web o blogs, así como a páginas dentro de un mismo sitio web.
Puedes poner un enlace que diga "Perros" e incluir la URL (dirección) de la etiqueta perros (que puedes conseguirla haciendo clic con el botón derecho del ratón encima de la etiqueta que aparece al pié de las entradas y copia la dirección del enlace).
Para conseguir la url de una entrada, haz lo mismo (clic con el botón derecho del ratón encima de la etiqueta que aparece al pié de las entradas y copia la dirección del enlace) que antes y pon el título que quieras en el menú.
Si necesitas más ayuda dímelo ☺.
Gracias Jaime! :D Ahora lo entiendo!
Una cosilla... Estaba intentando poner el menú desplegable con niveles i subniveles y cuando iba ya por buscar la segunda línea de HTML (después de poner el código de el menú) el buscador no me lo encontraba, por que puede ser?
Marcus, no te preocupes, la línea puede tener otro nombre.
¿En qué blog deseas poner el menú?
¿Te refieres a esta línea?...
<div id='content-wrapper'>
Necesito saber eso para poder ayudarte ;).
Es esa línea. De el blog principal, aunque en el otro me gustaría poner algo. Pero no este menú.
Marcus, entonces busca esta línea:
<div id="main-wrap1">
Y encima pega el código del menú.
¿En el otro blog quieres poner un menú? Si es así, puedes elegir otros modelos en dicha categoría.
Gracias Jaime!
Probaré como ha ido.
Por cierto, ¿por que a veces cuando publico un comentario, tarda un poco en salir en tu blog?
Es solo una curiosidad.
Hola Jaime.:(
Sigue sin aparecer. A mi me sale en vez de content, crosscol. Si no es ninguna molestia, podría decirte mi contraseña, y si quieres, podrías mirar mi plantilla.
Marcus, los comentarios no es que tarden en aparecer sino que re guardan en mi Escritorio. Tengo habilitado la opción de "moderar comentarios", lo que me permite publicarlos o rechazarlos (no editarlos).
Casi siempre intento publicarlos y responder lo antes posible.
En cuando a lo de la plantilla, no me des la constraseña (nunca acepto este tipo de datos).
Puedes mandarme la plantilla en un documento de word a mi correo.
Para copiar la plantilla, ve a Diseño > Edición de HTML y marca la casilla "expandir plantilla de artilugios.
Copia todo el código e insértalo en el documento ;).