67

Añadir un menú-bar al blog

Es un hack de Beautiful Beta, muy fácil de implementar en el blog.
En solo dos pasos, tendremos una barra para menú sobre la cabecera del blog.
Pensad que estas explicaciones son para la plantilla Mínima de Blogger, si estáis usando otra, pudiera ser o no, que la colocación de los códigos fuese distinta...


[1] Vamos al html de nuestra plantilla y buscamos esto:

<div id='header-wrapper'>


Justo a continuación añadimos este código:

<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>


En el ejemplo se supone que ya tienes un elemento "Lista" añadido, de ahí el id='LinkList2', si se da el caso de que ya tenemos varios elemento "Lista" añadidos hemos de saber "cual toca" para cambiar su id. Para no complicarnos demasiado, lo mejor es poner en el id un número elevado:

<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList50' locked='true' title='Menubar' type='LinkList'/>
</b:section>



[2] En el CSS de la plantilla añadimos el código para nuestro menubar, si tenemos alguna duda de donde situar el código, lo ponemos antes de ]]></b:skin>:

#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;
}


Cambiamos los colores de los links a nuestro gusto.
Vamos a plantilla y veremos el nuevo elemento menubar sobre la cabecera, pinchamos en editar y vamos completando los campos como cuando añadimos un nuevo elemento "lista".

Podéis ver como queda en Beautiful Beta, ellos lo tienen sobre la cabecera, pero si lo queremos justo debajo de nuestra cabecera (también queda muy bien), ponemos el primer código justo después de esto :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nbgeyhtuytk (cabecera)' type='Header'/>
</b:section>


¡Gracias por tus aportes Eulalia!

Entradas Relacionadas:

67 comentarios:


Eulalia

Rosa, buenos días. Dos apreciaciones en este código:
1ª.- en la plantilla Harbor en vez de header-wrapper has de buscar outer-wrapper, que es el encabezamiento anterior a section class='header'
2ª.- lo de Link list2 antes de poner el código has de mirar cuantos elementos link list tienes, (en mi caso ya iba por el 11) o te da error al hacer vista previa.
Un abrazo.

Anónimo

Eulalia, gracias por tus aclaraciones, son siempre bien recibidas. :-)

Lo de la Harbor, así es, al igual que en la Dots también sería distinta la colocación...suelo dar la explicación para la Mínima, sino sería demasiado complicado...luego normalmente cada uno va consultando sobre la plantilla que está usando, a veces ni siquiera es original de Blogger, así que es imposible andar poniendo la explicación para todas...

Lo de los elementos, es cierto y tienes toda la razón, a veces pienso que el visitante ya se ha leído de "pe a pa" las otras entradas donde explico eso y olvido que muchas veces vienen por la entrada concreta y nunca leído lo demás...
Ahora mismo corrigo eso...
¡Un millón de gracias!

Eulalia

Un auténtico placer poder ayudar a hacer las cosas más sencillas.
por cierto, la he personalizado. he eliminado el color rojo que salía detrás del enlace, (no me gustaba, además ya tengo un background a los links), le he puesto un color diferente al a:hoover, para que cambie el color de las letras y he enmarcado cada link, añadiendo border: outset 2px #color; a la zona #menubar li {
Pensé que se enmarcaría toda la menubar, pero me ha enmarcado los links uno a uno, lo que tampoco queda mal, pues les da un aspecto de botón.
Un abrazo.

Luisa

Hola, Rosa -

¡Saludos desde California! Este menubar me gusta mucho. En mi "Lassie" blog [originalmente Rounders 3] tengo dos. En la plantilla están debajo de la línea
b:section class='crosscol' etc.

¡Te agradezco mucho la ayuda con Blogger!

Abrazos --
L

Anónimo

Luisa, por cierto que tu Lassie Blog es de los mejores diseños que he visto últimamente.

Luisa

¡Ya me puedo morir tranquila...! Un millón de gracias por este blog y las explicaciones tan claras --

L

Anónimo

Rosa si quiero poner el menubar después de la cabecera donde tengo que colocar el html, pues no lo encuentro en mi plantilla. Gracias y saludos.

Anónimo

Rosa lo he colocado aunque no se parece mucho a lo que explicas, en el caso de mi plantilla, pero bueno funciona, supongo que lo habré colocado bien. Si puedes míratelo, saludos y gracias. ;-)

