Juvinao
1
Xi
Programador
Verificación en dos pasos activada
Suscripción a IA
Hola betas, hoy vuelvo con un pequeño truco para Blogger, en esta ocasión veremos como añadir un menú minimalista a nuestro blog de Blogger.
En un HTML/JavaScript pega el siguiente código:
La última parte del código, desde <ul class="arrowunderline"> corresponde al HTML desde el que se agregan los enlaces, los títulos de esos enlaces y los demás valores personalizables en el menú.
Para más recursos para Blogger visita Mi Blog Ideas
En un HTML/JavaScript pega el siguiente código:
Insertar CODE, HTML o PHP:
<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>La última parte del código, desde <ul class="arrowunderline"> corresponde al HTML desde el que se agregan los enlaces, los títulos de esos enlaces y los demás valores personalizables en el menú.
Para más recursos para Blogger visita Mi Blog Ideas
