Poner líneas en títulos de gadget

como poner lineas en los titulos gadget blogger

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. Es un detalle sencillo pero que os puede gustar. Además, no hace falta que coloquemos estas líneas siempre que pongamos un título distinto en el blog. 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. 
Curso online: MiniWeb Máster
Resumen del curso
Esta web, donde estáis ahora mismo, es un blog de blogger modificado por mí, y en este curso te cuento todo lo que yo he hecho para transformar un blog de blogger en una web bonita, sencilla y práctica como esta. 

Inicio: 
Lo empiezas cuando tú quieras. Te apuntas y empiezas el curso.
Final:
El curso es permanente, no hay límite de tiempo.
Materiales:
Instrucciones paso a paso con código en documentos Word para que sea fácil de copiar y pegar, manual y vídeos explicativos.
Vídeos
El curso incluye 20 vídeos explicativos, más de 11 horas de información
Información:
Curso online, permanente, lo haces a tu ritmo. Necesitas internet y word. Te daré el acceso a la plataforma de cursos desde donde podrás seguir toda la formación. 

Paso 1: copiar

Copiamos todo el código que aparece aquí abajo y lo vamos a pegar en un documento Word para hacer modificaciones. He resaltado con colores las partes que podéis modificar para personalizar, un poquito, el buscador. El texto en azul indica para qué sirve cada línea que podéis modificar. 
.sidebar h2{
border-top1px solid #000000;  
/*tamaño, estilo y color del borde superior*/
border-left: 1px solid  #000000;  /*tamaño, estilo y color del borde izquierdo*/
border-right1px solid  #000000;  /*tamaño, estilo y color del borde derecho*/
border-bottom: 1px solid  #000000;  /*tamaño, estilo y color del borde inferior*/
text-align: center;  /*alineación del texto*/

Paso 2:
Ahora que tenemos el código pegado en un documento Word, vamos a hacer algunos cambios. 
Cómo hacer los cambios:
Los bordes: el grosor
Comenzamos con las modificaciones. Si aumentamos el número conseguiremos que el grosor del borde sea mayor Si queréis que alguna de las líneas no aparezca, pondremos un 0PX en la parte correspondiente: izquierda, derecha, etc. Aquí os dejo un ejemplo: 

Solo la línea inferior

.sidebar h2{
border-top: 0px solid #000000; /*tamaño, estilo y color del borde superior*/
border-left: 0px solid #000000; /*tamaño, estilo y color del borde izquierdo*/
border-right: 0px solid #000000; /*tamaño, estilo y color del borde derecho*/
border-bottom: 1px solid #000000; /*tamaño, estilo y color del borde inferior*/
text-align: center; /*alineación del texto*/
}
Los colores
Los colores aparecen siempre después de "#".Para hacer los cambios de color iremos a esta página, elegiremos el color, lo copiaremos y lo pegaremos en su lugar. No os olvidéis de la "#" para que todo funcione bien. Si hemos puesto 0px da igual que código pongáis porque no aparecerá. 

Estilo de la línea y posición
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. Aquí os dejo un posible ejemplo. 
Solo la línea inferior en negro con puntitos

.sidebar h2{
border-top: 0px solid #000000; /*tamaño, estilo y color del borde superior*/
border-left: 0px solid #000000; /*tamaño, estilo y color del borde izquierdo*/
border-right: 0px solid #000000; /*tamaño, estilo y color del borde derecho*/
border-bottom: 1px dotted #000000; /*tamaño, estilo y color del borde inferior*/
text-align: center; /*alineación del texto*/
}
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 mí me gusta cómo queda el título de gadget centrado, me parece más apañado, pero podéis hacer lo que queráis. Ya sabéis que en vuestro blog mandáis vosotros.

Paso 3: Instalar

Ahora que ya tenemos nuestro código modificado en un documento Word, vamos a copiarlo.
1. Entramos en blogger y vamos a la sección de TEMA + PERSONALIZAR + AVANZADO + AÑADIR CSS (aparecerá al hacer clic en el menú desplegable con todas las opciones de personalización).
2.En la pantalla blanca que nos aparecerá pegamos el código anterior
3. Nada mas pegarlo veremos cómo queda en la web. Si no nos gusta, haremos la modificaciones necesarias en el documento Word. Cuando tengamos lo cambios, volvemos a copiar, borramos el código que teníamos y pegamos el nuevo. 4. Cuando nos guste, le damos a guardar
Cursos papelería
CURSO PAPELERÍA PARA ORGANIZARTE
Diseña toda la papelería que necesitas para organizarte: planificadores, menús, horarios y mucho más.
más info
PACK PROFES FETÉN
Incluye el curso de apuntes flamantes, el curso de presentaciones, curso de material docente y la clase de unidades didácticas y programaciones.
más info
PACK ESTUDIANTES CUM LAUDE
Incluye el curso de apuntes flamantes, el curso de presentaciones. Perfecto para estudiantes y opositores.
más info
CURSO TUS APUNTES FLAMANTES
Aprende a preparar tus apuntes de una forma sencilla, práctica y significativa. Usaremos Word y Power Point.
más info
CURSO DISEÑA TU MATERIAL DOCENTE
Aprende a diseñar material para tu aula, para tu organización de profe, cuadernos de profe, actividades, unidades didácticas y mucho más.
más info
CURSO DISEÑO DE PACKAGING
Diseña con Power Point tu packaging: tarjetas, kits de fiesta, etiquetas, menús, meseros. Para tus fiestas, para tu empresa.
más info
CLASE UNIDADES DIDÁCTICAS Y PROGRAMACIONES
Clase para diseñar y maquetar tus unidades didácticas y programaciones. Además de plantillas editables, te enseñaré a crear las tuyas y adaptar las mías a lo que tú necesites. 
más info
CLASE EBOOKS, GUÍAS Y CATÁLOGOS
Aprende a diseñar y maquetar ebooks, cursos online, manuales, guías, catálogos, con Power Point. 
más info
PACK DISEÑA TU ORDEN
Incluye el curso para diseñar papelería para y el curso para diseñar e imprimir tu agenda.
más info
PACK DISEÑA PAPELERÍA
El pack de cursos para diseñar papelería para organizarte y todo el packaging que tú quieras.
más info
CURSO DISEÑA TU AGENDA
Aprende a diseñar e imprimir tu agenda perfecta. El curso incluye decenas de plantillas editables y vídeos.
más info
Taller infografías
El curso para aprender a diseñar infografías con Power Point
más info
Pack Opositores docentes
Incluye el curso de apuntes flamantes y la clase de unidades didácticas y programaciones
más info
Pack apuntes e infografías
Pack formado por el curso de apuntes flamantes y el taller de infografías 
más info
Megapack de cursos
Elige los 5 cursos que tú quieras y una clase de regalo
más info
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: