8/5/14

Cómo colocar pestañas con etiquetas debajo de la cabecera en Blogger

Hace unos días Janny Sims me dejó un comentario pidiéndome, entre otras cosas, que explicase cómo hacer las pestañas que aparecen debajo de la cabecera de mi blog y que llevan a las diferentes categorías de entradas. Iba a empezar con tutoriales sobre la cabecera y luego sobre la gama de colores de un blog, pero me ha parecido buena idea publicar también tutoriales que puedan servir a los que no quieran hacer un cambio radical de todo su blog. Además, a lo largo de meses, un montón de vosotros me habéis preguntado vía comentario cómo poner las pestañas y os he contestado por comentario o email de manera bastante escueta. Por todo esto, hoy voy a explicar con todo lujo de detalles cómo colocar pestañas debajo de la cabecera del blog! 


Por si alguno no había entendido a lo que me refiero, estoy hablando de las pestañas que están dentro del rectángulo morado en la foto :) 
El mecanismo de estas pestañas es muy fácil, básicamente son imágenes que, al pincharlas, nos llevan a un link determinado (en este caso llevan a un grupo de entradas, por ejemplo a todas tus entradas de belleza). 
El propio Blogger nos permite hacer unas pestañas predeterminadas pero yo prefiero personalizar las mías que creo que quedan más bonitas y van más con el diseño de mi blog. Además precisamente de eso trata este curso, de explicarte cómo modificar todo lo modificable ^^
Las pestañas son muy útiles para conseguir que tus visitantes se queden un ratito más por tu página, sepan lo que tienes, visiten más posts y, con un poco de suerte, se queden por ahí. Casi todos los blogs tienen este tipo de etiquetas ya sea debajo de la cabecera o en la columna lateral.
Thanks, I made it
El procedimiento a seguir es casi igual al de instalar los iconos de redes sociales, pero es un poco diferente, y además así aprovecho para explicarte cómo se coloca algo debajo de la cabecera. 
Es importante tener en cuenta que, para poder tener estos cartelitos, tienes que tener etiquetas en tus posts, no voy a explicar cómo hacerlo porque es conocimiento básico de bloggers y además no tiene nada que ver con diseño! Pero si no sabes, seguro que te lo explican perfectamente en otros blogs o cursos para principiantes.
Antes de empezar con el tutorial, debemos hacer dos cosas: 
1) Primero tenemos que seleccionar cuidadosamente qué categorías queremos poner: Belleza, DIY, Moda... Intenta elegir categorías que resuman más o menos toda la temática de tu blog. Si tienes un blog de costura, por ejemplo, podrías dividir las entradas en: Ropa, Bolsos, Niños, Accesorios, Ropa para el hogar (se nota mucho que no tengo ni idea de costura? xD) o también por técnica: Patchwork, Máquina de coser, Bordados... o por material: Lana, Algodón, Seda... 
2) Una vez hayas pensado las categorías que vas a hacer, tienes que hacer los cartelitos. Recuerda que tienen que ser imágenes (jpg, jpeg, png...) y que tienen que ser del tamaño real que tendrán en el blog. Además te recomiendo que no sean muy altos, sino más bien pequeñitos, para que no quiten importancia a la cabecera ni, sobre todo, al blog. Te recomiendo descargarte la guía de diseño gratuita de Picmonkey de Blanca (espero que siga enviándolas) porque es súper útil y te enseña un montón de cosas. Sino, en la próxima entrada de diseño os enseñaré a hacer vuestros propios carteles de Picmonkey y, para los menos manitas, os haré unos yo misma para que podáis utilizarlos. Porque para llevar a cabo este tutorial necesitamos tener las imágenes en nuestro ordenador. 
Hecho esto, vamos al escritorio de Blogger y a la pestaña de Diseño. Debajo de la cabecera nos aparecerá una opción para añadir un gadget justo debajo. Debemos pulsar ahí: 
En la nueva ventana que nos aparece, elegimos el gadget de HTML: 
Al seleccionarlo nos aparece una ventana con un cuadro en blanco como esta: (esto es conocimiento básico de Blogger):
Ahora viene lo interesante. En el cuadro escribimos esto: 
 <a href="xxxxxxx"><img src="yyyyyyyy" /></a>

