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.
Reemplazamos entonces lo que está en rojo por las 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.
Ojalá les sirva, ¡Saludos!.
-
Ingormación tomada de: http://hogarblogger.blogspot.com.ar/2012/09/menu-efecto-blog-zoom-blogger.html#.UeVZnaz7be5
Entonces si les gustó abrimos un gadget HTML / Javascript y colocamos el siguiente código dentro de él.
------------------------------------------------------------------------------------------------
<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 rojo por las 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.
Ojalá les sirva, ¡Saludos!.
-
Ingormación tomada de: http://hogarblogger.blogspot.com.ar/2012/09/menu-efecto-blog-zoom-blogger.html#.UeVZnaz7be5
No hay comentarios:
Publicar un comentario