La apariencia de la barra es estilo minimalista y nos recuerda al estilo actual de los productos de Google; en ésta podrás colocar cualquier gadget, en el ejemplo voy a poner un menú usando la lista de enlaces de Blogger y un buscador que agregaré usando un gadget con la opción de HTML/Javascript.
Creando las secciones, podrás agregar enlaces fácilmente, sin necesidad de ingresar de nuevo a la edición de HTML de la plantilla, o también poner ahí cualquier otra cosa fácilmente desde Diseño, en la nueva interfaz.
Para el menú vamos a usar el CSS que usábamos anteriormente para los enlaces de navegación de Blogger estilo YouTube, y para el buscador, usaremos uno minimalista que me encanta y que ya antes había explicado Gema como agregarlo.
La barra la puedes ver a continuación en la siguiente imagen, y para verla en acción en el blog de demostración:
Paso 1. Primero agregamos los estilos o CSS, yendo a Plantilla > Diseñador de plantillas > Avanzado > Añadir CSS, y lo ponemos en el campo:
/*Barra fija en el top*/
#top-fijo{
width:100%;
height:55px;
margin:0 auto;
padding:0;
position:fixed;
left:0;
top:0;
z-index:20;
background:#f2f2f2;
border-bottom:1px solid #ebe8e8;
overflow:hidden;
}
#top { /*el contenedor que centrará el contenido de los gadgets*/
width:980px;
margin:5px auto;
height:50px;
text-align: left;
}
* html #top-fijo {/*IE6*/
position:absolute;
top:0;
left:0;
}
/*Estilos de la lista de enlaces*/
#LinkList1 ul {
width:650px; /*ancho del menú*/
height:45px;
float:left;
margin: 8px 0 0 0;
clear:both;
}
#LinkList1 ul li{
list-style:none;
float:left;
margin:0 0 0 10px;
}
#LinkList1 li a{
display:inline-block;
border:1px solid #DDD;
border-radius:3px;
text-shadow:0 1px 1px #fff;
text-decoration:none;
font: bold 11px Sans-Serif;
padding:6px 10px;
white-space:nowrap;
vertical-align:middle;
color: #666;
background: transparent;
}
#LinkList1 li a:hover, #Linklist1 li a:focus {
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
#LinkList1 li a:active {
border: 1px solid #AAA;
border-bottom-color: #CCC;
border-top-color: #999;
-webkit-box-shadow: inset 0 1px 2px #aaa;
-moz-box-shadow:inset 0 1px 2px #aaa;
box-shadow:inset 0 1px 2px #aaa;
background:-webkit-linear-gradient(top, #E6E6E6, gainsboro);
background:-moz-linear-gradient(top, #E6E6E6, gainsboro);
background:-ms-linear-gradient(top, #E6E6E6, gainsboro);
background:-o-linear-gradient(top, #E6E6E6, gainsboro);
}
/*Estilos del Buscador*/
.buscador{
background:#fcfcfc;
border:1px solid #e6e4e4;
width:225px;
height:27px;
margin-top:9px;
padding-left:4px;
color:#919191;
line-height:28px;
cursor:pointer;
}
Paso 2. Guarda lo que agregaste en "Aplicar al blog".
Paso 3. Ve a la edición de HTML de la plantilla, y con la ayuda de Crtl F, buscas <body>, en la nuevas plantillas viene así: <body expr:class='"loading" + data:blog.mobileClass'>, inmediatamente después agregas esto:
<div id='top-fijo'>
<div id='top'>
<div id='top-left' style='width:69%; float:left;'>
<b:section id='top-l'>
</b:section>
</div>
<div id='top-r' style='width:29%; float:right;'>
<b:section id='top-2'>
</b:section>
</div><div style='clear: both'/>
</div>
</div>
Paso 4. Verifica en vista previa, ahora podrás ver la barra, aunque sin ningún elemento; si todo luce bien guarda los cambios.
Paso 5. Ahora falta agregar los gadgets y para ello vas a Diseño (en la nueva interfaz), e identifica las secciones que creaste, que se verán así:
Paso 6. En la sección de la izquierda, agregas el Gadget de "Lista de Enlaces", escribiendo ahí todos los enlaces que quieras poner, no le pongas ningún título...
<form action="http://search.blogger.com/"
name="b-search"><input value="miblog.blogspot.com/" name="bl_url" type="hidden"/>
<input class="buscador" onfocus="if (this.value == "Buscar...") this.value = "";" value="Buscar..." name="as_q" onblur="if (this.value == "") this.value = "Buscar...";" type="text"/>
</form>
Paso 8. Hecho esto, sólo guarda los cambios en Guardar disposición (en la nueva interfaz).
Listo, ya tienes una barra flotante con un menú y un buscador ;)
Notas:
- El CSS está especificado pensando en que es tu primera lista de enlaces, si es la segunda o tercera habrá que cambiar los ID's, blogger las va numerando de forma sucesiva: LinkList1, LinkList2...
- Esto funciona bien en todos los navegadores, en el caso de los botones, hay algunas pequeñas diferencias en la apariencia en versiones anteriores de IE8 (los efectos y redondes) que no es para preocuparse puesto que la esquinas redondeadas son muy sutiles.
- En IE6 la barra no flotará aunque todo luce igual (excepto esquinas redondeadas en los enlaces) y no supone ningún problema estético.
- En el ancho (width) del #top tendrás que tomar en cuenta el ancho de tu plantilla, y no debería ser mayor.
Buenas Karla,
ResponderEliminarQue bueno! Me encanta. Le cambiare un poco los colores para adaptarlo a mi blog, y listo.
Pero le veo un problema. Cuando le pongo las lista de enlaces, encima de los botones me aparece una raya discontinua gris que queda horrorosa en la barra. ¿Sabes a lo que me refiero?
FIJATE: www.mariavalverdefansclub.com
Gracias ;)
Ya la veo y se ve muy cool Marçal M., bueno eso sucede por que algunas plantillas tienen especificado el borde para los elementos de lista.
EliminarEspecificamente te hablo de esto:
.widget ul li, .widget #ArchiveList ul.flat li {
border-top: dashed 1px #CCC;
...
Pero, no te preocupes, lo puedes solucionar si en:
#LinkList1 ul li{
Agregas:
border:0;
...y listo ;)
Me cuentas...
Perfecto!! Solucionado: eres genial.
EliminarYa puedes verlo en la web, que tiene un aspecto, ahora si, genial: www.mariavalverdefansclub.com
Por otra parte, Karla, me gustaría añadirle un texto al lado de los botones de los enlaces, ya sea creando otra división editando el gadget o algo... Por que por ejemplo, si en el gadget de enlaces pongo capítulos de una serie, me gustaría que en la barra pudiese poner por ejemplo: CAPITULOS, y al lado ya saliesen los botones.
ResponderEliminarGracias por tu ayuda ;)
Eso lo puedes lograr de dos formas:
Eliminar1. Agregando otra sección y poner el gadget y darle estilos a éste. Si lo haces así garantizas que se visualice correctamente en todos lo navegadores incluso en IE6.
2. Agregar otro gadget en la misma sección, y posicionarlo con posicion absoluta y moverlo con top y left para ponerlo donde deseas, el asunto es que no funcionará en IE6, aunque si en IE7, aunque no te lo puedo asegurar, tendría que verificarlo.
En un post posterior explicaré como agregar una tercera sección ;)
Pues me esperaré a que hagas ese post, que me interesa más la opción 1.
EliminarMUCHAS GRACIAS.
Ok Marçal M., entonces, esté pendiente ;)
EliminarExcelente Karla, lo veo muy bien pero yo no lo necestito por que tengo el gatget este que se abre y muestra gatget y tambien esta fijo porlo que daria muy mal.
ResponderEliminarPero lo que necesito es ¿Como has puesto tu buscador alli arriba? eso si me serviria muy util.
Otra cosa...
En esta web:
http://www.irc-hispano.es/
Abajo a la derecha estan los botones para compartir en un monton de sitios, eso seria muy util en mucho blog (me incluyo).
Podrias hablar de ello?
Hola Alejandro, sabes, echa un vistazo en Gem@Blog, Ciudad Blogger u Oloblogger tal vez tengan algo escrito sobre eso.
EliminarMe cuentas...
Ola Karla, como haria para que en vez de la barra,poner mi menu de enlaces o paginas fijo con el buscador ?
ResponderEliminarHola Jonathan, quita el gadget de lista de enlaces y en su lugar pon el de las páginas ;)
EliminarMil veces gracias Karla, pues hace poco conoci tu web y me ha encantado, los recursos que posees son de maravilla, te agradesco por el gran aportes que nos das, saludos y ya estas en mis favoritos =D
ResponderEliminarMuchas gracias Héctor por tu comentario, y de nada hombre, lo hago con gusto ;)
EliminarGracias por compartir tu conocimientos, que para mi son muy importantes.
ResponderEliminarComo sabes mis conocimientos son escasos y fijate, ahora tengo blog y cada vez voy haciendo nuevas cositas
Besitos
Hola Karmela, ¿cómo estás?, me alegra que vayas haciendo cositas en tu blog, cualquier cosita que necesites me avisas ok,:D
EliminarBuen fin de semana ;)
Me quieres decir que este menú es el que aparece arriba del header así como este blog que tiene un menú arriba? sí es así , me habras ayudado demasiado.
ResponderEliminarEn la demostración puedes ver como luce Jane, echa un vistazo, los enlaces usan el gadget de "lista de enlaces de Blogger" ;)
EliminarYa lo ví , tendré que intentarlo con mi blog.
EliminarEs fácil, ya lo verás cualquier cosa me dices ;)
EliminarUna pregunta Karla , es posible ponerle menus deslizantes a las paginas estaticas que da por defecto blogger? digo , es posible?
ResponderEliminarBueno, pudiera ser posible agregar enlaces manualmente y hacerlos desplegables, aunque no le veo mucho sentido, nos complicariamos mucho, creo que es mejor hacerlo de manera separada, y usar los enlaces de las páginas estáticas en dicho menú, sino luego al agregar páginas va a ver problemas, te lo digo por que he batallando mucho con eso y cuando hago un cambio, necesito agregar el código manualmente a la edición de HTML de la plantilla, todo un rollo...
EliminarOh! entiendo , muchas gracias por la explicación , no lo habia visto de esa forma.
EliminarExcelente tutorial , mira como deje mi blog http://janesketchblog.blogspot.com/ en vez de poner la busqueda le puse botones de redes sociales , quedo espectacular , muchas gracias!
EliminarPerfecto Jane, y de nada, me da mucho gusto que te haya sido útil.
EliminarSi quieres puedes bajar un poco los iconos, y lo puedes hacer si usas el ID del widget:
#HTML7{
margin-top: 4px;
}
Puedes editar el valor del margen según necesites :)
Y donde introduzco o pongo este codigo? En el css del diseñador de plantillas o en el html de la platilla?
Eliminaren que sección?
Como quieras Jane, lo puedes poner tanto en "Añadir CSS" del diseñador de plantillas, como en la edición de HTML de la plantilla, con la diferencia de que con la primera opción puedes editar el CSS de nuevo desde esa sección, siempre y cuando no hagas un cambio posterior en el CSS desde la edicion de HTMl de la plantilla.
EliminarSi quieres, echa un vistazo a esto:
http://www.compartidisimo.com/2011/01/agregrar-hojas-de-estilos-en-cascada.html
Listo , muchas gracias Carla. Ya los botones bajaron , lo añadí en el css del diseñador de plantillas.
Eliminaraquí lo puedes ver http://janesketchblog.blogspot.com/
*Karla*
EliminarQué linda eres Karla. Es un placer llegar a tu alforja de infinito y recargar las baterías. Bendiciones!
ResponderEliminarMuchas gracias Elizabeth, eres muy amable y tus palabras son muy cálidas y dulces :)
EliminarUn abrazo y muchas bendiciones para ti :D
¡Gracias! Lo puse en mi blog y se ve maravilloso =)
ResponderEliminarDe nada Miguel Ángel, me da mucho gusto que te haya sido útil :)
Eliminar¡Mil gracias, Karla! Cuando regrese de mis vacaciones lo pruebo.
ResponderEliminarSaludos.
¡Mil gracias, Karla! Cuando regrese de mis vacaciones lo pruebo.
ResponderEliminarSaludos.
De nada josecupelli, luego me cuentas el resultado :)
EliminarHola Karla.
ResponderEliminarHay alguna manera no ocultar la barra y solo hacerla aparecer cuando se baja la página.
Si es posible pero habría que hacerlo usando Javascript o bien echar de mano de alguna librería como jQuery.
EliminarLuego publicaré algunas opciones ;)
Excelente truco!!! ya lo aplique, pero tengo un problema. Cuando incluí la barra, me desaparecieron los elementos en "Diseño", por lo tanto no podía agregar el widget!!
ResponderEliminarQue puede estar pasando??
te dejo el sitio para que veas: http://advisioner.blogspot.com/
Muchas gracias
No debería suceder Federico, ¿aún sigues con el problema?
EliminarKarlita, como sabes que estoy rediseñando el blog, añadi esta barra, pero solo queiro que a parezca el buscador, edite al CCS para que solo salga una parte, mira: http://milegontx.blogspot.com/
ResponderEliminarEdite esta parte:
/*Barra fija en el top*/
#top-fijo{
width:100%;
Pero sale a la izquierda, como se puede mover para que aparezca a la derecha?
Saludos y gracias
Bueno, para ti tengo varias notas Alejandro:
EliminarNo estoy segura del resultado que busques, pero si sólo vas a usar el buscador, tal vez este post no sea el indicado. Si sólo vas a usar el buscador, no necesitas agregar todo el CSS, ya que el resto sólo estaría de más, sin ningún uso...
Voy a publicar otros posts sólo con un buscador flotante.
Si sólo quieres ponerlo en la cabecera lee este post de Oloman:
http://www.oloblogger.com/2011/11/situar-el-gadget-buscador-junto-al.html
También para que la sección de la cabecera, mida lo mismo que el contenido, edita el ancho del header-wrapper:
#header-wrapper {
...
width: 976px;
...
viene como 976px, cambialo por 980px, ten cuidado de no quitar el punto y como al final.
También si quieres puedes eliminar las "sombras" de esa misma sección (header-wrapper), y para ello elimina las tres últimas lineas de #header-wrapper:
-moz-box-shadow: 0px 5px 7px #8f8f8f;
-webkit-box-shadow: 0px 5px 7px #8f8f8f;
box-shadow: 0px 5px 7px #8f8f8f;
Verifica en vista previa antes de guardar cualquier cambio.
Para el caso de los botones de redes sociales, puedes moverlos a la derecha, sólo agrega margen a la izquierda aquí:
ul#m-soc4{
margin: 18px 0 0 10px;
El valor que ves de 10px cámbialo por 90px o lo que necesites, cuidado con no quitar el punto y coma al final.
Suerte y buen fin de semana ;)
O no vi el comentario te cuento...
EliminarYo lo que quiero hacer es mover el trozo que tengo de la barra a la derecha, asi:
http://img191.imageshack.us/img191/2405/capturadajpg.jpg
Todo lo que me has dicho lo he hecho menos lo de los iconos por que estan donde yo creo que estan mejor.
Saludos
¿Estás seguro que lo quieres así? te va a tapar la NavBar de Blogger...
EliminarBueno, sólo cambias:
left:0;
por right:0;
Te comentaba como una observación lo de los iconos, ya que los vi muy cargados a la izquierda, obviamente tu decides...
Saludos
Oh no vi ese factor, tienes razon me tapara la NavBar y no se vera lo mas importante, mejor que lo haga como me dices, que tu tienes mas experiencia en esto y yo solo llevo un año.
EliminarSaludos
campeona, lo quiero poner en mi blog pero en la parte de ababajo no arriba, eh intentado colocarlo abajo pero no puedo.
ResponderEliminar¡Qué onda campeón!,
EliminarEs muy fácil conseguirlo y te sorprenderás, sólo cambia en el CSS que agregaste:
top:0;
por:
bottom:0;
Desde el Diseñador de plantillas verás el resultado, pensando que fue en "Añadir CSS del Diseñador de plantillas", donde agregaste el CSS.
¡Tu puedes!
Gracias por compartir
ResponderEliminarOla, si quiero ponerlo abajo como lo hago?
ResponderEliminarEcha un vistazo a la respuesta anterior que le di a huichochitlan, también, además de eso puedes cambiar el HTML (del paso 3) y ponerlo antes de: </body> pensando en que quedará abajo.
Eliminarno tengras algo similar pero para wordpress :)
ResponderEliminarLo siento, pero no tengo tutoriales para Wordpress :(
EliminarHola, sabes como se le puede hacer para que cuando hagas click en la barra se suba con efecto deslizante?
ResponderEliminarSaludos
Se puede lograr fácilmente con la ayuda de jQuery. Desafortundamente yo no tengo escrito ningún tutorial para lograrlo, echa un vistazo a otros blogs con tutoriales, de cualquier modo, luego publicaré otros ejemplos.
EliminarSaludos ;)
Encontré esta página: http://diyva.blogspot.com.ar/2011/09/ir-arriba-con-efecto-deslizante-con_10.html pero no se como implementarlo para que funcione.
EliminarSaludos
Me temo que lo que encontraste no será de utilidad para lo que buscas Dante...¿O te refieres a que quieres poner la flecha de ir para arriba?
EliminarNo, la flecha ya la tengo queria lograr un efecto como el de la barra de Google+, que cuando le haces click te sube para arriba.
EliminarDe todas formas, muchas gracias!
ok, bueno, no es difícil, si no desesperas luego publico otros ejemplos como te lo había comentado ;)
EliminarOk. GRacias :D :D :D
EliminarKarla no queda más que decirte que gracias, me volvi loca buscando algo así, y cuando aparece y funciona todo es un alivio.
ResponderEliminarGracias encerio, excelente tu blog +1 y preferidos :) Saludos
Me da mucho gusto que te haya sido útil May, luego publicaré otras opciones de secciones fijas ;)
EliminarGracias por el +1 y buen fin de semana!
he buscado, pero no he encontrado nada, publicaste ya le ampliación de secciones? Es posible añadirle sombra?
ResponderEliminarUy, perdona mi mala educación, enhorabuena por el blog, lo haces fácil y sencillo, muchas gracias!!!
he conseguido hacer la sombra, pero no otra sección.
ResponderEliminarpuedes verlo en: www.productosdx.blogpot.com
gracias por "no contestar..."
ResponderEliminarDe nada Pedro, hago todo lo posible por contestar los comentarios Pedro, por alguna razón me brinqué los tuyos, lo cual lamento.
EliminarTodos los tutoriales que ves aquí los escribo con el firme propósito de que puedan ser útiles a alguien, lamentablemente sólo una persona esta detrás de este blog, que es una servidora, y no cobro ningún honorario por brindar mi tiempo a tod@s los que me sea posible.
a mi me gustaría que tenga la opción de poder cerrar!
ResponderEliminarMuchas gracias Karla, pero tengo un problema, el buscador, no me arroja ningun resultado, porque pasará eso?
ResponderEliminarDe nada Quinta Conciencia,
Eliminarmmm, no lo puedo saber si no veo el blog.
Este comentario ha sido eliminado por el autor.
EliminarPues ya me funciona la busqueda de la barra de buscador, aunque no es tan precisa como me gustaria jeje.
ResponderEliminarKarla, mas que una barra flotante, me gustaria una barra estatica, como la que tu usas, podrias pasarme el código para colocarla en mi blog.
Muchas gracias de antemano Karlita
Para cambiar la posición sólo cambia:
Eliminarposition: fixed;
por
position: absolute;
y ya no flotará.
Hola Karla, no puedo utilizar el menú mira, he seguido todos los pasos y me queda así como se ve en http.//soyslytherin.blogspot.com, de verdad me gusta y quisiera saber que tengo que hacer para implementarlo corectamente
ResponderEliminarMe parece que hay un error en tu plantilla, no te puedo decir con exactitud porque las etiquetas que usa Blogger no se ven igual en el código fuente, verifica que el CSS esté dentro de ]]></b:skin> y que no tengas un error en el CSS:
Eliminarhttp://www.compartidisimo.com/2011/10/7-errores-comunes-en-el-css-al.html
Suerte.
Igual, me gustaría que algún día (Muy pronto) nos compartieras como haz hecho para poner esa encuesta flotante? Es algo que me mantiene despierto. Saludos
ResponderEliminarKarla, ¿cómo estás?
ResponderEliminarTe escribí para agradecerte esta entrada, ya hace unos meses. Implementé todo tal y como lo proponés y me salió bien... Hasta que decidí usar la lista de enlaces (que en un primer momento había decidido no hacerlo).
El problema es que no puedo lograr que blogger (imagino) me permita ponerla estilo horizontal en el "main" (sólo lo permite en el crosscol).
¿Sabés cómo deshacer ese parámetro? ¿Convierto la Lista (li) en un contenedor (div)?
Ya que me dedicaste esta entrada, entre otros, vuelvo con esta consulta. Que quizás le sirva a alguien más.
Espero la respuesta y te dejo un beso.
Gracias.
Bien, gracias Jóse :)
EliminarBueno, lo que pasa, es que en las nuevas plantillas de Blogger, existen ciertos estilos (CSS), para la sección del crosscol, que hace que la lista de páginas estáticas se vea horizontal.
Si quieres que otra lista, como la lista de enlaces de Blogger se vea horizontal, entonces habrá que definir el CSS para que eso ocurra.
En este ejemplo del post, especifico el CSS que hace que la lista de enlaces de Blogger se vea horizontal, si no ocurre, es porque seguramente el ID del gadget es diferente, si por ejemplo no es el primero que agregas, ya que Blogger los va numerando de forma sucesiva cuando los agregas. Ej.: LinkList1, LinkList2, LinkList3, etc. En el CSS que facilito uso el id "LinkList1", como lo puedes comprobar en el paso 1.
Espero contestar la pregunta.
Sí, claro, pregunta respondida.
EliminarGracias.
Creo que la lista es "ul" y no "li"... ¿No?
ResponderEliminarBeso.
¡Ah! Disculpá, el blog en cuestión es uno de pruebas: http://elpdlv.blogspot.com.ar/
ResponderEliminarGracias, nuevamente.
Karla, lo convertí en un contenedor y quedó bien. De todos modos, y tomándote el tiempo necesario, me gustaría saber si conocés la respuesta a mi primer pregunta.
ResponderEliminar¡Mil gracias!
Gracias Karla!! Yo aun estoy aprendiendo. Me gustaria saber como puedo poner un pequeño logo a la izquierda de la lista de enlaces ya que si lo intento como widget, se me bajan los otros enlaces. Además he intentado poner el fondo negro pero entonces las letras me salen borrosas. Un saludo,
ResponderEliminarwww.rezetasdecarmen.com
Carmen, siento mucho no haber contestado tu pregunta. Se me pasó tu comentario, debo confesar que a veces me pasa :/
EliminarSi entendí bien, quieres poner un logo en la barra, ¿verdad?, lo mejor es crear otra sección para agregar ahí el widget. Luego escribo un post que explique cómo hacerlo.
Excelente,
ResponderEliminarYo lo puse sombra: cambie esta linea
(border-bottom:1px solid #ebe8e8;) por la siguiente:
(box-shadow: 1px 1px 15px #d3d3d3;)
Me da gusto que haya sido util Jhon. Por supuesto puedes personalizar la barra a tu gusto. Esta sólo es la base para implementarla ;)
Eliminarhola como puedo colocar este barra abajo y no como esta en el porterior de mi blog por fa ayuda broo
ResponderEliminarHay 2 formas, cambias la propiedad top, por bottom, en el CSS, en donde están definidos los estilos de la barra:
Eliminar#top-fijo{
...
}
O bien, lo mejor es poner el códido del paso 3, antes del cierre de la etiqueta "body", es decir, antes de: </body>
GRACIAS ma has sevido de gran alluda (-;
ResponderEliminarMe da gusto que haya sido útil. Gracias por el comentario Alejandro.
EliminarHola Carla, gracias por el aporte, sabes? he puesto lo que queria. en el lugar indicado, ya no en los sitios fijos.
ResponderEliminarAtte: Gabriel, desde Perú.
De nada Gabriel, me da gusto que sea útil.
EliminarSaludos!
¿Existe alguna forma de quedar fija al barra?
ResponderEliminarMuchas gracias.
Puedes cambiar la posición (position) "fixed" por "absolute". Debería funcionar en todas las plantillas.
EliminarGracias Karla increíble, me funcionó a la perfección ^-^
ResponderEliminarSólo tengo una duda... ¿cómo puedo cambiar el color de la barra?
Gracias y Saludos! :DD
En el CSS, en el primer bloque (#top-fijo{), busca esta parte:
Eliminarbackground:#f2f2f2;
Ahí se cambia el color. Puedes consultar esta tabla de colores:
http://html-color-codes.info/codigos-de-colores-hexadecimales/
muchisimas gracias Karla *-*
EliminarHola Karla quisiera que la barra tenga esta forma mira esta web:
ResponderEliminarhttp://creativefan.com, necesito algunos consejos - que me puedes recomendar para modificarla - Gracias
Hola Jonathan,
EliminarNo es tan complicado, dame tiempo y escribo un post exlicándolo, ya varios me han comentado que buscas eso (título de la página fijo con menú de navegación u otro elemento)
Buen día!
Gracias Karla, espero con muchas ganas el post :)
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola Karla, está genial! necesitaba esta barra flotante!! Muchas gracias. Pero una cosa: A mi me salen los menús en una lista vertical... cómo puedo ponerlos en horizontal en la parte de arriba de la página??? Como ves no se ven todos...
ResponderEliminarhttp://elkejewels.blogspot.com.es/
(Hay 5 enlaces, por cierto...) (la cosa es que se ve solo "home" y parte de "Projects"...) :-(
ResponderEliminarHola Elke,
EliminarNo pude ver el resultado, imagino que lo quitaste, pero, si los enlaces te aparecen de forma vertical, posiblemente (no lo puedo asegurar porque no vi cómo lo hiciste) sea porque el CSS que manipula la apariencia de dichos enlaces no se está aplicando y esto se puede deber a que el ID de el gadget de "lista de enlaces" es distinto. Por favor lee la primera nota que puse al final del post.