Crear vuestra propia barra de navegación o navbar | blogsmadeinspain

Aquí encontrarás plantillas para Blogger diseñadas por mí totalmente gratuitas, conocerás como se manipulan imágenes, fondos, texto, enlaces o links, los mejores widgets o gadgets, herramientas y utilidades, etc... Y además puedo diseñarte una plantilla exclusiva para tí, totalmente a tu gusto, y solo por 38 Euros.

Crear vuestra propia barra de navegación o navbar

Si os fijáis en la parte superior de mi blog, donde debería estar la barra de navegación o navbar de Blogger, he colocado una barra totalmente personalizada y con varios menus desplegables:

Pues vosotros podéis tener también una para vuestro blog, personalizada a vuestro gusto y sin necesidad de tener ningún conocimiento de lenguaje html o javascript.

Leer completo...[+/-]

    Tan fácil como acceder a NetworkBar Generator, registraros y crear vuestra barra de navegación para poder colocarla en la parte superior de vuestro blog. El resultado puede llegar a ser espectacular.

    El registro es rápido y sencillo. Cuando os halláis registrado entraréis en el menú para configurar vuestra barra, y os encontraréis con los siguientes elementos:

    Title: Si queréis que aparezca un título en la parte izquierda de la barra, colocarlo aquí. En mi caso he colocado el nombre de mi blog. Si no colocáis nada, no aparecerá ningún título.

    CSS Style Preset: Es el estilo del fondo de la barra (en mi caso es un color verde oliva que se difumina hacia el centro de la barra). Hay 6 estilos diferentes, aunque len os que tienen un color plano, después podréis definir el color que queráis dentro de una gama muy amplia.

    Title Font: El tipo de letra para el título de vuestra barra, que se situará a la izquierda. Muchos tipos diferentes y algunos muy originales.

    Title Size: Tamaño para la letra del título.

    Title Color: Color para el el título de la barra.

    Select Font Color: Color para el texto de los menus desplegables.

    Select Background: Color para el fondo de los menus desplegables.

    Bar Background: Color para la barra de navegación. Podréis escoger multitud de colores pero con color plano, y no con el efecto de difuminado que yo tengo en mi barra de navegación. Si queréis un estilo como el mío, dejar ese recuadro sin rellenar y seleccionar uno de los estilos en "CSS Style Preset" que posee difuminado en el color.

    Inmediatamente debajo de este menú tenéis tres columnas para poder colocar menus desplegables con un máximo de tres. Ahí colocáis en "Name" el nombre que aparecerá en el menú; y en los "link" el nombre y la ruta del enlace. Para colocar varios enlaces dentro de un mismo menú desplegable, ir pinchando en "Add a row". Y para ir grabando vuestros avances pinchar en "Preview".

    Cuando halláis terminado, pinchar en "Get The Code", y os dará el código que tenéis que pegar en vuestra plantilla de la forma que os indico más adelante.

    Antes veamos algunos aspectos importantes:

    Una vez registrados y configurada vuestra navbar os guardará el diseño, y cada vez que entréis en NetworkBar Generator la veréis en pantalla. Podéis modificarla cuantas veces queráis, y se modificará automáticamente en el blog que la tengáis colocada. Pero si queréis diseñar otra para otro blog sin borrar la que ya tenéis instalada, debéis registraros con otro nombre y crear otra navbar. Esto es importante, no olvidéis que cada vez que modifiquéis el diseño o la configuración de menus, se actualizará automáticamente en el blog que la tengáis instalada.

    ¿Donde colocar en la plantilla el código que nos dan?

    Entrad en "Diseño/Edición de HTML", sin expandir artilugios, y colocar el código completo justo debajo de:

    <body>

    <div id='outer-wrapper'><div id='wrap2'>

    Esta línea podría variar dependiendo del tipo de plantilla que uséis, si no encontráis nada parecido a esto, colocarlo entonces justo arriba de:

    <div id='header-wrapper'>

    Dos últimas puntualizaciones: Es posible que en "Vista previa" no veáis la navbar, y también comentaros que esta nueva navbar no es incompatible con la de Blogger, podéis tener las dos al mismo tiempo, aunque estéticamente no queda demasiado bien.

    Como os comenté en una edición de este post, he tenido esta navbar alojada en un blog de pruebas durante varios días y ha funcionado a la perfección en todas las franjas horarias. Así que me he decidido a colocarla ya en este blog. Espero que os sea de utilidad.

    Aunque si la página origen está colapsada, vuestro blog tardará bastante en cargar. Menos mal que esto se produce pocas veces.

59 comentarios:

Gore dijo...

yo la he colocado hoy y no he tenido ningun problema al visualizar el blog
=)

Anónimo dijo...

sigo teniendo el problema con lo de la blogueria, lo hago todo como me decis, pero luego el boton aparece pero sin embargo, sale desde el principio todo el texto tanto lo que deberia salir escondido como lo otro, ?solucion??

muchas graciass"

blogsmadeinspain dijo...

si te es posible mándame la dirección del blog donde lo has colocado y veré el problema mejor.

Anónimo dijo...

www.elcallejondiagon.co.cc en el post con título "Informacion sobre los Cuentos de Beedle el Bardo, se encuentra un claro ejemplo.

blogsmadeinspain dijo...

Anónimo, no puedo detectar nada por tu código fuente. Si quieres que trate de detectarte el problema mándame la edición de tu plantilla en xml, y también la edición html de la entrada donde lo has colocado. Trataré de localizar donde puede estar el problema, ya que los códigos funcionan de maravilla, como puedes ver en algunas de mis entradas.

Anónimo dijo...

ah, vale, osea, copio el HTML en word y la edicion HTML de una entrada en la que haya usado el código, no es así?

voy a hacerlo

blogsmadeinspain dijo...

Para la plantilla puedes entrar en "Diseño/Edición de HTML" y pulsar el botón "Guardar plantilla completa", te guardará un archivo con extensión xml.
Mándame ese archivo y el archivo de Word donde hayas copiado la edición html de la entrada donde lo tengas colocado.
A ver si puedo ayudarte.

Anónimo dijo...

ya te lo he enviado!.

se me a olvidado comentarte una cosa,

me gustaría colocar unas imágenes para ver noticias antiguas y mas recientes en lugar de el texto,

¿me indicas lo que tengo que hacer en el correo junto lo otro?

¡¡muchas gracias!!

SσичяJ dijo...

oye bro, quisiera saber como hacer eso de "Leer Completo...[+/-]" para que un post no ocupe tanto espacio, Gracias (estuve buscando aqui a ver si ya lo habia enseñado pero no encontre)

blogsmadeinspain dijo...

SonyRJ, visita este post de La Bloguería, ahí te explican como hacerlo:
http://lablogueria.blogspot.com/2007/11/menu-expandible-switch.html

Anónimo dijo...

blogger acaba de actualizar el sistema y esto no vale para nada!!

no puedes publicar cosas en las sidebars y acabo de subir una de tus plantillas copiando y pegando el codigo (porque tampoco te deja subirlas de archivo xml) y no se ven las imagenes ni nada todo a la izquierda pegado. :(((

blogger me ha defraudado.

¿sabes si se puede hacer algo?

blogsmadeinspain dijo...

Anónimo, no tengo ni edea de lo que me estás hablando, creo que tu PC te ha jugado una mala pasada.
Blogger no ha hecho desde hace ya algún tiempo ninguna actualización, se pueden subir perfectamente archivos de plantillas xml, y puedes pegar a la sidebar los elementos que quieras.
Lo e no ver las imagenes puede ser debido al poco ancho de banda de Google Pages, donde tengo alojadas la mayoría de las imageenes que componen mis plantillas, aunque ahora uso otro servicio de alojamiento.
Lee los post que he dedicado a "alojar las imagenes en servidor gratuito de alojamiento", esto te resuelve el problema de no ver las imageenes.
Respecto a todo lo demás... me parece que andas un poco perdido.

Anónimo dijo...

ah, ya está, si debio ser algo del ordenador, es que en lugar de "DISEÑO" me aparecio una pestaña que ddecia PLANTILLA y solo podias elegir las de blogger, pero ya esta.

Pero es que me pasa una cosa. Me he descargado de miarroba un tagboard para colcoarlo en mi blog pero es que cuando coloco el codigo en una entrada (donde quiero colocarlo) no me aparece nada una vez publicado

¿que ocurre?

blogsmadeinspain dijo...

Tendrás que darme más pistas sobre lo que te has descargado, sino será imposible que pueda saber lo que te ocurre. Mándame los códigos por e-mail o indícame en enlace de donde lo descargaste.

Consejodesabios dijo...

Te gustaria un intercambio de enlaces con consejodesabiosandujar.blogspot.com?

blogsmadeinspain dijo...

consejodesabios, me parece bien. Además veo que tú también tienes una columna con "Blogs amigas", igual que yo, si te parece bien ahí podemos colocar los enlaces mutuos.

Consejodesabios dijo...

De acuerdo, yo ya te he agregado en la columna de webs amigas. Espero que tú hagas lo mismo.

Saludos

blogsmadeinspain dijo...

o.k., consejodesabios, ya puedes ver tu enlace en mi columna de "Blogs Amigos". Bienvenido.

SonyRJ dijo...

ok, no te habia agradecido por lo de "Leer Completo", perdona, he estado desconectado :s, bueno, GRACIAS DE NUEVO

PD. oye, yo tambien quisiera que me colocaras en tus amigos, yo ya te tengo a ti ;)

-emirie- dijo...

Hi! Your site is just click away from my baby blog http://babyerika.blogspot.com/ I always visit your site because it is very informative. Can you give me an example of "Preset CSS style" like the style of your toolbar? Thanks.

blogsmadeinspain dijo...

SonyRJ, no hay ningún problema te pondré entre mis blogs amigos con tu blog de descargas.

emirie, my "CSS Style Preset" is "Style 4"
Title Font: 214"Japanese_Brush"
Title Size: "14"
Title Color: "FFFFFF"
Select Font Color: "FFFFFF"
Select Background: "99CC99"
Bar Baqrckground: "nothing"

-emirie- dijo...

Entiendo. Thanks.

eme_M_eme dijo...

disculpa y como borro la navbar de blogger

blogsmadeinspain dijo...

eme_M_eme, mándame un e-mail con el widget de mi sidebar y te mandaré los códigos que debes añadir para hacer desaparecer la barra de Blogger.

veinteañera dijo...

Muchas gracias, me ha quedado perfecto^^, se integra a la perfección con el diseño de mi blog.
Y lo he testado en varios navegadores y sí, funciona.

Besos!

Balbino de Araujo dijo...

Obrigado pela dica.postei no blog.
Abraços,
Balbino de Araujo

Pauly dijo...

Me salvaste la vida! gracias! un exelente aporte!

Anónimo dijo...

Hola,
tu blog es excelnte, lo acoba de añadir a favoritos.

Tengo un pequeño problema que espero sepas resolver. Cuando sustituyo una plantilla de blogger por otra de finalsense desaparece la navbar de blogger. ¿cómo hago para que vuelva a aparecer ?

Saludos y gracias de antemano

Daniela Fiano dijo...

Hola, acabo de seguir tus insrucciones y ya tengo mi primer nav bar preciosa recien salida del horno!! estoy muy contenta!!! muchisimas gracias por tatos consejos utiles. Suerte

Daniela

jorgedegesell dijo...

hola quiero sacar la navbar de blogger pero no entiendo lo que le decis a eme_M_eme, queres que te mande el codigo generado que iria en el lugar de la de blogger?
gracias por la ayuda
Jorge

blogsmadeinspain dijo...

jorgedegersell, te puedo mandar los códigos necesarios para ahcer desaparecer la barra de Blogger, pero aquí en los comentarios no es posible poner códigos html, por lo que debes mandarme un e-mail con el elemento que tengo en mi sidebar llamado "Envíame un E-mail", y te contestaré con las instrucciones.

apuntes juveniles dijo...

hola como estas otra ves tengo problema ahira es con la barra no la puedo instalar me sale un error este es el erro que sale (No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The markup in the document following the root element must be well-formed.
creo que estoy haciendo algo mal hermano ayudame en esto si

BakaNeko dijo...

Un saludo, te felicito por este blog que me ha sido de gran ayuda pero quisiera seber si me puedes ayudar.
Soy algo nuevo con los blogs me las arregle para agregar una barra de navegacion pero quiero usar una barra que hice en flash en www.webtaller.com una vez introduje un flash en una entrada y resulto bien pero esta barra no la puedo ver ni usar, solo la noto cuando pongo "selecionar todo".
De antemano te agradezco.

BakaNeko dijo...

Lo olvidava, tambien me gustaria que me ayudases a enlazar los botones de la barra de navegacion a las entradas del mismo blog.
Gracias

blogsmadeinspain dijo...

BakaNeko, respecto al tema de la barra en flash no puedo ayudarte, no tengo ni idea de ese tema.
Y respecto a enlazar entradas e tu blog, simplemente debes colocar en la URL del enlace o link el nombre completo de la URL de tu entrada. Puedes obtenerla pinchando sobre el título e la entrada que quieras en tu blog y la URL completa que te salga en tu navegador esa será la página debes enlazar.
A modo de ejemplo te pondré un nombre completo de una de las entradas de Blogs madeinspain:

http://blogsmadeinspain.blogspot.com/2008/08/crear-vuestra-propia-barra-de-navegacin.html

BakaNeko dijo...

Entiendo, gracias por lo del enlace lo del banner ya vere como lo hago y felicitaciones por este blog, sigue así.

Anónimo dijo...

Hola me llamo Miriam,colaboro con una agencia artistica y les estoy haciendo un blog, me gustaria saber si me podrias facilitar el código de alguna plantilla que tenga que ver con la música, no sé si conoces el grupo Bordón 4, va a ser un blog dedicado a ellos y necesito una plantilla que le pegue,gracias por adelantado.

blogsmadeinspain dijo...

Miriam, lo siento, pero yo no tengo ninguna plantilla diseñada con esa temática. Aunque tengo en proyecto realizar alguna, pero ando muy escaso de tiempo.
Pásate por Btemplates.com , ahí encontrarás seguramente alguna que se adapte a tus gustos.

Anónimo dijo...

Soy Miriam,muchas gracias, otra cosita, lo del menu de arriba para kitar el que tengo de blogger, es decir, networkBar Generator, el ponerlo y el registro es gratis? Ya de verdad que no te molesto mas, muchas gracias por todo,un saludo.

blogsmadeinspain dijo...

Gratis total, solo tienes que registrarte y comenzar a diseñar tu navbar particular.

migue dijo...

He puesto mi navbar, pero ahora todo me sale un poco salido de la pantalla. Si no me entiendes vas a mi blog y lo ves la dirección es esta:
http://todovariedades928.blogspot.com/
Porfavor responde

blogsmadeinspain dijo...

migue, has desestabilizado el equilibrio en los tamaños al colocar la navbar. Tendrás que quitarla o mandarme un e-mail para poder indicarte los códigos que debes modificar.
Es que Blogger no deja colocar códigos html en comentarios.

migue dijo...

No me funciona el outlook express en el ordenador, así que te mando el e-mail desde hotmail.

migue dijo...

Y ahora tampoco funcionan los comentarios en el blog.¿Me puedes ayudar?Gracias.

blogsmadeinspain dijo...

migue, lo de los comentarios de be ser configuración de Blogger. Vete al administrador, a "configuación" y mira todo lo que tienes activado o desactivado relativo a mensajes, y sobre todo activa que cualquiera pueda dejar un mensaje.
Respecto al e-mail no me ha llegado nada. Si tienes problemas escribe aquí tu e-mail, pero sustituye el símbolo @ por (arroba)... Por aquello del spam.
Te responderé a tu dirección de e-mail con las modificaciones en los códigos necesarios.

migue dijo...

mi e-mail es:
miguelholmes(arroba)hotmail.com

migue dijo...

¡Y gracias por lo de los comentarios! Resulta que tenía puesta una cosa que no permitía poner comentarios. He puesto ventana emergente para hacer los comentarios y ya si funcionan.
Te he enlazado a mi blog.
¡Muchas gracias otra vez!

Amelia Tierno dijo...

Hola, he colocado la nav bar en mi blog, pero solo se ve la mitad de la barra, la otra mitad la oculta la imagen que tengo en la cabecera, ¿cómo lo puedo solucionar?
Gracias

blogsmadeinspain dijo...

Amelia, si te refieres a este blog http://informaticaenelellacuria.blogspot.com/
yo lo veo perfectamente, tanto con IE como con Firefox. ¿Qué navegador y versión usas tú?

Amelia Tierno dijo...

El blog al que me refiero en el comentario anterior es
http://auladetecnologias.blogspot.com/
Ya he encontrado el porqué me aparecía parcialmente oculta la barra de navegación que he personalizado.
La razón es el "Título".
Yo dejaba en blanco esta casilla porque en un principio no quería que apareciese nada.
He probado a escribir el texto, y a cambiar el tamaño de la letra en el "Título" y variaba el aspecto de la barra en el blog, aumnetaba su altura y ya no se solapa con la imagen de la cabecera, o con la barra de blogger en el caso en el que ésta aparezca.
Gracias, sigo haciendo pruebas para mejorar el aspecto de la barra, pues parece que no queda muy integrada.
¿Cómo consigues el aspecto "degradado"?
Gracias por todo.

blogsmadeinspain dijo...

Amelia, es una de las opciones que te da la web. Creo que está en Estilo.

evadevicente dijo...

no me funciona, no puede verse como la tuya

blogsmadeinspain dijo...

evadeviente, lee el final del post. Ahí informo de que este servicio se ha caido o funciona ahora muy mal. Yo he tenido que quitar mi navbar.

Cuando averigue de otro servicio gratuito parecido... os lo haré saber.

Amelia Tierno dijo...

La navbar estuvo unos días sin funcionar, los primeros días de agosto, pero ahora de nuevo aparece activa y funciona a la perfección.
Lo podéis comprobar en
http://auladetecnologias.blogspot.com/

blogsmadeinspain dijo...

Amelia Tierno, ese servicio lleva varios meses dando problemas. Supongo que se satura con mucha más rapidez que antes.
De todas formas actualmente funciona, pero yo no lo recomiendo... está dando muchos problemas.

Manuel Ruda dijo...

Mi problema es que no consigo quitar la barra navbar, logro poner la barra que yo he puesto , pero la barra navbar no hay manera. que puedo hacer? mi blog es www.manoloruda.com

Blogsmadeinspain dijo...

Manuel, aquí no puedo colocar códigos html. Mándame un e-mail y te enviaré las instrucciones para que no te aparezca la navbar de Blogger. Es fácil.

ItaCHi dijo...

Hola, disculpa, pero como se pone la navbar, he intentado ponerla en mi blog el cual es www.wweenespmexico.com.ar, pero me sale este error: No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Element type "style" must be followed by either attribute specifications, ">" or "/>".

Espero que me puedas ayudar, gracias.

Blogsmadeinspain dijo...

ItaCHi, al final de la explicación tienes las instrucciones para colocarla en la plantilla. Si no te funciona bien, podría ser debido a que no copias todos los códigos necesarios, falta algún código, o simplemente que tu plantilla no sea compatible con esa navbar.
Sigue inténtandolo, pero siempre haciendo una copia de seguridad de tu plantilla antes de cualquier cambio.
A ver si tienes suerte y lo consigues.

Antonio