12 de octubre de 2016

Cómo poner una barra superior con menú en el blog

Cómo poner una barra superior con menú en el blog


¡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 :)

Barra superior blog


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='&quot;loading&quot; + data:blog.mobileClass'>


Y si únicamente queremos la barra con las pestañas, copiamos este código:


<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>
<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:

<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>
<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>
<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;
}

#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*/
            }

            #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!


Marta

23 comentarios:

  1. ¡Hola Marta
    Ya 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!

    ResponderEliminar
    Respuestas
    1. pues seguiré tu consejo y lo haré asi la proxima vez!!! gracias :D

      Eliminar
  2. Pero 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.
    Besitos!

    ResponderEliminar
    Respuestas
    1. ohhh muchas gracias guapa!!! :D yo odio cuando me pasan estas cosas :(

      Eliminar
  3. Bon tutorial! sempre està bé tenir a mà tutorials per anar millorant el nostre bloc. Una abraçada

    ResponderEliminar
  4. Gracias infinitas ♥
    Lo 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

    ResponderEliminar
    Respuestas
    1. jejeje a ver si hay suerte!! ya, a mi tambie me da pena que lo dejara, me gustaba mucho :(

      Eliminar
  5. Muy bueno y muy bien explicado!! Me lo apunto
    Espero tu opinión en mi último post, besitos!

    ResponderEliminar
  6. Este tutorial va a ser de muchas ayuda para quienes necesiten poner la barra. Gracias por compartirlo. Un saludo ^^

    ResponderEliminar
  7. ¡Hola, Marta!
    Solo 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! :)

    ResponderEliminar
    Respuestas
    1. 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?
      ¡Muchas gracias!

      Eliminar
  8. y en caso que mi plantilla no tenga el código BODY, como hago? :)

    ResponderEliminar
    Respuestas
    1. tiene que tenerlo! haz control+f dentro de la caja del codigo, que quiza es por eso que no te sale!

      Eliminar
  9. ¡Hola!
    MIL GRACIAS. Me da una ansiedad horrible moverle el HTML al blog, pero todo está super claro :D

    ResponderEliminar
  10. ¡Hola!
    Todo 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.

    ResponderEliminar
    Respuestas
    1. Hola :) Debes agregar el código CSS para que todo se arregle :)

      Eliminar
  11. Después de 6 horas por fin pude terminar el menú, la verdad ha sido bastante complicado para mí a pesar tu clara explicación.
    Mi proceso fue mas o menos así: Fracaso, fracaso, logr-fracaso, fracaso y LOGRO.
    Te agradezco muchísimo la ayuda.
    Un beso

    ResponderEliminar