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.

Un menú bajo la cabecera (o sobre ella).

domingo, 10 de febrero de 2008

Como podeis ver acabo de colocar unos botones, (o algo que parecen botones), con enlaces a algunas etiquetas, justo debajo de la cabecera.
Es el último truco que ha publicado Rosa y me ha gustado muchísimo por su sencillez, así que me ha faltado tiempo para colocarlo.
Hasta ahora, todos los códigos que había visto que permitían poner un menú ahí eran sumamente complicados y me daba pereza incluirlos en este blog.
Pero este ha sido como un regalo del cielo, (un cielo llamado El escaparate), que lo que hace es colocar un elemento encima o debajo de la cabecera, previamente configurado como lista de enlaces, en la que los links se muestran horizontalmente, en lugar de verticalmente.
Así que si quereis colocarla en vuestro blog, paso a explicaros como hacerlo.

---
Plantilla/Edición de HTML. (No hace falta que expandais los artilugios).
Antes de empezar repasad la lista de widgets que haya en el código y fijaros cuantos linkList teneis.
Los vereis así:
<b:widget id='linkListX'...>
Donde X es un número y los puntos suspensivos el resto de la línea.
Dependiendo de la cantidad de listas de enlaces que tengais vereis 1, 2, 3, 4, etc. (en este blog había 11 antes de poner el código nuevo).
Cuando hayais encontrado el más alto, recordad, o apuntaros, cual es para colocar el número siguiente en el código nuevo. (Si teneis dudas, simplemente poned un número alto 30 o 50, por ejemplo).
Una vez hecho esto localizad esta línea del código:



<div id='header-wrapper'>

Teniendo en cuenta que dependiendo de la plantilla puede ser que diga otra cosa.
Por ejemplo en ésta (Harbor) pone outer-wrapper.
De todas formas, para guiaros un poco, tened en cuenta que suele estar debajo de

<body>

y encima de esto

<b:section class='header'...>

Si quereis que los "botones" aparezcan encima de la cabecera pegais el código encima de esta línea de arriba, si quereis que se vean debajo, lo pegais al final de este pedacito de código de aquí abajo.

<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Titulo de tu blog (cabecera)' type='Header'/>
</b:section>
</div>

Y este es el código que teneis que pegar ahí:

<b:section class='menubar' id='menubar'
maxwidgets='1' showaddelement='yes'>

<b:widget id='LinkListX' locked='true' title='Menubar'
type='LinkList'/>

</b:section>

(Recuerda cambiar la X por el número que sea necesario)
Una vez pegado subes hacia la zona del CSS y justo encima de

]]></b:skin>

pegas esto

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li
{

float: left;
}
#menubar a:link, #menubar a:visited, #menubar
a:hover
{

padding:
5px;

display:
block;

color:
#003399;

}
#menubar a:hover {
background-color: #CC3300;
}

---
Tal como está, los enlaces tienen siempre el mismo color y al poner el ratón encima, aparece un fondo rojo.
Puedes cambiar los colores de los links y hacer otros cambios que paso a explicarte.
Si quieres que el enlace cambie de color al poner el ratón encima, borra #menubar a:hover de la fila donde está de color violeta y en el último grupo, el que empieza por

#menubar a :hover{
añade esta línea
color: #(aquí el número del color que quieras, sin paréntesis);
Si quieres eliminar este fondo rojo que te digo que aparece, borra, en este mismo grupo, la línea background-color:#CC3300; o cámbiale el número si prefieres dejarlo pero con otro color.
Si quieres enmarcar los enlaces para que tengan la apariencia de un botón, como los de aquí, añade esta línea:
border: outset 2px # (aquí el número del color); [outset 2px le da este aspecto de relieve].
en la zona
#menubar li {
justo debajo de
float: left;
(No te olvides ningún punto y coma al final de cada línea que añadas).
---
Cuando hayas pegado el código, (los cambios puedes realizarlos más tarde), Vista previa.
No verás que haya cambiado nada, pues todavía tienes que configurar la lista de enlaces, pero si el blog carga bien, Guarda plantilla.
Entonces vas a Elementos de la página y verás que se ha añadido un elemento encima o debajo de la cabecera, (depende de donde lo hayas colocado), con el nombre Menubar. Pinchas en Editar y ya puedes colocar allí los enlaces que quieras que se vean.
Guarda cambios cuando termines y al ver el blog verás los nombres alineados ahí.
Puedes cambiar el orden en que aparecen pinchando en las flechas de subir y bajar, al igual que en las listas "normales", la diferencia es que aquí cambian de posición horizontalmente.
---
La estoy colocando en las plantillas tuneadas, y como cada una tiene sus características propias, aquí te dejo los enlaces a las explicaciones que corresponden a cada una.
Para ponerla en una rounders pincha aquí.
Para ponerla en una thisaway pincha aquí.
Para ponerla en la tic-tac pincha aquí.
Para ponerla en una scribe pincha aquí.
---

Imprime esta entrada

