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 |
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ú:
