Mil Trucos Blogger

Sencillo menú horizontal con efecto zoom

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Hola amigos de Mil Trucos Blogger, en el día de hoy voy a compartir un menú sencillo para Blogger, que al pasar el cursor encima se descubre un gran efecto zoom.

Sencillo nenú horizontal con efecto zoom

Menu-con-efeco-zoom-blogger

Para agregar este menú solo debes ir a Diseño, Añadir gadget, HTML/JavaScript (preferiblemente en el gadget ubicado debajo de la cabecera) y pegar el siguiente código:

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

La parte resaltada en color azul corresponde al HTML que se puede editar.

Si el truco te ha gustado no olvides compartirlo en tus redes sociales.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo