Para insertar este Menú Horizontal con efecto rotación en los enlaces, con CSS en tu blog.
entramos en ▶ Diseño ▶ Añadir un Gadget ▶ HTML/Javascript y copias el siguiente código:
<style>
#ccmenu {
padding: 0;
list-style-type: none;}
#ccmenu li {
display: inline;
}
#ccmenu li a {
color: #000000;
float: left;
font-family: Arial,Verdana,Times New Roman;/*Fuente */
font-size: 11px;
padding: 13px;
text-decoration: none;
text-transform: uppercase;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #58acfa;/*Color de fondo */
}
#ccmenu li a:hover {
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
}
</style>
<ul id="ccmenu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Contacto</a></li>
</ul>
- Se puede personalizar todo lo que esta en rojo
- Para agregar más enlaces <li><a href="#">Enlace</a></li>
- Ver Tabla de Colores
- Para cambiar la fuente Google Fonts
No hay comentarios -
Publicar un comentario