Ya vimos un gran repertorio de menúes para Blogger, ahora vamos a ver uno horizontal con un pequeño efecto zoom.
La verdad es que es muy sencillo de hacer, no requiere nada raro y lo vamos a agregar en un gadget html directamente.
Primero, como siempre les dejo un ejemplo(pasen el mouse sobre el menú) y luego les explico cómo hacerlo.
Entonces si les gustó abrimos un gadget HTML / Javascript y colocamos el siguiente código dentro de él.
Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
Un clic en “Diseño”
Clic en “Añadir un gadget”
Busca el widget que dice “HTML-Javascript” y ábrelo
Coloca el siguiente codigo en el interior
<style>
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center;
font-size:16px;
}
ul.arrowunderline li{
display:inline;
margin-right:12px;
}
ul.arrowunderline li a{
position:relative;
color:orange;
padding-bottom:3px;
text-decoration:none;
}
ul.arrowunderline li a:hover{
font-weight:bold;
font-style:italic;
font-size:20px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
ul.arrowunderline li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:0px;
bottom: 0;
border-width:0px;
border-style:solid;
border-color: transparent transparent red transparent;
}
</style>
<ul class="arrowunderline">
<li><a href="URL del enlace">Inicio</a></li>
<li><a href="URL del enlace">Perfil</a></li>
<li><a href="URL del enlace">Rss</a></li>
<li><a href="URL del enlace">Facebook</a></li>
<li><a href="URL del enlace">Twitter</a></li>
<li><a href="URL del enlace">Google+</a></li>
</ul>
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center;
font-size:16px;
}
ul.arrowunderline li{
display:inline;
margin-right:12px;
}
ul.arrowunderline li a{
position:relative;
color:orange;
padding-bottom:3px;
text-decoration:none;
}
ul.arrowunderline li a:hover{
font-weight:bold;
font-style:italic;
font-size:20px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
ul.arrowunderline li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:0px;
bottom: 0;
border-width:0px;
border-style:solid;
border-color: transparent transparent red transparent;
}
</style>
<ul class="arrowunderline">
<li><a href="URL del enlace">Inicio</a></li>
<li><a href="URL del enlace">Perfil</a></li>
<li><a href="URL del enlace">Rss</a></li>
<li><a href="URL del enlace">Facebook</a></li>
<li><a href="URL del enlace">Twitter</a></li>
<li><a href="URL del enlace">Google+</a></li>
</ul>
Reemplazamos entonces lo que está en negrita URL's de los enlaces y también el nombre de las opciones.
También si se fijan en el código les dejé marcado en púrpura el valor de las fuentes. La primera es el valor de la fuente normal y la otra es el valor de la fuente al pasar el mouse sobre la opción.
Despues de haber insertado el código, un clic en "Guardar"
Data de la Publicación; 18-08-2019
Fuente; hogarblogger
Publicado por;
0 comentarios