sábado, 7 de junio de 2014

menu: numeros-




hola!  are este pedido-tutoral.

primero vamos a diseño>añadir gadget> html/javascript.
y copiamos y pegamos este codigo:



<style>
a.jeonjin1 {
letter-spacing:1px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
cursor:pointer;
display:inline-block;
font:8px tt;
text-align:center;
width:30px;
height:10px;
color:#888 !important;
padding:5px;
padding-top:15px;
background:#eee;
text-decoration:none;
-webkit-border-top-left-radius: 33px;
-webkit-border-top-right-radius: 33px;
-moz-border-radius-topleft: 33px;
-moz-border-radius-topright: 33px;
border-top-left-radius: 33px;
border-top-right-radius: 33px;
border:2px solid #ddd;
border-bottom:none;
}
a.jeonjin1:hover{
background: #fff;
color:#333 !important;
}
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
</style><center>
<a class="jeonjin1" href="LINK" title="tmnbnvm">1</a>
<a class="jeonjin1" href="LINK" title="mymy">2</a>
<a class="jeonjin1" href="LINK" title="mumu">3</a>
<a class="jeonjin1" href="LINK" title="mimi">4</a>
<div style="background:url(http://4.bp.blogspot.com/-ZwAhW0YjFOw/UBBDQvIJnlI/AAAAAAAADps/0L7sUFkcY_c/s1600/tumblr_m0g3ybPmqj1r6uwfxo7_400.png);width:200px;height:5px;">
</div>
</center>

 editemos:
 violeta:: la categoria que saldra al pasar el cursor por cada icono.
 rojo:    el link de la pagina a la cual se dirigira.
 azul;    el numero que saldra en el menu. se puede remplazar por carcteres o letras^^

                                        eso es todo, hasta pronto--
  

No hay comentarios:

Publicar un comentario

hola pequeño gatito! espero que comentes con respeto AriGAto!