viernes, 24 de abril de 2009

MENU VERTICAL

Os voy a mostrar una forma muy simple de crear un menú en forma vertical
El aspecto será el siguiente:


Pasos para crear vuestro menú:

Primer paso:(Ubicación del código)

Ir a Diseño->Edición de HTML y buscar en la parte del código ]]></b:skin>
justamente encima pegaremos el siguiente código:

#Greydrop a, #Greydrop a:visited {
text-align:center;
position:relative;
text-decoration:none;
display:block;
background:transparent url(http://i88.servimg.com/u/f88/12/78/97/76/grey_110.gif) repeat-x scroll 0 0;
color:#ffffff;
font-weight: bold;
width:10em;
font-family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;
border:2px solid #fff;
border-color: #cccccc #7d7d7d #7d7d7d #cccccc;
padding:0.25em;
margin:0.5em auto;
}
#Greydrop a:hover {
top:1px;
border-color: #cccccc #7d7d7d #7d7d7d #cccccc;
font-family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;
Font-weight: bold;
color:#ffffff;
background:transparent url(http://i88.servimg.com/u/f88/12/78/97/76/grey_210.png) repeat-x scroll 0 0;
}
Guardaremos los cambios y listo, ya tenemos lo necesario para crear nuestro menú.

Segundo Paso:(Crear el menú)

Lo normal será insertarlo en la sidebar de nuestro blog, para ello crearemos un gadget de tipo HTML/Javascript y allí pegaremos el siguiente código.

<div id="Greydrop">
<a href="URL DEL ENLACE 1">TITULO1</a>
<a href="URL DEL ENLACE 2">TITULO2</a>
</div>

Sustituir URL DEL ENLACE por la dirección hacia donde queráis ir al hacer click y TITULO por el título que se mostrará en el menú, podréis añadir tantos títulos como queráis tan solo tendréis que añadir al código tantas lineas de código como enlaces queráis.

1 Comentario:

Asì esta escrito dijo...

Saludos!!!!
Te cuento que tras la respuesta que me enviaste por correo, lo primero que hice fue probar lo que me indicaste respecto a poner "
" luego de cada título y esto me ha andado de maravilla.
Te doy muchas gracias por la ayuda y la disponibilidad de ayudar.
Muchas gracias nuevamente y adios.

Publicar un comentario

Haga su comentario

Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.