SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

26 nov. 2014

Cómo poner una barra encima de la cabecera de nuestro blog

¡Hola!
El buzón de tutorial a la carta echa humo!!!!
Todo este mes he hecho tutoriales pedidos y éste no iba a ser menos. Seguro que os habréis fijado en que se ha puesto de moda poner arriba del todo del blog una barra con un menú.

Esas barritas pueden estar fijas, eso significa que al hacer scroll hacia abajo (hacer correr la página hacia abajo) la barrita siga ahí o bien que la barrita suba con la página y no esté siempre a la vista. Eso ya es a gusto del consumidor.

Son útiles y muy prácticas si queremos que nuestro lector tenga siempre a mano una sección o varias que nos interese, como podría ser una tienda, una suscripción, etc..

Pues bien, vamos a hacerlo.
Como siempre que vamos a hacer algo así hacemos una copia de seguridad de la plantilla y nos vamos a editarla (Plantilla y Editar HTML)
Ahora hacemos click dentro de la cajita donde aparece el código fuente de nuestra plantilla y a la vez apretamos Ctrl+F, así se nos abre una cajita de búsqueda en la que ponemos esto:
<body
Cuando lo encontremos vemos esto:
Bien pues debajo de lo que os he enmarcado en rojo o sea :
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'> debajo de esta frase de código, vais a pegar esto:

<div id='barra-top'>
<div id='menu'>
<ul>
<li><a href='URL-Enlace'>Sección</a></li>
<li><a href='URL-Enlace'>Sección</a></li>
<li><a href='URL-Enlace'>Sección</a></li>
<li><a href='URL-Enlace'>Sección</a></li>
</ul>
</div>
</div>

Muy bien, os quedará así:

Donde veis que dice : URL-Enlace tenéis que escribir la dirección a donde llevará cuando hagan clik en esa sección, y en Sección pues el nombre de esa sección, como Tienda, Sobre mí o lo que queráis.

Una vez hecho esto subís hasta el Codigo CSS que como ya sabéis es todo ese código de color azulito que está entre <b:skin> y </b:skin> (normalmente sale plegadito, si hacéis click en la flechita negra de al lado se desplegará todo el código CSS, os aconsejo que echéis un vistazo a los Cursos que son gratis).

Bueno, si os es muy complicado localizar el código CSS pues apretáis Ctrl+F y buscáis esto:
</b:skin
Justo encima pegáis lo siguiente:

/* Barrita-top
----------------------------------------------- */
#barra-top {
background: #FE84AD;  /*Color de la barra*/
width:100%;
height:40px; /*Alto de la barra*/
margin:0px;
margin-left:-40px; /*Si te queda algún hueco a los lados juega con este número*/
position:fixed; /*Para que la barra se quede fija, si queréis que desaparezca quitáis esto*/
z-index:101; /*Para que la barra se quede fija, si queréis que desaparezca quitáis esto*/
}

#menu{
margin:0 auto;
width:920px; /*Ancho del menú dentro de la barra, según la resolución lo cambiáis si es necesario*/
height:30px;
}

#menu ul{
float:right; /* Alineación del menú: puede ser center (centro)  right (derecha) left (izquierda)*/
background:none;
margin:0px;
padding:0;
list-style-type:none;
height:25px;
}

#menu ul li{
display:block;
float:left;
height:30px;
}

#menu ul li a{
display:block; 
float:left; 
color:#000000; /* Color del texto */
font-size: 14px; /* Tamaño de letra */
font-family: Arvo; /* La fuente/tipo de letra que usas*/
text-decoration:none;
padding:12px 20px 0 20px;
}

#menu ul li a:hover{ 
background:#FE84AD; /* Color del fondo al pasar el ratón por encima de cada sección*/
color:#ffffff; /* Color del texto al pasar el ratón por encima de cada sección*/
height:20px;
}

Ya está, este código ya os he puesto al ladito qué es cada cosa que podéis personalizar así que toquetead hasta que quede como os gusta.

Guardáis todo y a ver cómo os ha quedado.

NOTA IMPORTANTE: para que esta barra quede bien es de lógica que tenemos que quitar la barra de navegación que sale de blogger en la parte superior de nuestro blog.
Para quitarla os vais a Diseño y os fijáis que aparece un gadget arriba a la derecha que se llama Barra de Navegación, hacéis click en editar y se os abrirá una ventanita, bajáis hasta una opción que dice: NO
La seleccionáis y guardáis la posición.
Listo, ya no hay barrita de Blogger y nuestra nueva barrita quedará chulísima.

Si no os habéis aclarado podéis echar un ojo a cómo lo explica Miss Lavanda (Laura) también enseña cómo se hace esta barrita.
Muah!
Lireth's Notebook

17 comentarios:

  1. Muchas gracias!! Que tuto más sencillo...en cuanto pueda me pongo a ello....
    Besos

    ResponderEliminar
  2. Muchas gracias. Llevaba un tiempo queriendo ponerla y me estaba volviendo loca, pero entre Laura y tú lo he entendido perfectamente y ya estoy en proceso de ponerla.
    Un saludo :)

    ResponderEliminar
  3. Estupendo tutorial, Lireth!! Super útil. Me lo guardo. Estoy pensando hacer una remodelación del blog y, para entones, me puede venir muy bien. Besossss

    ResponderEliminar
  4. El tutorial, genial, muchas gracias, estoy aprendiendo un montón contigo.

    ResponderEliminar
  5. Muchas gracias. Hay tantas cosas para mejorar nuestro blog que me vuelvo un poco loca escogiendo que poner ;)

    ResponderEliminar
  6. Ya tengo trabajo, ya te diré como queda. Gracias

    ResponderEliminar
  7. Muchas gracias, qué bueno!
    Un beso,
    Anne.

    ResponderEliminar
  8. Que código habría que añadir para que el menú tenga sub-menús desplegables... ese me encataría!!! :D

    ResponderEliminar
  9. Genial el tutorial como siempre muchas gracias wapa
    Un besote

    ResponderEliminar
  10. Tu blog es súper estupendo. Me encanta.

    Estoy peleándome con las pestañas y las subpestañas y espero conseguirlo ;)
    Muchos besos y enhorabuena por este blog tan estupendo.

    ResponderEliminar
  11. Gracias por tu generosidad a la hora de ayudarnos con todos nuestros problemas con el CSS, que personalmente me traen de cabeza!
    Por eso y mucho mas, te he dejado un regalo muy especial en mi blog!! Pásate a buscarlo cuando puedas!!
    http://quenotefaltedetalle.blogspot.com.es/2014/11/premio-que-no-te-faltedetalle.html
    Un abrazo
    Patricia

    ResponderEliminar
  12. Hola Lireth!, una cosa, cuando pego todo el codigo, mi menú sale una cosa encima de la otra, no hay manera de personalizarlo por mucho que toco los valores. Como es eso? A alguien le pasa lo mismo?

    ResponderEliminar
  13. Hola Lireth. Me encanta tu blog y me has ayudado en muchos aspectos, pero ahora tengo un problema. No hay manera de personalizar la barrita. Mis apartados salen uno encima de otro y no uno al lado de otro. ¿Que hago mal? ¿A alguien le pasa lo mismo?

    ResponderEliminar
  14. muy agradecido por este post, ya que el año pasado busqué este tipo de barra y no lo encontré.

    ResponderEliminar
  15. llevo todo el dia intentando poner unas cuantas cosas y no hay manera! con este tutoría me has ayudado mucho! voy a ver si encuentro el resto de soluciones aquí!! gracias!!

    ResponderEliminar
  16. Gran tutotial! Muy útil y bien explicado! A quedado genial en mi blog http://android4yi.blogspot.com.es/

    ResponderEliminar