Cómo crear un índice de posts con imágenes - parte II -

como hacer tablas índice imágenes y texto blogger

En esta entrada te cuento cómo crear un índice o una tabla de contenidos en blogger donde incluiremos texto y fotos. Si quieres solo texto, ve a esta entrada, ahí te lo cuento mejor. Lo complicado no es hacer el índice, para nada, sino pensar en las secciones, ordenar, enlazar, etc. Tardarás un rato, pero merecerá la pena. Esto de aquí abajo es lo que vamos a aprender a hacer.
textotextotexto
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.  En el curso también os cuento cómo hacer tablas responsive, que son muy prácticas para que todo se vea de maravilla en el móvil. Entre otras muchas cosas. Podéis descargar el índice desde el botón de abajo u obtener más información sobre este curso. 

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 el código

Elige el número de columnas que quieras: dos, tres o cuatro columnas. Copia el código y lo pegas en la edición HTML de una entrada o página de blogger. Una vez pegado, podrás hacer las modificaciones. He resaltado con colores las partes que puedes modificar para personalizar, un poquito, las tablas.
Código para 2 columnas solo fotos
<table style="font-family: arial; font-size: 9px; letter-spacing: 0px; margin: 10px auto; text-align: center; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<tr>
<td style="border1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>
Código para 2 columnas fotos y texto
<table style="font-family: arial; font-size: 9px; letter-spacing: 0px; margin: 10px auto; text-align: center; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<tr>
<td style="border1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
<tr>
<td style="border1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>
texto texto
Código para 3 columnas solo fotos
<table style="font-family: arial; font-size: 9px; letter-spacing: 0px; margin: 10px auto; text-align: center; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<tr>
<td style="border1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>
Código para 3 columnas fotos y texto
<table style="font-family: arial; font-size: 9px; letter-spacing: 0px; margin: 10px auto; text-align: center; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<tr>
<td style="border1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
<tr>
<td style="border1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>
texto texto texto
Código para 4 columnas
<table style="font-family: arial; font-size: 9px; letter-spacing: 0px; margin: 10px auto; text-align: center; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<tr>
<td style="border1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>
Código para 4 columnas fotos y texto
<table style="font-family: arial; font-size: 9px; letter-spacing: 0px; margin: 10px auto; text-align: center; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<tr>
<td style="border1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>

<tr>
<td style="border1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>
texto texto texto texto
Paso 2: las modificaciones
Ahora que tienes el código pegado en la vista HTML de  tu entrada o página Blogger, podráshacer los siguientes cambios.
Cambios básicos:
Ahora te voy a explicar los cambios básicos que puedes hacer en tus tablas. Ten cuidado de no borrar ningún guion ni signo, si lo haces no te funcionará. Todos estos cambios los vamos a hacer en la visión HTML de nuestra entrada, una vez que hayamos pegado el código con el número de columnas que queramos. 

Font-size:
Este código corresponde con el tamaño de la tipografía que aparecerá dentro de las celdas. Por defecto he puesto 9px, pero puedes cambiar el 9 por otro número, el que quieras. No borres el px, modifica solo el número. Cuando hagas el cambio, dale a vista previa para valorar si te sirve o no. 

Letter-spacing:
Este código corresponde al espacio entre las letras. Por defecto he puesto 0px, es decir, sin espacio, pero puedes aumentar esta separación cambiando el 0 por otro número. No borres el px, modifica solo el número. Cuando hagas el cambio, dale a vista previa para valorar si te sirve o no. 

font-family:
Se refiere al estilo de la tipografía que quieras. Yo te he dejado una muy sencilla, pero puedes modificarla. Para poder hacerlo, entrad en esta web. En ella encontrarás distintas tipografías. Elige la que quieras haciendo clic sobre ella. 

En la parte inferior derecha aparecerá el código de esa tipografía. Copiaremos el texto que aparece después de font family y lo pegaremos en su lugar en nuestro documento WordEste es el código que nos aparecerá en la web. Lo resaltado en negrita y rojo será lo que copiemos y peguemos, incluido el punto y coma.
/* This text is in Century Gothic */ .
class {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
}
Pegaremos ese código en el lugar de arial. Asegúrate de que solo hay un punto y coma detrás del código de la tipografía. Te dejo aquí un ejemplo de cómo podría quedar.
<table style="font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 9px; letter-spacing: 0px; margin: 10px auto; text-align: center; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<tr>
<td style="border1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>


Los bordes: border
Todo el código que viene detrás de border nos permitirá hacer modificaciones en las líneas de la celda. 
Grosor del borde: 1px
Si no quieres que tus celdas tengan borde: pondremos un 0px. Ese 0px lo pondremos en todos los bordes.
Si quieres un grosor mayor en el borde aumentaremos el número. No te recomiendo que pongas un tamaño mayor de 3px. Pondremos el mismo tamaño en todos los bordes.

