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.

Categorías: Trucos Blogger

0 commentarios

Deja un comentario

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