19

Navbar personalizada

¿Has visto en algunas web/Blog una barra en la parte superior que ocupa en horizontal todo el ancho de la página?
Normalmente es usada para difundir Firefox, pero puede ser personalizada para mostrar lo que queramos e incluso con imagen. Podemos personalizar el color, el ancho de la barra, el borde e incluso el tamaño del texto.
Antes de colocarla has de ocultar o eliminar la navbar de Blogger, sino saldría esta arriba y la de Blogger a continuación. Si no sabes como quitar la navbar de Blogger mira aquí.

Se coloca este código justo después del <head>:

<div style=' background-color:#c08020; border-bottom: 1px solid #000; margin: 0 0 5px 0; padding: 4px 0; font-size: 14px;'>
<img alt='BARRA' src='URL DE TU IMAGEN' style='vertical-align: text-bottom;'/>
TEXTO A MOSTRAR
</div>

Os dejo un par de ejemplos...


Entradas Relacionadas:

19 comentarios:


baghyra

Hola Rosa!!

Interesante propuesta, la pondré en práctica.

Como te comenté, hace poquito tiempo que me iniciado en tener un blog, y gracias a ti estoy lo estoy personalizándolo a mi gusto.

Aún me gustaría añadir algunas cosas más, que seguro encontraré en tu blog.

Ahora lo que más trae de cabeza es quitar el subrayado de los links en el sidebar, los que tengo en el menú desplegable y los que aparecen en las entradas.

He puesto en práctica lo que me comentas en el mail, y no me ha dado resultado.

Cambiar: "underline" por "none" en

a:hover {
color:$titlecolor;
text-decoration:underline;
}

Tienes alguna otra idea?

Y aprovecho este comentario para ver si me puedes ayudar a como dar más espacio o interlineado a los diferentes "bloques" del sidebar.
Dar más espacio entre el perfil y por ejemplo el javascript y meter más hueco entre este y el menú desplegable, no se si me he explicado.

Gracias por la ayuda que prestas con este fantástico blog. Está genial.

Saludos, Isabel

Rosa

Baghyra, ves como te decía que viendo el blog sería más fácil...

Lo de los links cambia el underline por none pero aquí:

/* Links
----------------------------------------------- */
a:link {
color: #ffffff;
text-decoration:underline;}


Lo de separar tus widgets en la sidebar, prueba en
.main .widget {
margin: 0 13px 4px 13px;
}

Aumentando el 4px por un número mayor (usa la vista previa para no estropear nada)

Gabriela

querida rosa:

gracias a ti estoy consiguiendo mas o menos el diseño de la plantilla.

sabes, si te fijas en mi blog donde van los cometarios puse la imagen de un sol, pero me GUSTARIA QUE ME QUEDARA MAS HACIA LA IZQUIERDA, PARA NO SER TAPADO POR LAS LETRAS,
A VER SI ME DAS UNA AYUDITA.

GRACIAS

Rosa

Hola gabriela, creo que has encajado la imagen dentro del link de comentarios, revisa a ver...tiene que estar aquí:
<b:if cond='data:post.allowComments'><img src="http://url_de_tu_imagen"/>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

Baghyra

Gracias Rosa!!!

Me ha funcionado ;-))

Era la única línea en la que me falta el "none" jajajaja

También he solucionado el interlineado de los bloques del sidebar, pero trasteando en la plantilla lo que he tenido que tocar han sido los valores siguientes (lo pongo por si a alguien le interesa), donde tu me indicabas a mi no me hacía nada:

/* Sidebar Boxes
----------------------------------------------- */

.sidebar .widget {
margin:0.5em 1px 4.25em;
padding:0 0px;
border:0px
}


Únicamente he aumentado hasta 4.25 este valor.

Gracias por la orientación. Me ha servido de mucho.

Sigo con cambios, así que seguramente te preguntaré alguna cosilla más ;-)

Saludos, Isabel

P.D. Gabriela, gracias por tu comentario en mi blog. Besillos.

Baghyra

upppssss

Perdona el lapsus, ahora veo que si era donde tu me indicabas.

ayssssss, las prisas no son buenas, jejejeje

Besitos, Isabel

Rosa

No son buenas para nada Isa, pero sobretodo tratándose de plantillas, menos aún... ;-)
Me alegro te saliese todo bien!!

Mery

hola rosa!

te queria hacer una pregunta...me gustaria cambiar el aspecto de mi blog: o bien poner 2 sidebar y las fotografias en el medio o bien ensanchar el area para las entradas,porque veo que hay mucho espacio desaprobechado la izquierda de mi blog.si pudieras ayudarme...
gracias. besoss

Rosa

Mery, en tu plantilla no es nada difícil hacer lo que quieres, eso si, ten en cuenta que para que no te quede fea tendrás que aumentar también el tamaño de la cabecera y entonces habrá que cambiar la foto, aunque también puedes dejarla como está eso va en gustos...

Dime exactamente que quieres hacer...

Resident Evil

Linda, ¿como le hago para modificar la imagen de la cabecera? Es decir, me queda muy grande o demaciado pequeña y no se acomoda al tamaño de la pantalla tal y como te quedo a ti. Te agradeceria explicaras como personallizarla como la tuya. Un abrazo

Rosa

Hola resident!!

Si subes la imagen de cabecera con la opción que te da Blogger, en la parte de editar la plantilla, has de procurar que la imagen tenga el mismo tamaño que el ancho de tu blog. He visto en tu blog que el ancho es 660px.

Óscar

hola, antes de nada agradecerte enormemente la ayuda e información que ponéis al alcance de los novatos como yo.

decirte que he cojido un par de cosas de tu web y las he modificado como la barra de iconos en el lateral que queda muy pero que muy original.

estoy intentando esto de la barra encima del blog, y por más que aumento de tamaño e intento ajustar a la dimensión de mi blog, siempre me quedan arriba y abajo dos lineas finas en color marrón claro, o ocre, que no se como quitarlas... si supieras y me ayudaras otra cosa más para agradecerte.

un saludo y gracias

Rosa

Oscar, prueba dejando a cero en el código el "border-botton:1px

Anónimo

Rosa como puedo cambiar el color de la palabra o mejor dicho el color de la fuente?
espero tu respuesta :)

Rosa

Anonimo, coloca el texto en el código entre estas tags:

<span style='color: #fff;'>TEXTO A MOSTRAR</span>

En el ejemplo he puesto el color #fff, o sea, blanco.

La Verdad Si Importa

Se que este post lo has hecho hace bastante, pero necesito que me ayudes. Necesito ver la navbar común. Es que apliqué una plantilla que no la trae incluida y yo quiero poder verla. Me gustaria que contestaras a mi pedido. Gracias

Rosa

La Verdad Si Importa No te preocupes...contesto igual en entradas antiguas que en las últimas. ;)

Ve a la parte de Edición HTML de tu panel y dentro del código de tu plantilla localiza esto:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Borralo y ya está.

ѕιяια

como has puesto las letras "el escaparate de rosa" a la izquierda? es que a mi x defecto se me pone en el centro...
podrias ayudarme:((
graciaaaas:)

mi blog: http://siria-star.blogspot.com/

Rosa

ѕιяια Bueno no hay comparación... mi header está dividido en dos y el texto no es una imagen como en tu caso.
Localiza esto en la plantilla:

#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
Y donde dice center center cambialo por left a ver si da resultado, aunque dependerá del diseño, el espacio y todas esas cosas...

Publicar un comentario en la entrada

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