Poner líneas en títulos de gadget


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!

Megapack
elige los 5 cursos que tú quieras
Curso
presentaciones
con power point
Pack
Pequeño gran emprendedor
Curso
diseña tu marca
personal
precio: 75€
precio: 17€
precio: 52€
precio: 35€


N E W S L E T T E R

Al suscribirte a esta cartica recibirás noticias exclusivas, descuentos, preventas y material exclusivo para gente VIP. 


Tus datos serán tratados de acuerdo a la política de privacidad, faltaría más. Yo, Maite, soy la que te enviará toda la información pero le pido ayuda a MadMimi. No serán cedidos a terceros, ni utilizados para otros fines que no sean los expuestos anteriormente. Si lo deseas, podrás darte de baja y no volveré a utilizar tus datos. Y, para ejercer cualquier derecho que tengas, escríbeme a hola@creativemindly.com



SI TE HA GUSTADO ¡COMPÁRTELO!

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

Otros posts intersantes: