AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Menús -3- Configurar tu propio menú. (Un menú simple)

sábado, 30 de enero de 2010

Puedes montar tu propio menú y darle el aspecto que desees simplemente con un poco de CSS y un gadget HTML.

Para empezar has de construir la lista basándote en estos parámetros:

<ul class="menu"> (indica que aquí empieza una lista de enlaces. Con class="menu" le podremos añadir estilos)
<li> (indica que empieza un enlace)
<a href="dirección del enlace"> (sitio o página enlazada)
Palabra que describe lo enlazado (será la que se verá y se podrá pinchar)
</a> (cierre del enlace)
</li> (indica que termina el enlace)

Repetir desde <li> hasta </li> cambiando la url y la palabra, por cada enlace que se quiera añadir.

</ul> (indica que aquí termina la lista)

Opciones avanzadas.
Si quieres que los enlaces se abran en otra ventana:
<a href="dirección" target="_blank">

Si quieres que se vea algo al poner el ratón encima del enlace:
<a href="dirección" title="palabra o frase">

Si quieres que se vea algo al poner el ratón encima del enlace y se abra en otra ventana:
<a href="dirección" title="palabra o frase" target="_blank">

Una vez preparada la lista, iremos a Diseño/Edición de HTML para configurar el estilo del menú.

El lugar donde coloques lo que voy a decirte a continuación no es demasiado importante, aunque si vas a colocarlo bajo la cabecera te recomendaría que lo pusieras justo debajo de las definiciones del header. Más que nada por si quieres modificarle algo, para que esté ordenado.
En la plantilla mínima sería encima de ésto:
/* Outer-Wrapper

Y si tienes alguna duda, puedes ponerlo encima de ]]></b:skin> así seguro que no te equivocas.

¡Bien! Decidido donde vas a colocar las definiciones añades ésto:

/* El menu */
ul.menu {
background-color: #A9A9A9;
float: left;
list-style-type: none;
margin: 0;
padding: 0 20px;
}
/* cada item de la lista */
ul.menu li {
border: 2px solid #A9A9A9;
display: block;
float: left;
height: 30px;
margin: 0;
padding: 0;
position: relative;
}
/* cada item de la lista es un enlace */
ul.menu li a {
color: #FFF;
display: block;
float: left;
font-weight: bold;
line-height: 18px;
padding: 6px 15px 5px;
text-decoration: none;
}
/* efecto hover sobre los enlaces */
ul.menu li:hover {
background-color: #000;
border:2px solid #A9A9A9;
}


Puedes modificar los colores y los bordes a tu gusto, incluso crear variables para cada color, de esta forma lo podrías modificar desde fuentes y colores.

Una vez añadido este código Vista previa para asegurarte de que el blog carga bien, y ya puedes, si aún no lo había hecho, añadir el gadget con los enlaces.

Si vas a ponerlo bajo la cabecera, quizá debas modificar el código del header en el HTML para que admita más de un gadget, tal como explico en esta entrada.

P.S. Editado: Mi agradecimiento a Vagabundia, que con una de sus entradas, donde explica como hacer un menú, me ha ayudado a comprender mejor el tema, (este código pertenece a su entrada), y mis disculpas por habérseme olvidado mencionarlo cuando hice la entrada.

Imprime esta entrada

6 comentarios. ¿Quieres añadir el tuyo?

  1. PONTENOVA.ES ha dicho
  2. No sabia donde poner este comentario, perdona.
    Dividir la sidebar de una minima en dos:
    Quisiera saber si la division se puede poner en cualquier parte de la sidebar, es decir, sin que tenga que ir al final, que pueda ir en medio, o arriba y tambien si puedo darle el ancho que quiera a cada mitad de la sidebar, es decir, que una mitad tenga 150 y otra 250, con lo cual harian un total de 400.
    Muchisimas gracias , es que estoy preparando una minima para sustituirla por la que tengo. La que voy a sustituir es la de a pontenova, y la minima de pruaba es la de probas. de nuevo muchas gracias. Dejame algun enlace haber si lo consigo.

  3. Eulalia ha dicho
  4. Si, si que se puede, pero para dividirla por el centro has de encuadrar en un mismo div, el de sidebar-wrapper, 3 o 4 div diferentes, el de arriba, el doble en el centro, que será uno que encuadrará 2, y el de abajo, de lo contrario cada parte de esas se coloca donde quiere dependiendo de lo que haya a su lado.
    Al ponerlo todo dentro de un único contenedor, quedan alineadas una debajo de la otra.
    Si tienes un blog de pruebas, y te interesa, mira en Ideas. Hay una plantilla con una sidebar así.

  5. PONTENOVA.ES ha dicho
  6. Muy bien eulalia, me esta quedando a la perfeccion, me has entendido y yo a ti perfectamente, aunque me llevo mi tiempo jaja, pero muy bien.
    Me queda solo una cosa para terminar, ya me paso en la plantilla que tengo y lo arregle pero no se como.Cuando añado un gadget de una imagen de 200 y le doy a que me la reduzca automaticamente se me queda mas pequeña, lo mismo me pasa con la de 250 y tambien con la de 500. Se que hay que cambiar un valor, pero no me acuerdo cual para ajustar los anchos. Te voy a pasar por correo la plantillay haber si lo consigo.
    La sidebar es de 500, las que he dividido son de 250 y 200 y sobrarian 50 para el margen del medio, luego le he puesto un
    #main-wrapper {
    width: 500px;
    y el #outer-wrapper {
    width: 1024px;
    Haber que me puedes decir para que se me adapte el gadget de imagen a lo que realmente tengo especificado. un millon de gracias, te voy a poner un superenlace.
    el blog es el de probas, que le voy a cargar la plantilla al de pontenova.

  7. Eulalia ha dicho
  8. No es necesario que me envies la plantilla, con la direccion del blog me basta, ya que el CSS lo veo con el navegador, pinchando en Ver/Codigo fuente de la página.

    Los gadgets de Imagen son difíciles de cuadrar, ya que aunque dice que la va a reducir al ancho de la columna, a veces la reduce más o menos.
    No es cosa de la plantilla ni del código, es un tema de blogger.
    Para evitarlo pon las imágenes en un gadget HTML, mediante el código img src añadiendo style="y aqui el ancho exacto que quieras, así: width="XXXpx"
    De esta forma siempre cuadrarán.

  9. PONTENOVA.ES ha dicho
  10. muchisimas gracias, voy a seguir intentando haber que pasa.

  11. Kanalla.. ha dicho
  12. Hola a tod@s. Estos son los siete blogs mas importantes para mi a la hora de saber lo que humildemente se, en este mundo de la blogosfera. Estan colocados por orden de encuentro, el ultimo lo descubrí el pasado año cuando le dieron el premio. No tengo palabras para expresaros el agradecimiento, no solo por lo que he aprendido gracias a vosotros/as y lo que sigo aprendiendo.Pero sobre todo, porque sois el vivo exponente de lo solidario, con vuestra entrega sin animo de lucro, aprendemos a compartir. Me considero a veces un ingrato porque no me paro ni a decir gracias, ni un triste hola. Sirvan estas palabras para salvarme. Gracias tambien a otros muchos blogeros que algo dejaron en el camino tambien. Pero como todo no van a ser alabanzas. Como todos estos son muy buenos, me gustaria poneros una prueba cariñosa y de buen rollito. Descubrí esta plantilla y aunque pueda recibir calificativos de ortera, me encanta por lo original de sus cosas. Quien de vosostros podria crear una igual para bloger ?. Ese es mi reto, y mi ayuda.Podria ser posible ? Gracias, sea la que sea la respuesta y disculpar la extensión de mi comentario-sugerencia. Hasta siempre y un abrazo
    http://webjcp.blogspot.com/
    http://gemablog-.blogspot.com/
    http://elescaparatederosa.blogspot.com/
    http://laeulalia-blogdeprobes.blogspot.com/
    http://vagabundia.blogspot.com/
    http://blogandweb.com/
    http://oloblogger.blogspot.com/

    PAGINA A DISEÑAR PARA BLOGER
    http://dragoninteractive.com/

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.