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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKd0Swh43MOoX_LHq5P2iDpSFW7lnw9bLzZPuBc9OEY1I8KMKZd8gyfTGSGDI7WgOfi5Pki0MfdS9qoKIc31qkcv57MJWiQnng27g0_bD9breUBlvaP8WJ-O_6ojEGt8Ihrnt1bQv9lGp1/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--