xxxxx será el link al que llevará al pinchar en el cartelito e yyyyyyyy será la URL de la imágen del cartelito.
Dejamos todo esto abierto y nos vamos a la página web de Tinypic
Pinchamos en "Seleccionar Archivo" elegimos la foto de nuestro cartel del ordenador y le damos a "Cargar Ahora". A lo mejor nos sale un capcha. Pero no es molesto porque a veces son citas de Shakespeare. Y ya después nos sale esto: 
Y copiamos el último enlace que aparece (lo he encuadrado en morado). 
Volvemos a nuestro gadget de HTML y, en el código que habíamos copiado, sustituimos yyyyyy por este enlace. Nos quedaría algo así: 
 <a href="xxxxxxx"><img src="http://i58.tinypic.com/r1abdy.png" /></a>

Dentro del cuadro sería algo así: 

Yo he elegido el cartelito de "Belleza" con lo cual al pinchar en él, llevaría al lector a todas las entradas con la etiqueta "belleza". Para eso pincho debajo de algún post en la susodicha etiqueta (o bien en la nube de etiquetas si la tienes en la columna lateral): 
Si lo has hecho bien te aparecerá un cartelito como el que tiene el recuadro morado, advirtiendo de que sólo estás viendo las entradas de belleza. Y copiamos la dirección web que aparece en la barra de navegación AHORA que estamos SOLO en las entradas de belleza. Será algo así como: 
http://tublog.blogspot.com.es/search/label/belleza

Y una vez copiada esta dirección, la pegamos en la ventana de HTML, sustituyendo a la xxxxxxx del código. De forma que nos quedaría algo así: 
<a href="http://tublog.blogspot.com.es/search/label/belleza"><img src="http://i58.tinypic.com/r1abdy.png" /></a>

Después pulsamos enter un par de veces y volvemos a copiar el código y a hacer lo mismo para cada pestaña que queramos que tenga el blog.
Las pesañas quedarán alineadas a la izquierda por defecto. Si quieres que queden centradas sólo tienes que escribir <center> antes de todos los códigos y </center> al final del todo. 
Puedes pinchar en la pestaña en la que pone: Formato RTF para ver cómo quedarían los gadgets. Puedes separarlos con espacios o tabulaciones en este formato RTF si no quieres que queden tan juntos. Aquí puedes ver cómo serían mis categorías en formato RTF. Aparecen unas montadas encima de otras porque no entran en línea recta en el cuadro. Ahora sólo tienes que darle a guardar y ya tienes tus pestañas terminadas! 
Y si le das a "Guardar Disposición" en la pestaña de Diseño del blog, y si has seguido todos los pasos, tendrás ya tus pestañas colocadas debajo de la cabecera y cada una llevará a un grupo de etiquetas dentro de tu blog. 
Espero que se haya entendido más o menos bien, he tardado un montón de tiempo en hacer esta entrada, no sé muy bien porqué. Si no me he explicado bien, tienes más dudas o quieres preguntarme algo, dímelo por comentario y editaré la entrada para solucionar la duda a todos los que os pueda surgir la misma. :D
Espero que os haya sido útil, el próximo día os enseño a hacer vuestros propios carteles!

Share Button

24 comentarios:

  1. Esta genial que compartas estas cositas, son de mucha ayuda. Y gracias por comentar en mi blog en cuanto has visto mi mensaje. Me sigue encantando tu blog!!
    Saludos!!

    ResponderEliminar
  2. Muy buen tutorial, muchas gracias !!

    ResponderEliminar
  3. Hace unos días que estoy pensando en hacerlo, y ya con esto lo tengo más claro. En cuanto tenga un poquito de tiempo me dedicaré a ello, porque como dices, esto atrae más y hace que nuestros visitantes se queden un ratito más :)
    Un besito y gracias!

    ResponderEliminar
  4. ¡Un tutorial genial! Yo puse el menú desplegable porque creo que es más adecuado para mi blog.
    Besos.

    ResponderEliminar
  5. A mi esto me lo enseñaste en privado hace unos meses y te lo agradecí mil <3
    Un besazo guapa.

    http://coolkidscantdiie.blogspot.com.es/

    ResponderEliminar
  6. Muy buen tuto Irene (: Yo siempre he utilizado un código mucho más largo y lioso, para la próxima vez me paso a este que es mucho más sencillo! :D
    Un besico!

    ResponderEliminar
  7. Tu blog me gusta mucho! explicas monton de cosas muy utiles y variadas! :) me quedo para ponerte al dia y leer las entradas! :) te invito a que pases por mi blog,acabo de empezar hace poquitin! www.creacionypersonalizacion.blogspot.com
    Un beso wapa!

    ResponderEliminar
  8. Graciaaaaaaaaaaaaaaaaaaaaas! siempre quise saber hacer esto, jo es que te explicas genial, para que me haya salido que soy una negada para estas cosas... jajajaja muchas gracias irene! por hacer caso a mi otro comentario y por subir ésto tan bien explicado, tu blog me encanta cada día más !

    ResponderEliminar
  9. Gracias por tu esfuerzo,,, y paciencia,,, Felicidades voy a probar mañana, a ver si lo consigo... Saludos

    ResponderEliminar

  10. ¡Muy buena entrada! Me alegra mucho haber encontrado tu blog, me será muy útil ya que estoy empezando y de edición se muy poco jaja. Saludos!

    ResponderEliminar
  11. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  12. Gracias por el tuto. Me ha venido genial! Ya me sale y me encanta! Muchas gracias!
    Un besote para ti, y para tod@s los blogge@s!!

    ResponderEliminar
  13. Muchisimas gracias!! He podido poner mi blog muy original ya que es para una asignatura en la que cada alumno tendrá su blog y todos iban a ser parecidos. Te lo dejo por si quieres ver como es pero hasta final del cuatrimestre estaré añadiéndole pestañas jajajaja. http://curiouswomanoftechnologies.blogspot.com.es/

    ResponderEliminar
  14. Hola Irene!!!

    Muchísimas gracias por el Post!! es genial, está super bien explicado.
    La verdad llevaba tiempo sin actualizar mi Blog, y ahora que lo retomo quería darle un cambio de imagen, añadiendo pestañitas debajo de la cabecera. Tu post es el mejor que he encontrado.
    Cuenta con una seguidora más, ahora no tengo mucho tiempo de ponerme a ello pero está noche comenzaré!
    graciassss!! :D

    Sara Nieto Make up BLOG

    ResponderEliminar
  15. Gracias por el aporte, super claro para las que somos nulas en códigos y diseño. Mi blog ya luce sus pestañas!! gracias nuevamente y te has ganado una seguidora más!

    ResponderEliminar
  16. HE REALIZADO LA ENTRADA Y LO QUE ME HA SALIDO ES UNA FOTO DESAGRADABLE

    ResponderEliminar
    Respuestas
    1. Lo siento mucho! No sé si no has seguido los pasos detalladamente, has pinchado en algo de publicidad o has subido una foto que no era la que tenías intención de subir, pero lo comprobé ayer mismo poniendo la decoración de Navidad de mi otro blog y funciona perfectamente tal cual lo pone en las indicaciones (puedes comprobar cómo ha quedado pinchando en mi perfil y entrando en Los Libros del Desván). También me extraña porque ninguna otra persona ha tenido ningún problema en el año y medio que lleva publicada esta entrada. Como nunca nadie me ha notificado ningún problema por comentario o email, más bien lo contrario y yo misma lo comprobé ayer, me inclino a pensar que quizá no entendiste bien alguno de los pasos. Puedes contactarme por email si necesitas una explicación más detallada. Como tus comentarios aparecían dos veces, he eliminado los duplicados. Si lo consigues, espero tu comentario!

      Eliminar
  17. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  18. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  19. Tu entrada es muy útil, sin embargo, si he entendido bien para poner carteles bajo la cabecera del blog necesitas imágenes ¿verdad? ¿Cómo se hacen los carteles con las imágenes? ¿Hay un límite para poner etiquetas bajo la cabecera? Gracias.

    ResponderEliminar
  20. Tu entrada es muy útil, sin embargo, si he entendido bien para poner carteles bajo la cabecera del blog necesitas imágenes ¿verdad? ¿Cómo se hacen los carteles con las imágenes? ¿Hay un límite para poner etiquetas bajo la cabecera? Gracias. https://coaching-mastery.com/excel-2010-ocultar-una-hoja-entera/

    ResponderEliminar