Menú minimalista con efecto Hover para Blogger

Hoy compartiré un sencillo truco para Blogger, se trata de un menú tipo minimalista para Blogger, gracias a un poco de HTML y CSS se logra crear un ligero menú para Blogger con efecto hover (al pasar el cursor), recordemos qué este tipo de trucos se pueden personalizar siempre desde el CSS.

Menú minimalista con efecto Hover para Blogger
Menú minimalista con efecto Hover para Blogger

Para añadir este menú en tu blog, ve a Diseño y en un gadget HTML/JavaScript (preferiblemente debajo de la cabecera del blog) añade lo siguiente:

<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 negrita es la parte del HTML en la que se agregan los enlaces, los títulos de esos enlaces y los demás valores personalizables en el menú, después de ajustarlo a tus necesidades solo guarda los cambios. Lo qué está encerrado en las etiquetas <style> </style> corresponde al css, desde allí puedes editar la apariencia general del menú.

A continuación se muestra una vista previa del menú:


Entradas que pueden interesarte

disqus