12 comentarios. ¿Quieres añadir el tuyo?

  1. Princesa Yaquee ha dicho
  2. Hola Eulalia:
    Bueno yo hago el truco tal cual, inclusive lo hice también con Gem@ y meda el mismo resultado que es este cuando doy guardar los cambios me sale este mensaje: "Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.

    * LinkList1"

    Y cuando doy vista previa aparece esto, arriba de todo el blog:
    #menubar h2 {display:none;}#menubar ul {list-style: none;}#menubar li {float: left;}#menubar a:link, #menubar a:visited, #menubar a:hover {padding: 5px;display: block;color: #003399;}#menubar a:hover {background-color: #CC3300;} -->

    Espero puedas ayudarme!!!
    Gracias!!

  3. Eulalia ha dicho
  4. Hola Princesa yaquee
    Te he enviado una respuesta por correo, pero de todas formas he entrado a ver si es que me he explicado mal y creo que, pese a que me enrollo bastante las explicaciones son claras. No entiendo porqué te da ese error y lo único que se me ocurre es que lo has pegado en el lugar incorrecto, o que haya algún código en tu plantilla que sea incompatible con este. Ahora iré a ver tu blog, y a ver si puedo encontrar alguna razón.
    Saludos

  5. Princesa Yaquee ha dicho
  6. Logré colocarlo bien solo que ahora no me aparece la opción para editarlo ...

  7. Princesa Yaquee ha dicho
  8. Bueno al fin me SALIO ... Ja, ja, era cuestión de ir probando, perdón.... Y Gracias por este truco. Muy bueno tu blog ya te enlacé a uno de los míos.-

  9. Eulalia ha dicho
  10. No hay de que Princesa. Acabo de descubrir que en algunas plantillas el código hay que retocarlo un poco. ya iré dejando instrucciones.
    Me alegra que al final haya salido bien. Un beso.

  11. CEIP NTRA_SRA DE LOS DOLORES ha dicho
  12. Hola Eulalia:
    Muchas gracias por tu blog, es un referente para los que estamos aprendiendo. Querría poner también un menubar en mi blog y no sé ni cómo se llama, para ver cuál consejo seguir. Te agradecería la ayuda porque me da mucho miedo tocar en la plantilla porque tengo muchas cositas en el blog y es para un colegio y no querría que se perdieran y a la mañana siguiente los alumnos no pudieran encontrar lo que buscan. Te envío el enlace por si me puedes ayudar, te estaría muy agradecida:
    http://colealomartes.blogspot.com
    Besitos desde Granada.

  13. Walder ha dicho
  14. Hola eulalia una vez mas ando por aqui en tus apuntes que por cierto me han ayudado demasiado, tengo una gran duda y creo que la estoy haciendo en el lugar indicado, descargue una plantilla y esta ya viene con una barra arriba donde dice home... post rss y un resto de cosas, como puedo cambiar estos nombres y como los enlazo como lo tienes tu por secciones y todo eso, lo que pasa es que tengo que hacer un blog de una empresa y tengo ganas de separarla por secciones como mision, visio, integrantes etc. si me pudieses ayudar te lo agradeceria.

  15. Eulalia ha dicho
  16. La menubar no se puede hacer desplegable porqué es un gadget Lista de enlaces.

    Para hacer un menú desplegable, has de seguir las instrucciones que he dejado hace poco. Pero no tiene nada que ver con la menubar.

  17. El Chiko de Rojo ha dicho
  18. Eulalia:

    Hola de nuevo!!!

    Me gusto mucho este articulo... era lo que buscaba para crear uno en el blog de la iglesia a la que asisto...

    Bueno pues estoy fascinado con lo que tienes en esa menu-bar tuya y lo que mas me gusta es que al pasar el mouse en cada parte del menu, se despliega un submenu y me gustaria que me explicaras como hacerlo...

    Espero con ansia tu ayuda, ya que estoy practicamente creando este nuevo blog para mi iglesia y debe quedar muy profesional y ya les dije a mis pastores que iba a quedar como el tuyo...

    :)

    Gracias de antemano!!!

    Tu amigo de facebook David "El Chiko de Rojo"

  19. Eulalia ha dicho
  20. David: El menú que explico en esta entrada no es el que se ve ahora. Esta menubar la podrias ver en cualquier otro de mis blogs.

    El que ves aquí es un menú con submenús y sub-sub menús. Está hehco en una página que te da el código. Tu solo tienes que ir añadiendo los enlaces.

    Lo verás explicado en Más cosas, en esta entrada.

    Saludos.

  21. Erika ha dicho
  22. Hola Eulalia, hice y segui tu procedimiento para poner un menu en la cabecera, pero tengo una pregunta. ¿como le hago para que se vea como barra? ya que solo me aparecen los enlaces sin barra... gracias.
    Disculpa soy nueva en esto.
    bendiciones.

  23. Eulalia ha dicho
  24. Para que se vea como barra, o como botones en una barra, si pinchas en el enlace que corresponde a una de las plantillas, (al final de la entrada), verás que explico como añadirle las caracteristicas.

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