Anónimo

Carlos, es exactamente lo que explico...lo has puesto debajo del header en lugar de arriba, pero es lo mismo. Quizás si podrías cambiar los colores de los enlaces o del fondo rojo al pasar el puntero, para adecuarlo más a lo que te gustaría...

Elizabeth_princess

Hola, necesito ayuda ya que quiero saber como puedo ocultar el archivo de mi blog, iba a eliminar ese elemento de mi pagina, pero temo que al hacerlo se pierdan los archivos de mis entradas pasadas, lo unico que quiero es que no este visible en mi blog, pero conservar mis archivos, espero y me haya explicado, agradecere su pronta respuesta, muchas gracias

Elizabeth_princess

soy yo de nuevo, tambien me gustaria desaparecer el enlace que sale al final del ultimo post y que dice entradas antiguas, gracias

Anónimo

Eliz@beth_princess, puedes eliminar el elemento archivos tranquilamente, los archivos se quedan en el "interior" de Blogger y si luego quieres volver a mostrarlos solo hay que añadir un nuevo elemento "archivos" y listo, no te preocupes que no se pierden.

En cuanto a lo del enlace, no soy quien para dar consejos, pero retirándolo estarás "matando" la navegación en tu blog...aunque supongo que eso es lo que quieres en realidad... no veo objeto en hacer un blog público entonces...

En fin, tu verás, busca esto en el código de tu plantilla con la casilla de "Expandir plantillas de artilugios" marcada y borralo (usa vista previa antes de guardar):

<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>

Anónimo

Felicidades por el aniversario anticipado de "El Escaparate de Rosa", y darte las gracias por tu consejo, he cambiado el fondo del menubar a un color más parecido a la cabecera y me ha quedado muy bien. Gracias otra vez. ;-) Blogtecnia.

Anónimo

Carlos, prueba (si te apetece, claro) a cambiar el css actual para el menubar por este otro, usa la vista previa por si no te gusta el resultado...


#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li {
background-color: #FF9A66;
border: 2px outset #000;
float: left;
}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: #000;
}

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

Eulalia

