A petición de José y otros que me han comentado lo mismo, vamos a ver cómo crear una barra flotante en el top con secciones, para agregar ahí cualquier gadget.
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,
ResponderSuprimirQue 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.
SuprimirEspecificamente 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.
SuprimirYa 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.
ResponderSuprimirGracias por tu ayuda ;)
Eso lo puedes lograr de dos formas:
Suprimir1. 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.
SuprimirMUCHAS GRACIAS.
Ok Marçal M., entonces, esté pendiente ;)
SuprimirExcelente 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.
ResponderSuprimirPero 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.
SuprimirMe cuentas...
Ola Karla, como haria para que en vez de la barra,poner mi menu de enlaces o paginas fijo con el buscador ?
ResponderSuprimirHola Jonathan, quita el gadget de lista de enlaces y en su lugar pon el de las páginas ;)
SuprimirMil 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
ResponderSuprimirMuchas gracias Héctor por tu comentario, y de nada hombre, lo hago con gusto ;)
SuprimirGracias por compartir tu conocimientos, que para mi son muy importantes.
ResponderSuprimirComo 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
SuprimirBuen 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.
ResponderSuprimirEn la demostración puedes ver como luce Jane, echa un vistazo, los enlaces usan el gadget de "lista de enlaces de Blogger" ;)
SuprimirYa lo ví , tendré que intentarlo con mi blog.
SuprimirEs fácil, ya lo verás cualquier cosa me dices ;)
SuprimirUna pregunta Karla , es posible ponerle menus deslizantes a las paginas estaticas que da por defecto blogger? digo , es posible?
ResponderSuprimirBueno, 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...
SuprimirOh! entiendo , muchas gracias por la explicación , no lo habia visto de esa forma.
SuprimirExcelente 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!
SuprimirPerfecto Jane, y de nada, me da mucho gusto que te haya sido útil.
SuprimirSi 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?
Suprimiren 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.
SuprimirSi 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.
Suprimiraquí lo puedes ver http://janesketchblog.blogspot.com/
*Karla*
SuprimirQué linda eres Karla. Es un placer llegar a tu alforja de infinito y recargar las baterías. Bendiciones!
ResponderSuprimirMuchas gracias Elizabeth, eres muy amable y tus palabras son muy cálidas y dulces :)
SuprimirUn abrazo y muchas bendiciones para ti :D
¡Gracias! Lo puse en mi blog y se ve maravilloso =)
ResponderSuprimirDe nada Miguel Ángel, me da mucho gusto que te haya sido útil :)
Suprimir¡Mil gracias, Karla! Cuando regrese de mis vacaciones lo pruebo.
ResponderSuprimirSaludos.
¡Mil gracias, Karla! Cuando regrese de mis vacaciones lo pruebo.
ResponderSuprimirSaludos.
De nada josecupelli, luego me cuentas el resultado :)
SuprimirHola Karla.
ResponderSuprimirHay 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.
SuprimirLuego 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!!
ResponderSuprimirQue 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?
SuprimirKarlita, 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/
ResponderSuprimirEdite 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:
SuprimirNo 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...
SuprimirYo 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...
SuprimirBueno, 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.
SuprimirSaludos
campeona, lo quiero poner en mi blog pero en la parte de ababajo no arriba, eh intentado colocarlo abajo pero no puedo.
ResponderSuprimir¡Qué onda campeón!,
SuprimirEs 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
ResponderSuprimirOla, si quiero ponerlo abajo como lo hago?
ResponderSuprimirEcha 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.
Suprimirno tengras algo similar pero para wordpress :)
ResponderSuprimirLo siento, pero no tengo tutoriales para Wordpress :(
SuprimirHola, sabes como se le puede hacer para que cuando hagas click en la barra se suba con efecto deslizante?
ResponderSuprimirSaludos
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.
SuprimirSaludos ;)
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.
SuprimirSaludos
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?
SuprimirNo, 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.
SuprimirDe todas formas, muchas gracias!
ok, bueno, no es difícil, si no desesperas luego publico otros ejemplos como te lo había comentado ;)
SuprimirOk. GRacias :D :D :D
SuprimirKarla no queda más que decirte que gracias, me volvi loca buscando algo así, y cuando aparece y funciona todo es un alivio.
ResponderSuprimirGracias 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 ;)
SuprimirGracias 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?
ResponderSuprimirUy, 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.
ResponderSuprimirpuedes verlo en: www.productosdx.blogpot.com
gracias por "no contestar..."
ResponderSuprimira mi me gustaría que tenga la opción de poder cerrar!
ResponderSuprimir