Antes de aplicar algún cambio a tu plantilla

Asegúrate de que tu plantilla es como ésta ya que las definiciones no son las mismas en todas.
Puedes verlo en Diseño/Edición de HTML , como te muestro aquí. El modelo es lo que pone junto a Name.




Si no fuera ésta, mira en este blog.
En la sidebar de la derecha hay una lista de todas las plantillas que he modificado.

El nombre del blog es el de la plantilla.

miércoles 13 de febrero de 2008

Los botones de la cabecera

Esta barra que ves con botones es la menubar un elemento "lista de enlaces" configurado de forma que los links aparezcan horizontalmente.
La explicación original está en esta entrada de Tuneando el blog, pero aquí te dejo el código de estos que ves.
Para colocarla en un blog con esta plantilla, has de entrar en Diseño/Edición de HTML y sin expandir elementos has de buscar este trocito de código:

<b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título de tu blog (cabecera)' type='Header'/>
</b:section>


y justo debajo pegar este

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

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

</b:section>
cambiando la X por el número que corresponda en las listas de enlaces. (Para saber cual has de poner, mira el código, busca las linkList que hay, las verás así linkList1, linkList2, etc. y pon un número que no aparezca.
A continuación, sin hacer todavía vista previa, busca esta línea, (está un poquito más arriba).

]]></b:skin>

y encima pegas esto:

#menubar h2 {display:none;}
#menubar ul {
list-style: none;
}
#menubar li {
float: left;
background-color: #990033;
border: outset 2px #ff00cc;
}
#menubar a:link, #menubar a:visited {
padding: 5px;
display: block;
color: #ffffff;
}
#menubar a:hover {
color: #660000;
background-color: #66ff33;
}

Ahora ya puedes hacer vista previa y si la página carga bien (no verás todavía ningún cambio), guarda plantilla.
Una vez guardada, entra en Elementos de la página y allí verás la Menubar.
Pon los enlaces que quieras que se vean aquí, y guarda cambios.
Cuando entres a ver blog, ya verás los botones.
Puedes modificar los colores a tu gusto, cambiando los números por los del color que quieras.

8 comentarios:

Itahisa dijo...

Hola Eulalia,

antes de nada, muchas gracias por toda la ayuda que prestas con tus blogs, es de lo más útil =)

Bien, he seguido tus pasos para poner los botones debajo de la cabecera y ha salido bien, ya tengo mis botones, peeeeeeeeeerrrrroooooo... hay algo que no sé cómo cambiar de ellos... No me gusta nada el color que tienen ni el que sale al pasar el ratón por encima y me gustaría que fueran algo más pequeños (verticalmente)... ¿Cómo cambio esto?

Muchas gracias,

Itahisa.

Eulalia dijo...

Hola itahisa.
Ya he visto tu blog. Has copiado el código de aqui y claro, han salido los colores de aquí. Fíjate que al final de la entrada digo que puedes modificar los colores a tu gusto cambiando los números que hay junto a todos los color, esos de seis cifras.
En Tuneando el blog hay un gadget para que puedas elegir colores y te da sus codigos.
Además, si vas haciendo vista previa podrás ir viendo como quedan ambos.
En cuanto a la altura del botón, no hay caso. Depende de con que navegador los ves se ven más altos o menos.
Con Firefox tienen la altura justa de las letras, con Explorer se ven un poco más altos.
La única solución seria agregarle la orden de que las letras fueran más pequeñas. Lo investigaré y ya te diré algo.
Un abrazo.

Itahisa dijo...

Muchas gracias de todos modos, seguiré pasándome por aquí a ver si averiguas algo sobre el tamaño de los botones...

Por cierto, a la Scribe se le puede poner otra barra lateral (dejarla a tres columnas)???

Eulalia dijo...

Pues no lo he probado. Pero dentro de un rato lo pruebo. Termino una entrada que estoy haciendo en Ideas y te digo algo.
Un beso.

Eulalia dijo...

itahisa: Hecho!

Itahisa dijo...

Por cierto!

¿Se pueden centrar los botones?

Eulalia dijo...

Se pueden centrar, relativamente.
Me explico. Como cada vez que añadas un enlace, se añadirá un botón, tendrías que andar modificándolo cada vez que esto sucediera.
La única manera de centrarlos es modificando la distancia del inicio al margen, para ello modifica este trocito
#menubar ul {
list-style: none;
padding-left: 50px;
}
como ves le he añadido el padding-left (si en tu plantilla es startSide lo pones así: padding-$startSide) y los pixels ves probando a ver cuantos necesitas para centrarla.
Saludos.

Itahisa dijo...

Muchas graciassssssssss ^_^