¡Hola! El post de hoy es especial, ya que nunca antes había hecho un tutorial para mejorar el blog. Hace ya varias semanas recibí una petición para que explicara cómo había hecho la barra superior que tengo en el blog. Así que a ello voy.
Primero de todo deciros que yo saqué el código del blog de Miss Lavanda, pero ese blog ya no está disponible. Así que os voy a enseñar a hacerlo cómo ella lo publicó en su blog, y el código será el mismo que el que ella publicó.
Por si no sabéis a lo que me refiero cuando digo barra superior, os pongo una captura de mi blog para que lo veáis. Es lo que está encima de la cabecera, en rosa. Yo tengo tres cosas en mi barra: las pestañas, los iconos sociales y una caja de búsqueda. Os enseñaré a ponerlo todo, a ver si e explico y lo entendéis todo :)
ANTES DE EMPEZAR ACORDAROS DE HACER UNA COPIA DE SEGURIDAD DE LA PLANTILLA
Vamos por pasos:
1. Añadir el html
Plantilla>Editar HTML
Buscamos esta línea (Control+F)
<body expr:class='"loading" +
data:blog.mobileClass'>
<div id='barra-superior'>
<ul class='menu'>
<li><a href='URL'>Página 1</a></li>
<li><a>Categoría 1</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a>Categoría 2</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<ul class='menu'>
<li><a href='URL'>Página 1</a></li>
<li><a>Categoría 1</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a>Categoría 2</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a href='URL'>Página
2</a></li>
<li><a href='URL'>Página 3</a></li>
</ul>
</div>
Los campos con colorines son los que debemos cambiar:
Como veis es casi idéntico al anterior, solo cambia la parte de abajo. En este caso lo que hay que modificar es URL de la red social, poniendo la dirección de vuestra página de Facebook, Twitter, Pinterest o Instagram.
Para las redes sociales hemos usado los iconos de font awesome. Si no los tenéis en vuestro blog basta con añadir este código justo debajo de <head>:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Si queréis ver más iconos para añadir en la barra, aquí os dejo el enlace con todo su catálogo.
Y si además de eso también queréis tener una cajita de búsqueda, el código a copiar sería este:
<li><a href='URL'>Página 3</a></li>
<li><a href='URL de la red social'><i class="fa fa-facebook"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-twitter"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-pinterest"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-instagram"></i></a></li>
</ul>
<div id='buscar-top'><form action='/search' id='searchthis' method='get' style='display: inline;'>
<input class='search-box' name='q' placeholder='BUSCAR' size='30' type='text'/>
</form></div>
</div>
Aquí lo único que podéis cambiar, si queréis, es el texto que saldrá en la cajita de búsqueda. Si lo dejáis tal como está saldrá la palabra BUSCAR.
<li><a href='URL'>Página 3</a></li>
</ul>
</div>
Los campos con colorines son los que debemos cambiar:
URL: dirección donde queremos que nos lleve ese enlace (puede ser una página externa o una página interna de nuestro blog).
Página: nombre de cada enlace (en mi caso sería Home, Sobre mí, Contacto y Mi tienda). Llevan directamente a la url que hemos indicado.
Categoría: aquí viene la parte de las categorías y subcategorías del blog. En mi caso, si pasamos el ratón por encima de Índice (que sería la categoría), vemos que se abre un desplegable con más apartados, que serían las subcategorías.
SubCategoría: son las subpestañas del menú, que cuelgan de cada categoría. En mi caso, las subcategorías de Índice son índice de posts, libros, series y retos.
Se pueden añadir tantas páginas, categorías y subcategorías como queramos.
Si además de eso queremos añadir las redes sociales, el código a copiar sería este:
<li><a href='URL'>Página 3</a></li>
<li><a href='URL de la red social'><i class="fa fa-facebook"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-twitter"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-pinterest"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
Página: nombre de cada enlace (en mi caso sería Home, Sobre mí, Contacto y Mi tienda). Llevan directamente a la url que hemos indicado.
Categoría: aquí viene la parte de las categorías y subcategorías del blog. En mi caso, si pasamos el ratón por encima de Índice (que sería la categoría), vemos que se abre un desplegable con más apartados, que serían las subcategorías.
SubCategoría: son las subpestañas del menú, que cuelgan de cada categoría. En mi caso, las subcategorías de Índice son índice de posts, libros, series y retos.
Se pueden añadir tantas páginas, categorías y subcategorías como queramos.
Si además de eso queremos añadir las redes sociales, el código a copiar sería este:
<div id='barra-superior'>
<ul class='menu'>
<li><a href='URL'>Página 1</a></li>
<li><a>Categoría 1</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a>Categoría 2</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a
href='URL'>Página 2</a></li><ul class='menu'>
<li><a href='URL'>Página 1</a></li>
<li><a>Categoría 1</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a>Categoría 2</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a href='URL'>Página 3</a></li>
<li><a href='URL de la red social'><i class="fa fa-facebook"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-twitter"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-pinterest"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
Como veis es casi idéntico al anterior, solo cambia la parte de abajo. En este caso lo que hay que modificar es URL de la red social, poniendo la dirección de vuestra página de Facebook, Twitter, Pinterest o Instagram.
Para las redes sociales hemos usado los iconos de font awesome. Si no los tenéis en vuestro blog basta con añadir este código justo debajo de <head>:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Si queréis ver más iconos para añadir en la barra, aquí os dejo el enlace con todo su catálogo.
Y si además de eso también queréis tener una cajita de búsqueda, el código a copiar sería este:
<div id='barra-superior'>
<ul class='menu'>
<li><a href='URL'>Página 1</a></li>
<li><a>Categoría 1</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a>Categoría 2</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a href='URL'>Página 2</a></li><ul class='menu'>
<li><a href='URL'>Página 1</a></li>
<li><a>Categoría 1</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a>Categoría 2</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a href='URL'>Página 3</a></li>
<li><a href='URL de la red social'><i class="fa fa-facebook"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-twitter"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-pinterest"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-instagram"></i></a></li>
</ul>
<div id='buscar-top'><form action='/search' id='searchthis' method='get' style='display: inline;'>
<input class='search-box' name='q' placeholder='BUSCAR' size='30' type='text'/>
</form></div>
</div>
Aquí lo único que podéis cambiar, si queréis, es el texto que saldrá en la cajita de búsqueda. Si lo dejáis tal como está saldrá la palabra BUSCAR.
Y ya hemos acabado el paso 1. Parece mucho pero ya veréis que no es complicado.
2. Añadir el CSS
Vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos este código:
*{
margin:0px;
padding:0px;
}
margin:0px;
padding:0px;
}
#barra-superior {
margin:auto;
width:100%;
background:#333333;
/*Color de fondo de la barra*/
height:40px;
/*Anchura de la barra*/
border-bottom: 4px solid #adbcdc; /*Línea de debajo del menú, si no queréis borrad esta
línea*/
position:fixed;
/*Para que la barra se quede fija*/
z-index:101;
/*Para que la barra se quede fija*/
}
ul,
ol {
list-style:none;
}
.menu
> li {
float:left;
}
.menu{
margin:0
auto;
width:1000px;
/*Ancho del menú dentro de la barra, variaremos este valor hasta conseguir el
que buscamos*/
}
.menu
li a {
color:#ffffff;
/*Color de las letras de las pestañas*/
font:normal
normal 10px Arial; /*Tamaño y tipografía de las pestañas*/
text-transform:uppercase;
/*Para que esté en mayúsculas, sino borrad esta línea*/
letter-spacing:
2px; /*Espaciado entre caracteres, si no queréis borrad la línea*/
text-decoration:none;
padding:20px
5px;
display:block;
cursor:pointer;
}
.menu
li a:hover {
color:
#faefe6; /*Color de las pestañas al pasar el ratón por encima*/
}
.menu
li i{ /*Esto es para los iconos sociales, si no los tenéis borrad este bloque*/
color:
#ffffff; /*Color de los iconos sociales*/
font-size:
14px; /*Tamaño de los iconos sociales*/
padding:0px
5px;
}
.menu
li i:hover{ /*Esto es para los iconos sociales, si no los tenéis borrad este
bloque*/
color:
#faefe6; /*Color de los iconos sociales al pasar por encima*/
}
.menu
li ul {
background-color:
#f4f0f1; /*Color de fondo de las subpestañas*/
display:none;
position:absolute;
min-width:140px;
}
.menu
li ul a { /*Si queréis que la letra sea igual que las pestañas, borrad esta
línea*/
color:
#666666; /*Color de las letras de las subpestañas*/
font:normal
normal 10px ARIAL; /*Tamaño y tipografía de las subpestañas*/
text-transform:uppercase;
/*Para que esté en mayúsculas, sino borrad la línea*/
letter-spacing:
2px; /*Espaciado entre caracteres, si no lo queréis borrad la línea*/
}
.menu
li ul a:hover { /*Si queréis que la letra sea igual que las pestañas, borrad
esta línea*/
color:
#F9A799; /*Color de las letras de las subpestañas al pasar el ratón por
encima*/
}
.menu
li:hover > ul {
display:block;
}
.search-box{
/*Para cambiar la apariencia de la cajita*/
width:15%;
/*Tamaño de la caja entera*/
text-align:center;
padding:5px
0; /*Altura de cajita*/
MARGIN-LEFT:
50PX;
color:#333333;
/*Color de las letras cuando escriba el usuario*/
border:0px
solid #cccccc; /*Tamaño, estilo y color del borde,si no queremos borde borrar
la línea*/
background:#ffffff;
/*Color de fondo*/
font:
normal normal 11px Lato; /*Tamaño y tipografia de la palabra BUSCAR (o la que
hayas escrito)*/
border-radius:1px;
/*Bordes redondeados, si no los quieres,
borrar esta línea*/
borrar esta línea*/
}
#buscar-top{
/*Para colocarla bien dentro de nuestra barra*/
margin-top:15px;
/*Variar para colocarlo bien de altura*/
margin-right:170px;
/*Variar para colocarlo bien a lo ancho*/
}
Lo que está en color es lo que podéis modificar a vuestro gusto.
Espero que os haya quedado claro. Si no está bien explicado perdonadme porque es mi primer tutorial y no sé si me he pasado de explicación o me he quedado corta.
¡Espero que os guste! ¡pero recordad que antes de modificar nada tenéis que hacer una copia de seguridad de vuestra plantilla! ;)
¡Que tengáis un feliz día!
¡Besitos!
¡Hola Marta
ResponderEliminarYa era hora que alguien publicase un tutorial con éstas cosas... La eliminación del blog de Miss Lavanda ha dejado un buen vacío. Incluso yo en algunos tutoriales tenía enlaces que direccionaban a su blog para que vieran algún tutorial... ¡Qué pena!
Está muy bien explicado. Por experiencia te digo que hacer un tutorial bien y explicarlo tiene sus dificultades. Un consejo: creo que queda visualmente más claro los pasos si metes en cajitas o subrayas los títulos. No sé si me explico.
En 1.Añadir html, por ejemplo. Pues eso en mayúsculas y una raya debajo, para que se vea bien.
Y poner los códigos en cajas también hace que se vea más organizado.
¡Un beso!
pues seguiré tu consejo y lo haré asi la proxima vez!!! gracias :D
EliminarPero que buen tutorial Marta :) Para ser el primero está muy bien explicado. No sé que toqué el otro día en mi blog que se eliminó esa barra y la que monté para arreglarlo...menos mal que ahora si vuelve a pasarme tengo tu post.
ResponderEliminarBesitos!
ohhh muchas gracias guapa!!! :D yo odio cuando me pasan estas cosas :(
EliminarBuenisimo, mil gracias.
ResponderEliminara ti, guapi :**
EliminarBon tutorial! sempre està bé tenir a mà tutorials per anar millorant el nostre bloc. Una abraçada
ResponderEliminargracies guapa!! :D
EliminarGracias infinitas ♥
ResponderEliminarLo voy a intentar (de nuevo) haber si esta vez si me sale jajaja
Me encantaba el blog de Miss Lavanda es muy triste que ya no este.
¡Saludos! :D
jejeje a ver si hay suerte!! ya, a mi tambie me da pena que lo dejara, me gustaba mucho :(
EliminarMuy bueno y muy bien explicado!! Me lo apunto
ResponderEliminarEspero tu opinión en mi último post, besitos!
gracias!! :) ahora me paso!
EliminarEste tutorial va a ser de muchas ayuda para quienes necesiten poner la barra. Gracias por compartirlo. Un saludo ^^
ResponderEliminargracias a ti!! :D
Eliminar¡Hola, Marta!
ResponderEliminarSolo quería agradecerte que hayas publicado este tutorial, porque soy una completa ignorante de la programación y gracias a ti he podido poner la barra que veía en otros blogs y tanto me gustaba en los míos propios.
¡Muchas gracias! :)
He podido hacerlo todo excepto poner las subcategorías; he querido enlazar las subcategorías con etiquetas mientras que todo lo demás está con páginas ¿puede ser eso lo que no funciona?
Eliminar¡Muchas gracias!
y en caso que mi plantilla no tenga el código BODY, como hago? :)
ResponderEliminartiene que tenerlo! haz control+f dentro de la caja del codigo, que quiza es por eso que no te sale!
Eliminar¡Hola!
ResponderEliminarMIL GRACIAS. Me da una ansiedad horrible moverle el HTML al blog, pero todo está super claro :D
me alegro que te sirva :D
Eliminar¡Hola!
ResponderEliminarTodo bien con el tutorial, pero tengo una sola duda :( El primer código que hay que pegar en el html, se pega arriba o abajo del "<body..."? Es que lo pegué abajo, y haciendo los demás pasos aparece la barra superior, pero las pestañas me aparecen hacia abajo, no una al lado de la otra jajaja Estaba viendo los demás comentarios y veo que nadie tuvo problemas similares, pero igual me animé a preguntar porque no especificas bien si se pega abajo, arriba o eliminando el "<body...".
Fuera de eso, el tutorial está muy claro, así que independiente del problema que te menciono, muchísimas gracias.
Hola :) Debes agregar el código CSS para que todo se arregle :)
EliminarDespués de 6 horas por fin pude terminar el menú, la verdad ha sido bastante complicado para mí a pesar tu clara explicación.
ResponderEliminarMi proceso fue mas o menos así: Fracaso, fracaso, logr-fracaso, fracaso y LOGRO.
Te agradezco muchísimo la ayuda.
Un beso
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola, tu tutorial me encanto, solo tengo un problema, el espacio entre cada nombre de las pestañas es muy chico y me queda muy junto ¿Me podrías decir como se puede solucionar?
ResponderEliminarHola muy buen tutorial pero te tengo una consulta. Como hago para poner los iconos de la redes sociales en la parte izquierda de la barra?
ResponderEliminargracias!!!
ResponderEliminarHola!funcionaria tambien si pongo el icono de shoping cart? Lo he intentado con tu tecnica y las redes sociales me funciona, pero para poner el carrito no hay manera, te suena de alguien que lo haya podido colocar así?
ResponderEliminarGracias de todas maneras.
Hola, una consulta: si no quiero poner las subcategorías desde y hasta donde tengo que borrar?
ResponderEliminarGracias!
Me encantó la publicación!! Muchas gracias por compartir <3
ResponderEliminar