
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-top: 1px solid #000000; /*tamaño, estilo y color del borde superior*/ border-left: 1px solid #000000; /*tamaño, estilo y color del borde izquierdo*/ border-right: 1px 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:
|
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.
|
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 |