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