Poner líneas en títulos de gadget

17 sept. 2013


Muy buenas a todos!!! Inauguramos la nueva temporada de tutoriales!!! Hoy os traigo un tutorial para el blog tiradísimo, fácil fácil, de copiar y pegar sin tocar HTML. Vamos a aprender a poner unas líneas automáticas en nuestros títulos de gadgets. Como habréis visto he cambiado un poquito el diseño del blog y en los títulos de los gadgets he puesto unas líneas, arriba y abajo. Pues si os digo la verdad colocarlas es muyyyyy fácil. Yo creo que quedan monas, por lo menos me da la sensación de que todo está más ordenadico. Es un detalle sencillo pero que os puede gustar. Por cierto he comprado móvil nuevo (vivía en la prehistoria) y ahora tengo instagram... por si os interesa curiosear un poquillo.


Además, no hace falta que coloquemos estas líneas siempre que pongamos un título distinto en el blog, nonono. Se pone de manera automática. Así que os voy a decir cómo conseguir estas líneas, cómo modificarlas y cómo colocar los títulos de los gadgets en un lugar o en otro: a la izquierda, a la derecha o centrados

Este es el código que tendréis que copiar y después pegar.

.sidebar h2{border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;

text-align: center;}


Si copiáis y pegáis directamente este código saldrá vuestro título de gadget con un recuadro negro. Pero, como supongo que no lo querréis así... pues os doy explicaciones varias para que podáis cambiar las líneas y adaptarlas a vuestros gustos.

Instalación del código:

La pregunta del millón, ¿dónde pegamos el código? Muy sencillo. Plantilla + personalizar + avanzado + añadir CSS. En la pantalla blanca que nos aparecerá pegamos el código anterior. Nada mas pegarlo veremos que se coloca un recuadro negro al rededor de los títulos de gadgets y que el texto se centrará de forma automática. 


Desde esta misma pantalla iremos haciendo las modificaciones necesarias hasta que consigamos el resultado que buscamos. Lo mejor es que veremos los resultados automáticamente. Ahora os explicaré en qué consiste el código y como hacer las modificaciones. De todos modos, cuando acabéis de hacer los cambios pinchad en APLICAR EL BLOG y listo. Ya tendréis vuestros títulos listos. 

Explicación gráfica:

Antes de pasar a modificar el código me gusta explicaros qué es cada cosa para que no toquéis por tocar, sino que sepáis qué estáis haciendo. Y qué mejor que una explicación gráfica del código que tendréis que copiar y pegar. 


Bordes

Comenzamos con las modificaciones. Como ya os he dicho arriba, todos los cambios los haréis en la misma pantalla CSS donde habréis pegado el código. Así que todo irá rápido y seguro que lo haréis bien a la primera. Aquí os dejo la imagen donde os explico a qué línea corresponde cada uno de los códigos. Si queréis que alguna de las líneas desaparezca, podéis borrar todo lo correspondiente a la línea que queréis quitar, o poner 0px.



Para que entendáis un poquito mejor qué es lo que os estoy diciendo os dejo aquí cómo quedaría el código después de borrar las líneas correspondientes a la línea de la izquierda y de la derecha; o poniendo 0px. 

Opción 1: borrar toda la línea

.sidebar h2{
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;

text-align: center;}

Opción 2: poner Opx

.sidebar h2{
border-top: 1px solid #000000;
border-left: 0px solid #000000;
border-right: 0px solid #000000;
border-bottom: 1px solid #000000;

text-align: center;}

Cambiar el estilo de la línea:

El código Solid hace referencia al estilo de la línea. Si ponemos la palabra SOLID la línea aparecerá continua, normal. Pero tenemos otras opciones.
  • Dashed: línea discontinua, como la que tengo yo.
  • Dotted: puntitos.



Si queréis otro estilo, diferente al SOLID, solo borrad SOLID y colocad el que queráis.En mi caso he hecho una combinación de dos estilos: En el borde de arriba he puesto SOLID y en el de abajo Dashed.

.sidebar h2{
border-top: 1px solid #000000;
border-bottom: 1px dashed #000000;
text-align: center;}

Cambiar el color de la línea:

#0000000 es el color de la línea. Para cambiar el color pasad por esta página, elegid el que más os guste y pegar después del # el código que aparecerá. No borréis el punto y coma, eh, que se estropeará el invento. 

Cambiar el grosor de la línea:

1px: es el tamaño de la línea, cuanto más píxeles más gordita saldrá la línea. Trastead a ver qué tal os va quedando. De todos modos no os recomiendo que pongáis más de 3px... os quedarán líneas enormes.

Cambiar la posición del texto:

El código text-align hace referencia al lugar en el que aparece el título de los gadgets. Podemos elegir el lugar poniendo detrás del código lo siguiente:
  • Center
  • Right 
  • Left
A mi me gusta cómo queda el título de gadget centradico, me parece más apañado, pero podéis hacer lo que queráis. Ya sabéis que en vuestro blog mandáis vosotros.

Después podéis cambiar el estilo de la fuente desde el propio menú de blogger, el color, el tamaño, lo que queráis (todo ello desde el menú de la izquierda de blogger... personalizar...). Las líneas, de forma automática, se adaptarán al tamaño del texto que eligáis. Más fácil imposible!!!

Los títulos de los gadgets se pueden personalizar de muchas maneras, con imágenes, fondos... las posibilidades son muchísisimas. Por ejemplo, en el curso 2 de Blanca os enseña algún truquillo muy interesante para personalizar, aun más, estos títulos. Entre otras cosas, claro.



Y esto es todo por hoy!! Espero que os sea útil y que lo pongáis en práctica porque más fácil no puede ser!
El jueves más y mejor. Además os voy a enseñar un nuevo proyecto de una chica encantadora, que os va a encantar!! Y veréis a mis alumnas en acción!

Share to Facebook Share to Twitter Email This Pin This Share on Google Plus

69 comentarios:

  1. Ulala! Ya lo he hecho y queda muy bonito
    http://proyectopastelito.blogspot.com/
    Gracias, y mil gracias porque gracias a tus trucos tengo bien personalizado mi blog :)

    ResponderEliminar
  2. ¡Muchas gracias por el consejo! la verdad es que me quedo bastante bien, besos!

    ResponderEliminar
  3. Hola guapi!
    Ya sabía como hacer esto pero estoy muy contenta de que hayas vuelto con los tutoriales!
    Besitos

    ResponderEliminar
  4. es chulo, pero no me ha quedado muy claro... con ello pones las líneas a los títulos de los gadget que tienes en la derecha de tu blog verdad?
    por cierto, ya te sigo también en instagram ;)
    Besos
    Creame y mas

    ResponderEliminar
    Respuestas
    1. sí señorita!! A ver si le doy un poco de caña a instagram!

      Eliminar
  5. Buah, te has pasado con este tutorial.
    Muchísimas gracias! Me es de mucha utilidad ya que estoy diseñando mi blog para estrenarlo dentro de muy poquito :)
    Saludos!!!

    ResponderEliminar
  6. Gracias por el tuto.
    Lástima porqué a mi el apartado de CSS no me coge NINGÚN cambio... todo tengo que ponerlo en el HTML de la plantilla...

    Oye, ya te sigo en IG!

    ResponderEliminar
    Respuestas
    1. Si no lo puedes poner en el CSS ponlo en la última parte del HTML del blog... yo creo que así funcionará

      Eliminar
  7. Cuantas cosas chulis nos enseñas May!!!
    Un saludo.
    ♥♥♥

    ResponderEliminar
  8. tengo que leerlo con calma y probar con calma... porque de primeras me ha parecido fácil pero ya veremos cuando me ponga a ello...

    ResponderEliminar
  9. Tengo que probarlo, aunque suelo liarla un poquito cuando me lío a tocar el html..se me mueven las cosas de sitio, se me quedan gadgets permanentes..Vamos que un cuadro! un beso!

    ResponderEliminar
  10. ¡Ole tú May! ¡Vaya pedazo de tutorial!

    ResponderEliminar
  11. Hola! Acabo de descubrir tu blog y me encanta, es super-útil y los tutoriales sirven de mucha ayuda!
    Un saludo,
    Nika
    http://eldenika.blogspot.com/

    ResponderEliminar
  12. Muy bien explicado y queda muy bonito!! pero lo he hecho tal cual y no se aplica a mi blog... no sé! algo mal tendré por ahí... volveré a intentarlo!
    Muchas gracias!!

    ResponderEliminar
    Respuestas
    1. cómo que no?? Tu blog es plantilla de blogger o es una plantilla descargada?

      Eliminar
    2. Ayyy perdona!! no vi la respuesta!! gracias por contestarme!!
      La plantilla es de blogger.... lo intentaré otra vez ;)

      Eliminar
  13. Muy útil, gracias! Lo probaré más tarde, pero me gustaría intentarlo a ver que tal =), parece fácil y está muy bien explicado.
    Un beso,
    Un lienzo en blanco para todos

    ResponderEliminar
  14. Muchas gracias May, en cuanto termine de diseñar los banners para mi otro blog www.proyectohelade.blogspot.com (jejeje, siempre me refiero al profesional como "el otro") lo pondré en práctica.
    Guapa, ayer te envié un twitt para enseñarte el cartelito que había hecho para un sorteo que he preparado... Resulta que la Sinfonica de Navarra nos ha pedido que toquemos con ella en un concierto chulísimo en Baluarte el proximo 9 de Noviembre!!! Venga y animate a participar :) por ahora de las 50 personas que han leido el post no se ha apuntado nadie :( así que si el sorteo sigue con este poco éxito las 2 entradas que sorteamos serán tuyas fijo, oye! y sería un día bonico para conocernos!!! jejeje.

    Un besico
    María

    ResponderEliminar
    Respuestas
    1. soy un cero patatero con twitter!! Ya he visto tu mail! Te contesto mañana! ;)

      Eliminar
  15. Muchas gracias preciosa!! un pequeño cambia así sencillo estaba buscando y no era capaz. Lo pondré en práctica : )

    ResponderEliminar
  16. ¡Ya lo he usado en mi blog! Muchísimas gracias, con la explicación se entiende como un juego de niños, super fácil :D Queda genial, gracias gracias y gracias :)

    Un besote, Mariajo.

    ResponderEliminar
  17. Como siempre genial!! Gracias

    www.facebook.com/tusapitusashop

    ResponderEliminar
  18. Gracia May!!
    Mi blog está dando cambios radicales y casi todos son gracias a tus tutoriales. Me encantan.
    Elísabet – Manualidades fáciles

    ResponderEliminar
  19. Una pequeña cosa, yo para escoger el color y que fuera igualito que el de las letras del título he ido a: Avanzado-Gadgets-color del título. Me he situado sobre la pestaña del código del color, lo he seleccionado, copiado y pegado sobre tu código.
    Un saludo

    ResponderEliminar
    Respuestas
    1. Perfectamente! así todo tendrá el mismo color!

      Eliminar
  20. May muchas gracias, como siempre super fácil y muy práctico. Qué haríamos sin ti!

    Besos

    ResponderEliminar
  21. Muchas gracias por la idea May, ya lo he aplicado ;)

    ResponderEliminar
  22. Nos vamos a poner todos a ello.
    Esto es lo que gusta encontrar: bueno, bonito, barato, sencillo y chulo ^^
    SAludos

    ResponderEliminar
  23. Ya lo he hecho May!!! Mil gracias! Queda muy chulo, aunque sólo me sale la línea de arriba, no se porqué y eso que he puesto el CSS completo! De todas formas me gusta como queda, pero sabes porque puede ser? Lo explicas todo tan bien que parece hasta fácil!
    Un beso!
    Mami

    ResponderEliminar
  24. Muchas gracias May eres un encanto super bien explicado. Ya tengo titulos con lineas.

    Bssssssssssssssssssssss

    ResponderEliminar
  25. Acabo de descubrir tu blog y me encanta!! Cuantas ideas!!
    Además lo explicas todo facilísimo. Enhorabuena!! Me quedo por aquí.

    Sylvia

    ResponderEliminar
  26. Fácil no, facilísimo!!! Mejor no se puede explicar!!! Mil millones de graciassssss!!!

    ResponderEliminar
  27. Yo me he vuelto loca buscando iconos de lineas para poner debajo de los titulos de los Gadgets... sólo es una idea y supongo que no os vais a quedar sin ellas... jejeje... pero bueno yo propongo imágenes de lineas (esas que son como circulitos, flores, estrellitas) para poner bajo los títulos de los gadgets ^_^ Gracias por el trabajo que haces!

    ResponderEliminar
  28. Muchísimas gracias!!!! Lo hice en mi blog y quedó muy bien, además de muy sencillo!!
    Un beso!
    Ana.

    ResponderEliminar
  29. Fantástico tutorial, muchas gracias.

    Un beso,

    Anne.

    ResponderEliminar
  30. Encontrar tu blog es como haber recibido la Navidad adelantada!!!!!!!!!!!!!!!!!! Todos los tutoriales que tanto buscaba en la red para poder terminar mi blog.. AL FIN!!!!
    Gracias por estos tutos hermosura!!!

    Un beso enorme desde Uruguay!!!!!!!

    ResponderEliminar
  31. Super útil el tutorial, me gustaría hacer lo mismo pero poniendo la línea debajo del título del post...¿cómo quedaría el código?
    Muchas gracias!

    ResponderEliminar
  32. Fácil y cómodo!! me encanta lo bien que los explicas todo, a mi me va fantástico haberte descubierto. ♥

    Besos^^

    ResponderEliminar
  33. Llevaba muchísimo tiempo buscando este tutorial, pero... ¿cómo se cambia el color que encierra las cuatro líneas? Es decir, me gustaría que el cuadro del título tuviese color para diferenciarse del contenido del gagdet.

    ResponderEliminar
  34. Vale, ya lo he solucionado, el código para añadirle color a todos los gadgets y que sea compatible en todos los buscadores es:

    .sidebar h2 {
    height: 29px;
    line-height: 200%;
    padding-left: 5px;
    background: -ms-linear-gradient(top, rgba(41,154,11,1) 0%,rgba(41,154,11,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(41,154,11,1) 0%,rgba(41,154,11,1) 100%); /* W3C */
    text-align: center;}

    Con este código (en mi caso he escogido el color verde con una web donde proporcionan los Gradiantes) saldrán todos los fondos de los títulos con el mismo color y el texto centrado.

    Ahora bien, me surge otra pregunta, ¿cómo puedo hacer para que las esquinas sean redondas?

    ResponderEliminar
    Respuestas
    1. hola!! a qué te refieres con redondeadas??

      Eliminar
  35. Quiero aplicar algo así a mi blog porque es un cambio sencillo pero que queda muy vistoso y organiza mejor el contenido, sin embargo, en lugar de una línea me gustaría poner una imagen (como una girnalda de flores o banderines, una línea de puntitos, un brochazo de pincel...no sé si me explico)

    ResponderEliminar
  36. Genial este post, no sabia como hacerlo , pero me gustaría ponerlo solo en algunos, seleccionar donde lo quiero, es decir que no saliera en todos automáticamente. esto es posible podrías explicar como puedo hacerlo
    gracias.
    por cierto estoy de sorteo en mi blog mañana a las 12:00hs termina el plazo para inscribirse al sorteo.
    Os invito a todos y tb a seguirme
    gracias
    http://prymera-impresion.blogspot.com.es/

    ResponderEliminar
  37. Un pregunta, y si quiero que el texto, por ejemplo en tu blog 'ARCHIVO' esté en el medio de la línea, o solo quiero las líneas de arriba y la de abajo? cómo se hace? millones de gracias

    ResponderEliminar
    Respuestas
    1. Solo tendrías que poner números en la parte que poner border top y border bottom. Y para centrar... lo tienes también en el tuto.
      Todo lo que me preguntas está en el tutorial!! Léelo bien porfa!

      Eliminar
  38. wow!!eres una genia! muchas gracias! mira como quedo mi blog! www.letsdochocolate.blogspot.com

    ResponderEliminar
  39. Hola!
    Yo lo he hecho, pero me he arrepentido y aunque lo quito del CSS sigue estando ahí. ¿Qué puedo hacer?
    Ayúdame porfa!!

    ResponderEliminar
  40. Siempre termino en tu blog! Me encanta! Haces un trabajo fantástico con tus explicaciones. Un beso muy grande

    ResponderEliminar
  41. Fantástica la explicación, de veras, me estaba volviendo loca buscando esto en internet! Pero.....soy un poco torpe con estas cosas, un poco bastante.... y me da terror tocar nada!!!! Verás lo que deseo es eliminar las líneas horizontales de la barra dcha. de mi blog que separan los gadgets. La puse hace mucho tiempo y ya no le va nada al estilo del blog, claro y diáfano, así que quiero quitarlas. Por favor, sería mucha molestia que me lo explicaras por mail? Ya se que esto no es un consultorio personal y que si tuvieras que escribirnos a todos sería imposible, pero es que me vuelven loca todas estas cosas, es chino para mi. Te dejo aquí mi dirección de correo: pequenaturulata@hotmail.com
    Muchísimas gracias y felicidades por tu trabajo.

    ResponderEliminar
  42. Holaaaa!!! Está genial el tuto, pero podrías decir como poner las esquinas redondas? sin que estén esquinadas, con punta.

    Beshus!

    ResponderEliminar
    Respuestas
    1. Vale, ya lo solucioné, solo hay que añadir esta linea:

      -webkit-border-radius: 10px!important;

      Justo debajo de la penúltima línea, así:

      .sidebar h2{border-top: 1px solid #e7b5ae;
      border-left: 1px solid #e7b5ae;
      border-right: 1px solid #e7b5ae;
      border-bottom: 1px solid #e7b5ae;
      -webkit-border-radius: 10px!important;
      text-align: center;}

      Eliminar
  43. may no lo he podido añadir en css y lo he intentado en html y tampoco me sale ¿que hago?

    ResponderEliminar
  44. Hola May,
    Gracias a Dios encontré este post! Solo quisiera saber cómo hago para darle más espacio entre la línea y el título
    Abrazos!

    ResponderEliminar
  45. Gracias por el tutorial. Ya lo usé en mi blog! :)

    http://blahdisenosfelices.blogspot.com.ar/

    ResponderEliminar
  46. Y si lo que queremos es quitarlos??? Yo los puse pero ahora quiero quitarlos en mi cajita CSS no me aparece el código!!! Pero sigue siendo automático. Pongo un gagdet y sigue saliendo pero el código no aparece.

    ResponderEliminar
  47. Mil gracias, no sabes cuanto he buscado como decorar los bordes, me has salvado, gracias por el aporte, besos.

    ResponderEliminar
  48. a mi no hay manera de que me salga, me puedes ayudar?

    ResponderEliminar
  49. Hola soy nueva y tengo preguntas. Para que sistema operativo sirven tus consejos, pues yo trabajo con Macintosh.Gracias

    ResponderEliminar
  50. Estoy entusiasmada con tus tutoriales. Te sigo desde ya. Gracias a ti, mi blog empieza a estar a mi gusto, aunque todavía le falta: http://descabdello.blogspot.com.es/

    ResponderEliminar
  51. ¡Hola May!

    Una duda que me surge, ¿puedo poner en vez de una línea dos? No sé si me explico bien jajaja.

    Muchas gracias!

    ResponderEliminar

Muchas gracias por escribirme!! Si quieres puedes hacer alguna petición, recomendación... ¡¡Me encanta leeros!!