31/1/16

Tutorial {Menú Ruler}

Hola!, como están? Perdón nuevamente por no publicar tanto, estoy muy ocupada en cuanto a los estudios. Les aviso que hay muy pocos participantes y si no hay más de 8 se alargará el sorteo o se suspenderá. Este tutorial es muy sencillo y muy lindo, espero les guste este menú.

   1.  Vamos a Diseño> Agregar un Gadget> HTML/JavaScript
   2.  Colocamos el siguiente código y luego lo editamos:
<style type="text/css">
.hCT {
padding: 3px 5px 7px 5px;
position: relative;
background: #C1B5FF; /* FONDO DEL MENU */
border-radius: 0;
z-index: 1;
outline-offset: -3px;
outline: 1px dashed #ddd; /* BORDE ENTRECORTADO */
}
.DRAGONS {
position: relative;
width: 400px; /* LARGO DEL MENU */
}
a.linksCT {
color: #eee; /* COLOR DE LINKS */
text-decoration: none;
text-shadow: 0px -0px 0px transparent,
0px 0px 0px transparent;
}
.linksCT {
font: 9px georgia; /* TIPO DE LETRA DE LINKS */
text-transform: uppercase;
-webkit-transition-duration: 0.5s;
margin: 3px;
letter-spacing: 2px;
}
.linksCT:hover {
color: transparent;
text-shadow: 0px -1px 0px #D7CFFF, /* COLOR DE LINKT HOVER */
1px 1px 0px #A28FFF; /* COLOR DE SOMBRA */
-webkit-transition-duration: 0.5s;
}
</style>
<div class="DRAGONS">
<div class="hCT">
<center>
<a href="PON TU URL AQUÍ" class="linksCT">TÍTULO</a>
<a href="PON TU URL AQUÍ" class="linksCT">TÍTULO</a>
<a href="PON TU URL AQUÍ" class="linksCT">TÍTULO</a>
<a href="PON TU URL AQUÍ" class="linksCT">TÍTULO</a>
<a href="PON TU URL AQUÍ" class="linksCT">TÍTULO</a>
<a href="PON TU URL AQUÍ" class="linksCT">TÍTULO</a>
</center>
</div>
Espero les haya gustado el tutorial, hoy o mañana pondré un tutorial para poder personalizar o crear tu propio menú!  

No hay comentarios.:

Publicar un comentario

~No seas ofensivo
~No utilices malas palabras
~Déjame una sonrisa