Estilo del borde: solid
El estilo solid significa que la línea es sólida, lisa
Si queremos una línea de puntitos, sustituiremos solid por dotted en todos los códigos de borde.
Si queremos una línea discontinua, sustituiremos solid por dashed en todos los códigos de borde. 

Los colores
El código numérico que viene detrás de la almohadilla hace referencia al color de la línea.  Si has decidido que quieres que las celdas tengan línea, podremos cambiar su color.  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.

El número de bordes
Si quiero todos los bordes, los 4 dejo border, no modifico el código original en rosa.
Si quiero borde superiorsustituimos todos los border por border-top en todos los códigos del borde.
Si quiero borde inferiorsustituimos todos los border  por border-bottom en todos los códigos del borde.
Si quiero borde izquierdosustituimos todos los border  por border-left en todos los códigos del borde.
Si queremos borde derecho: sustituimos todos los border  por border-right en todos los códigos del borde.

Ejemplo: dos columnas, bordes inferiores
<table style="font-family: arial; font-size: 9px; letter-spacing: 0px; margin: 10px auto; text-align: center; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<tr>
<td style="border-bottom2px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border-bottom2px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>

Paso 3: extras
Puedes dejar las columnas como están, pero yo te invito a que hagas alguna modificación más. Aquí te dejo dos muy útiles. 
Poner color de fondo a las celdas
Puede ser que quieras bordes en las celdas y también un color de fondo en cada una de las celdas. 

1. Elegimos el código según el número de columnas que queramos. Lo copiamos y lo pegamos en nuestra entrada de blogger en la vista HTML.
2. Después de pegar el código, justo delante de border, pegaremos el siguiente código background: #f9fad3; como puedes ver en el ejemplo. No te olvides del punto y coma.
3. Podremos cambiar el color del fondo utilizando la web que he dejado más arriba. Puedes poner un mismo color en todas las celdas o combinar distintos colores, como quieras.
4. Si queremos que solo aparezca el color de fondo, pero sin línea, en el apartado de 1px pondremos 0px.
5. Utiliza la vista previa para ver cómo está quedando todo.

Ejemplo: 3 columnas con color de fondo y sin líneas
<table style="font-family: arial; font-size: 9px; letter-spacing: 0px; margin: 10px auto; text-align: center; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<tr>
<td style="background: #f5f8ccborder0px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="background: #feafdfborder0px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="background: #aca2e0border0px solid #666666; padding: 5px; width: 180px;">texto</td>
</tbody></table>
texto texto texto

Poner varias filas
Si solo queremos una fila de celdas, no hará falta que sigas estos pasos. Pero si quieres colocar varias celdas, unas debajo de otras, tendrás que seguir estos pasos.
 
1. Una vez que hayas elegido el código con el número de columnas que quieras y hayas hecho todas las modificaciones: colores, fondos, tipografías, grosores, etc. Copiaremos todo el código desde <tr> hasta </td>.
2. Justo debajo de </td> pegaremos el código que hemos copiado tantas veces como filas necesitemos.
3. Utiliza la vista previa para ver cómo está quedando todo.

Ejemplo: 3 columnas y 4 filas: imagen y texto
<table style="font-family: arial; font-size: 9px; letter-spacing: 0px; margin: 10px auto; text-align: center; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<tr>
<td style="border0px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border0px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border0px solid #666666; padding: 5px; width: 180px;">texto</td>
<tr>
<td style="background: #feafdf; border0px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="background: #feafdfborder0px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="background: #feafdf; border0px solid #666666; padding: 5px; width: 180px;">texto</td>
<tr>
<td style="border0px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border0px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border0px solid #666666; padding: 5px; width: 180px;">texto</td>
<tr>
<td style="background: #feafdf; border0px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="background: #feafdfborder0px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="background: #feafdf; border0px solid #666666; padding: 5px; width: 180px;">texto</td>

</tbody></table>
texto texto texto
texto texto texto

Paso 4: escribir el texto y publicar
Cuando ya tengas todas las filas y celdas que quieras (podemos ver cómo está quedando todo en vista Previa) y hayas hecho todas las modificaciones de código, podrás volver a la vista de redacción de las entradas blogger y escribir el texto correspondiente en cada una de las celdas, además de agregar las fotos en las celdas correspondientes. 

Podrás poner links en el texto o en las fotos con normalidad, para que te lleve al lugar de la web que quieras o a otro link externo. Cuando todo esté listo, publicaremos la entrada o la página.
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: