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...
a las
Etiquetas:
Trucos imagenes
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
19 comentarios:
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
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)
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
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'>
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.
upppssss
Perdona el lapsus, ahora veo que si era donde tu me indicabas.
ayssssss, las prisas no son buenas, jejejeje
Besitos, Isabel
No son buenas para nada Isa, pero sobretodo tratándose de plantillas, menos aún... ;-)
Me alegro te saliese todo bien!!
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
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...
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
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.
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
Oscar, prueba dejando a cero en el código el "border-botton:1px
Rosa como puedo cambiar el color de la palabra o mejor dicho el color de la fuente?
espero tu respuesta :)
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.
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
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/
ѕιяια 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
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.
Comentar con el formulario antiguo