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. 

El código
Este es el código que tendréis que copiar y después pegar. 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.
.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;
}
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.
Curso online: Mini WEB master

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. 
Los 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.


Cómo modificar los bordes
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 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;}


Más modificaciones
Por aquí os dejo más modificaciones que podéis hacer en el código. Id con cuidado, sin prisa. También podéis cambiar el estilo de la fuente desde el propio menú de blogger, el color, el tamaño, lo que queráis.
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.

Y si queréis aprender más sobre diseño de blogs, cómo montar una tienda online o una web en blogger, os dejo por aquí los cursos que os pueden interesar. Todos son permanentes, incluyen decenas de vídeos, manuales, recursos y actividades 


Como diseñar web tienda online blogger
Como diseñar web tienda online blogger
MEGAPACK 
elige los 5 cursos que quieras
CURSO 
presentaciones con power point , infografías y líneas del tiempo
CURSO
Diseña tu imagen corporativa, branding y redes sociales
PACK 
emprender
75€
22€
50€
65€

Ver todos los cursos


La newsletter
Suscríbete a la newsletter, más conocida como cartica y descubre un poco de todo: novedades, mi vida, mis desahogos, las miserias de la vida, ofertas y promociones especiales, etc. No hay una fecha concreta, la envío cuando me brota, cuando tengo algo que contar.

Tus datos serán tratados de acuerdo a la política de privacidad,. 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

Compártelo

Otros posts intersantes: