Barra superior en blogger

¡Hola blogger!
Desde que cambie el diseño de mi otro blog http://www.truquitosparalaschicas.com/ muchas me habéis preguntado como poner la barra superior en blogger. Esa plantilla es diseñada por otra persona por lo que yo solo tuve que instalarla, es el mejor método si no os gusta absolutamente nada de vuestro blog como era mi caso.


Barra en la parte de arriba de blogger

Pero si solo queréis poner la barra superior aquí tenéis el tutorial para bloggers:

1. Nos vamos a Plantilla>editar>html

2. Pulsamos Control + F y buscamos <body y nos va a salir esta linea <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

3. Y debajo pegamos esto:

<div id='barra-superior'>
<div id='menu'>
<ul>
<li><a href='primera url'>Nombre que queremos ponerle</a></li>
<li><a href='segunda url'>
Nombre que quermos ponerle</a></li>
<li><a href='Tercera url'>
Nombre que queremos ponerle</a></li>
<li><a href='Cuarta url'>
Nombre que queremos ponerle</a></li>

<li><a href='Quienta url'>Nombre que queremos ponerle</a></li>
</ul>
</div>
</div>


4. Donde pone primera url ... ponemos la dirección a la que queremos que vaya Inicio, contacto, Sobre mi... y donde pone nombre... pues le ponéis el nombre que queráis en relación con la url.

Podeis  poner más o menos Pestañas simplemente si queremos menos borramos alguna linea y si queremos más pues se la añadimos.

5. Le damos a vista previa y miramos si todo esta correcto, bueno haber correcto no va ha estar porque estará descolocado pero que no haya ninguna cosa más rara. Y lo guardamos.

6. Como esta todo descolocado vamos a poner nuestra barra de blogger bonita, ves a Diseño>plantilla>personalizar>avanzado>Añadir Css y pegamos:


#barra-superior {background: #000000; /*Este es el color de la barra*/
width:100%;
height:40px; /*Altura de la barra*/
margin:0;
position:fixed; /*Barra fija si quieres que se mueva borra esta linea*/
z-index:101; /*Barra fija si quieres que se mueva borra esta linea*/
}
#menu{
margin:0 auto;
width:920px; /*Largo del menu*/
height:30px;
}
#menu ul{
float:left; /*Alineacion del menu, lo podeis cambiar por centrado que seria center o a la derecha que seria right*/
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:#ffffff; /*El color del texto*/
font: 12px 'Arial'; /*Tipo de letra y tamaño*/

text-decoration:none;
padding:12px 20px 0 20px;
}
#menu ul li a:hover{
background:#000000; /*cambio de color al pasar el raton*/
color:#ffd0c2; /*cambio de color al pasar el raton*/
height:20px;
}

7. Miramos la vista previa y si todo esta listo guardamos.

Os aconsejo que vayáis probando con los colores hasta ver cual es la que mejor le queda a vuestro blog, con la barra en la parte de arriba de blogger vuestro blog parecerá más elegante.

¿Que te parece este tutorial bloggero para poner una barra superior en blogger?

melyssa

3 comentarios:

  1. ¡Hola! Gracias por la información.

    Tengo exactamente la misma plantilla que tú y sabes que tengo un problemota, cuando quise mover una de las pestañas resultó que dejó de mostrar el contenido que tenía jaja ¿sabes cómo puedo solucionar eso? Cuando doy clic desde visualizar sí puedo ver el contenido, pero si intento entrar a la pestaña desde el blog me aparece que no existe.

    ¡Saludos!

    ResponderEliminar