Son muchos los trucos que hemos compartido a lo largo de los casi 5 años que llevo con el blog, entre ellos muchos menús (algunos más complejos y vistosos que otros); pero el menú que traigo hoy es ultra ligero pero cumple muy bien su cometido, pues con algo de CSS y HTML que no va a cargar tu blog tendrás un menú bastante limpio y perfecto para añadir a la cabecera de tu sitio web.

Sencillo Menú con efecto Hover para Blogger…

Para agregar este menú solo debes ir a Diseño, Añadir gadget, HTML/JavaScript (preferiblemente en el gadget ubicado debajo de la cabecera) y pegar el siguiente código:

<style>
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* puede ser "left", "right" o "center" */
font: bold 18px Georgia; /* tamaño de fuente */
}
ul.arrowunderline li{
display:inline;
margin-right:25px; /* espacio entre enlaces */
}
ul.arrowunderline li a{ /* el color de texto es black */
position:relative;
color:black;
padding-bottom:8px; /* espacio entre la flecha y el texto */
text-decoration:none;
}
ul.arrowunderline li a:hover{
border-bottom:3px solid red; /* grosor línea de la flecha el color es red */
}
ul.arrowunderline li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent red transparent; /* el color de la flecha es red */
}
</style>
<ul class="arrowunderline">
<li><a href="url-enlace">Enlace 1</a></li>
<li><a href="url-enlace">Enlace 2</a></li>
<li class="selected"><a href="url-enlace">Enlace 3</a></li>
<li><a href="url-enlace">Enlace 4</a></li>
<li><a href="url-enlace">Enlace 5</a></li>
<li><a href="url-enlace">Enlace 6</a></li>
</ul>

Lo resaltado en color verde corresponde a la parte del HTML donde se agregan los enlaces que mostrará el menú.

Este es un tutorial muy fácil de añadir y sencillo pero muy practico y funcional.