Hola Rosa. Ante todo feliz cumpleaños a tu blog.
Quería comentarte algo muy raro que me acaba de pasar.
Ya sabes que voy "tuneando" plantillas y dejo, en Tuneando el blog, el link a la`plantilla modificada, para que se pueda ver "in situ", no solo como queda, sinó también las instrucciones relativas a cada modelo.
He estado poniendo la menubar en alguna de ellas y en la thisaway, por motivos de estética, la he colocado encima de la cabecera y se me ha ocurrido doblarla. Todo ha ido bien y hay dos menubars, una debajo de otra. Así que he pensado que estaría bien doblarla también en Tuneando el blog, (Harbor con dos sidebars) y dejar las instrucciones de como hacerlo, pero allí me salían seguidas, como si fuera una única menubar. (He acabado quitándolo porqué no me gustaba, aparte de que perdía el sentido de la posible explicación).
Solo quería comentártelo por si se te ocurre algo o si alguien te plantea la cuestión
Un abrazo.

Anónimo

¡Sin palabras, simplemente genial! Gracias Rosa. tendré que pensarme que regalo de cumpleaños te hago,...

Anónimo

¡Ya tengo tu regalo, Rosa! Hasta Ahora te tenia junto los blogs de ayuda. Ahora sigues con lo blogs de ayuda y ademas estas con un banner en un lugar preferente de BLOGTECNIA. Espero te guste. Saludos.

Anónimo

Hola Rosa
soy nueva en esto del blog ...asi que no entiendo:((( ..
Please que e s el CSS donde esta eso??

Anónimo

labear, en la entrada digo que ante la duda lo pongamos antes de ]]></b:skin> pues el css, está justo desde ahí hacia arriba, en el comienzo del código de la plantilla body{

Anónimo

Carlos, mil gracias! aunque no era necesario, de verdad. :-)

Leandro Comeglio

"Premios BLOGSPOT"
VOTÁ al blog que crees que tiene que ganar estos premios.No pierdas ésta oportunidad de agradecer al blog que mas te ayudó,divertió,informó,etc.Para votar metete en: www.premiosblogspot.blogspot.com

Unknown

hola rosa felicidades por tu blog.como nos ayuda¡¡,mi pregunta y perdoname porque no se como se llama exactamente ,quiero que cuando se abra mi blog primero aparezca una pantalla como de presentacion y acontinuacion ya aparece el blog en si,es posible?gracias y un abrazo¡¡¡.pablo.

Anónimo

Pablo, directamente no es posible, pero podrías crear un blog con el mismo estilo del otro, con solo una entrada en la página principal donde poner el texto de bienvenida y un enlace para ir al blog original...chapucillas, pero no se me ocurre otra cosa, de hecho hay gente que tiene algo así y no queda mal.

Ita N.

Hola Rosa,

He estado intentando esto también y no consigo que me salga... Puse los códigos tal como indicas y al guardar la plantilla no me dio ningún error. El problema fue al añadir los enlaces a la menubar, porque no aparecían en el blog entre la cabecera y las entradas, sino a la izquierda de las entradas, es decir, los enlaces desplazaban las entradas hacia la derecha y desaparecía la sidebar... ¡no sé por qué pasó esto!

Luego intenté eliminar la menubar pero no encontré cómo hacerlo, así que simplemente borré los enlaces y desapareció... ¿Cómo puedo hacer que salga bien? También lo intenté como dice Eulalia en su web y nada...

Por otra parte, al ver el blog de Luisa, el Lassie blog, me quedé enamorada... Algo así es lo que me gustaría para mi blog, pero no tengo ni idea de cómo conseguirlo... ¿alguna sugerencia?

Muchísimas gracias por tu ayuda y felicidades por el aniversario de tu blog!!

Anónimo

Itahisa, eso que te pasa es porque no lo has colocado donde debe estar, sobre la cabecera.
Para eliminar el menu-bar por completo, solo has de "desandar los pasos " o sea, siguiendo las instrucciones de como lo has colocado, pues al revés, eliminado lo que has puesto.

En Lassie usan un Menú horizontal es parecido, pero no igual.

JF

yo solo puedo poner la barra esta arriba de la cabecera.
Debajo no puedo, sabrias como puedo hacerlo????
muchas gracias eh.

Anónimo

primertoque, está explicado en la entrada...

Ale

Hola Rosa, ayer conoci este blog y me parece el mas util de todos los que vi hasta ahora, asique por eso te quiero agradecer....

cambiando de tema tengo una consulta
mira mi blog y fijate por favor como puedo hacer para que no me quede tanto espacio entre el menu bar y las otras partes...(arriba, abajo), y para que me quede alineado en el medio....desde ya muchas gracias.
Saludos

Anónimo

Ale, el menú no puede alinearse en el medio, pues dependerá de cuantos botones añadas en el.
Hay que ir calculando a la hora de añadir link, para que quede lo más centrado posible...
Por eso publico distintos menús en el blog, cada uno tiene sus pros y sus contras...

El espacio que queda es porque tu plantilla tiene esos parámetros para el header, al añadir algo ahí, la cabecera se extiende añadiendo el margen y padding que tiene estipulado, si los cambias, la imagen se vería afectada.

Tal vez te quedaría mejor, añadiendo el código del menú bar, encima de <div id='content-wrapper'> en lugar de después de
<div id='header-wrapper'>

Rocío

Tienes un blog de gran ayuda para mi.
Muchas por compartir.Y gracias a Eulalia. Te encontre gracias a su blog

Anónimo

Rocío , gracias a ti.

M@ry#4#

Hola Rosa ante todo felicitarte por tu blog. Decirte que ha sido la guia que he seguido para crear mi blog.
Lo que sucede es que me gustaria que mi blog fuera mas dinámico, quiero aprender como diseñar una cabecera que se ponga un poco por encima de las entradas y la barra lateral(con una foto chula de basket claro), poner una barra lateral mas, enmarcar por separado las entradas y la columna lateral.
He intentado enmarcar pero queda fatal, puse lo de la doble barra lateral pero me salia una linea que atravesaba todo el blog de arriba a abajo a partir de la primera entrada.
Estoy desesperada con la Thisaway Blue

Unknown

Hola Rosa!

Saludos desde venezuela!

bueno he hecho eso en mi plantilla,y arriba de la menubar me salen unos codigos raros

como hago para quitarlos? jeeje

Anónimo

Alicia , seguro que es que has colocado el código en un mal lugar y parte de el se "ve" en la parte "real" de la plantilla.

Anónimo

MUY Bueno tu blog De gran ayuda para los neófitos del html
MUchas gracias
Silvia

Silvana Tapia

Hola Rosa!

Es la primera vez que un truco tuyo no me funciona del todo; estoy tratando de colocar la menu bar en este blog justo debajo del header, pero, como puedes ver, el menú no aparece horizontal sino vertical. Imaginé que tiene qué ver con el CSS pero no pude corregir el problema. ¿Qué crees que sea?

MIl gracias desde ya!

Anónimo

Silvi, aunque no estoy segura del todo, es decir, que sea eso lo que interfiere en el menu-bar, si que veo en tu código fuente que tienes esto: x;}
Al final del código...no se que es, ni porque está ahí, pero yo probaría a quitarlo.

Silvana Tapia

Gracias Rosa, enseguida lo pruebo y te cuento!

Grumpy

Jo! si yo he seguido todos los pasos, lo prometo.
porqué no lo veo?

Anónimo

Grumpy, en tu blog veo añadido el código del paso [2] pero no veo que esté el del paso [1]...

Grumpy

qué si, si está vamos que yo lo he puesto, el paso 1 pero con Linklist50..
Dios mio, que torpe soy! no pasa nada lo borro y lo vuelvo aponer.....un momento...

Dios y ahora qué hecho?

Me sale este mensaje:
"Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.

* LinkList1"
que hago? yo no confirmo nada hasta que tu no me autorices a ver si voy a borrar lo que no debo...
por fa: help me!

Anónimo

Grumpy, no, no confirmes.:D
Esa es la prueba de que el menu-bar está añadido en tu blog, si confirmas lo eliminas.
Ahora lo que tienes que hacer es ir a la parte de diseño y allí verás un gadget que pone Menubar, pincha en el y ahí tienes que ir colocando los enlaces que quieres que salgan en el menú...

Grumpy

Gracias Rosa!

si,si,si.... ya lo he visto!
Bueno seguramente no te libraras de mi, por que hago, bueno intento hacer un montón de cosas...y una es un poco grumpy-inutil con esto.
gracias por ayudarme.

Anónimo

Grumpy, y yo encantada de no librarme :D

John Schroder

Rosaaaa

estas agregando música :D al blog.... jejje pareciera que te estoy espiando pero nooooo, es que estoy buscando algo y que va no encuentro el titulo, pensé que había aprendido un poco pero que va sigo dura y cuadrada...

chauuu

Anónimo

John S. :D perdona las molestias. Llevo unos días probando algo con una radio online y procuro hacerlo a las horas que hay menos visitas...
¿Qué no encuentras? dime...

Sabrina.

Buen día Rosa, si quiero agregar otra footbar, ¿Cómo hago?

Anónimo

Sabrina ¿Quieres decir otra menu-bar pero en el footer? Si es así lo harías igual, por supuesto cambiando la id del gadegt por otra y colocando el código después de:
<div id='footer-wrapper'>

Sabrina.

No, quiero añadir otra barra de footer arriba de la que tengo. Porque la que tengo tiene un fondo para que quede bien con el texto.. y quiero agregarle más cosas, pero quedan mal con el fondo negro.. No sé si se puede.. Muchas gracias por la ayuda Rosa!

Anónimo

Sabrina Es que me despistas...no se porqué la llamas "barra de footer" :D

Pues nada, lo mismo que te he dicho pero colocando el código justo sobre el de la otra sección.

Nidia

Hola yo tengo un problema, escogía una plantilla que ya tenía dos pestañas, "HOME" y "ABOUT" pero no puedo cambiar de una a otra, es decir, no me deja publicar o pasar cosas a la otra pestaña, me podrías ayudar un poco, te paso la dirección de mi blog http://nidia-blog.blogspot.com/, muchas gracias

Nidia

Ups te dejo el enlace a mi blog Texto enlace

Anónimo

Nidia ¿Como publicar o pasar cosas? Esas pestañas son simplemente un menú, como mi barra de arriba solo que dos pestañas.
En la primera que dice Home es donde va la dirección del blog y en la segunda About lo lógico sería colocar un enlace a tu perfil...

Viviana

gracias x el link rosa, pero yo necesito poner botones... imagenes de botones y con el enlace a determinado post... no se si me explico...

Anónimo

Viviana y Sofia Tu te explicas y yo te entendí...mira lo que se consigue siguiendo los pasos de esta entrada (están debajo del header):

http://laeulalia-blogdeprobes.blogspot.com/

Blog La Pequeña Grecia

¡Rosa, qué tal! Espero no importunarte. Mil gracias por el menú-bar. Está genial. Ya lo pusimos en nuestro blog. Saludos de Caracas para ti. Una loable labor la que estás haciendo.

Qué bueno poder contar contigo.
Que sigan los éxitos.

Nuestro blog: http://lapequenagrecia.blogspot.com

RocksNRules

Rosa que tal,

He usado el código que explicaste en tu otro post "menú con sub-menús". Cuando lo ubico pegado a la sección de entradas de blog funciona perfecto. Sin embargo, cuando lo ubico justo debajo del título los sub-menús no aparecen. ¿Sabes cuál es el problema?

Dejo el comentario acá porque en el otro post los deshabilitaste.

Un saludo, mi blog es http://rocksnrulestv.blogspot.com

Anónimo

RocksNRules Y por eso los deshabilité... porque depende casi siempre de la configuración de la plantilla y no puedo estar a todas...

Unknown

Yo lo puse bajo el footer y quedo perfecto. Gracias!

Dorian Hawkmoon

Hola Rosa.
Perdona por consultarte de nuevo, pero me encuentro con un problema que no estoy siendo capaz de resolver.

Tengo un menú en un elemento html y actualmente está debajo del header ocupando el ancho del blog (zona del crosscol, creo que se llama :S )

Mas tarde he añadido una imagen como cabecera (incluyendola en la plantilla) y he querido poner el menú encima de la cabecera, asi que modifiqué la plantilla en el header-wrapper para que se pudiera añadir elementos ahí.

El problema es que al ir a colocar el menú encima o debajo de la cabecera (pero dentro del header) se pone encima de la imagen.

Ya probe cambiando medidas de la altura pero nada y no se que probar. ¿Alguna sugerencia?

Gracias por tu tiempo. Y sobre todo por tu blog, aprendo mucho!!

Mi blog --> http://elrincondelordenador.blogspot.com/

Anónimo

Dragon NegroPues prueba colocando el código del menú fuera del gadget y directamente en la plantilla sobre: <div id='header-wrapper'>

Por cierto, una cosa que he visto en tu código fuente y que es incorrecta, lo que pudiera estar dando algún problema del tipo a ese que comentas de no tomar los cambios... tienes en el CSS anotaciones hechas por ejemplo como esta:

<!-- OCULTAR LA NAVBAR DE BLOGGER -->

Y eso es incorrecto, tendría que estar así:

/* OCULTAR LA NAVBAR DE BLOGGER */

En el CSS no pueden usarse ese tipo de acotaciones, solo en HTML, podría dar lugar a serios problemas...

Dorian Hawkmoon

Muchas gracias, Rosa, ya está resuelto.

Y gracias por decirme lo de los comentarios, al principio no sabia muy bien y terminé poniendo esa acotación para todo, ya está corregido y ahora entiendo porqué tuve que duplicar algunas lineas de CSS para que funcionaran :D

Graciasss!!

eduiracheta

Rosa tengo otra pequeña duda. en mi blog tengo la plantilla "sencillo" del nuevo diseñador de blogger, a la hora de intentar hacer el menú; no me encuentra el código id='header-wrapper' y la verdad q por más q intento no consigo poner el menú. ya se que tienes mucho trabajo pero me podrías dar alguna solución?
gracias de nuevo.

Anónimo

Ed's Gallery Creo que sería esta la línea:
<div class='header-cap-bottom cap-bottom'>

Centro de Traducciones y Servicios Multiples

necesito ayuda con mi blog.....
Ya hice los menú
Inicio - Servicios - Contactos

pero cuando les hago clik encima de ellos queda en mi misma pagina, no me llev a otra pagina o a otra vista

como se hace?????

Centro de Traducciones y Servicios Multiples

como se agrega el contenido en cada una de las pestañas del menu de mi blog????

Anónimo

Centro

http://elescaparatederosa.blogspot.com/2009/09/como-anadir-los-enlaces-en-un-menu.html

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S