Galeria de imagenes y texto
Es muy fácil crear tablas para Blogger, además puedes incluir imágenes o texto, en Blogger In te enseñamos a crear tablas para tu blog.
Con un sencillo código podemos incluir tablas vistosas para vuestros blogs, como véis en la imágen superior yo he creado varias en mi blog,
Tú también puedes aprovechar éste recurso para dar a tu blog una presencia organizada incluyendo tablas allí donde no puedes usar el tabulador.
Si quieres verlas en vivo dirijete a mi blog de Pruebas
Para poner tablas en una entrada o una página de tu blog, procede de la siguiente forma:
Crea un titular al comienzo de la entrada expresando lo que expones
Ve al modo HTML de la entrada o página y según sea para imagen o texto incluye el siguiente código:
Para imágenes:
<table align="center" bgcolor="#FA58AC" border="2" bordercolor="#F7819F" cellpadding:"1" cellspacing="3" >
<tbody>
<tr>
<td><img src="URL de la imágen" height="150" width="150" /></td>
<td><img src="URL de la imágen" height="150" width="150" /></td>
</tr>
<tr>
<td><img src="URL de la imágen" height="150" width="150" /></td>
<td><img src="URL de la imágen" height="150" width="150" /></td>
</tr>
</tbody></table>
<tbody>
<tr>
<td><img src="URL de la imágen" height="150" width="150" /></td>
<td><img src="URL de la imágen" height="150" width="150" /></td>
</tr>
<tr>
<td><img src="URL de la imágen" height="150" width="150" /></td>
<td><img src="URL de la imágen" height="150" width="150" /></td>
</tr>
</tbody></table>
Para texto:
<table align="center" border="2" bordercolor="#F7819F" cellpadding="1" cellspacing:="3">
<tbody>
<tr>
<td>Aquí el texto</td>
<td>Aquí el texto</td>
</tr>
<tr>
<td>Aquí el texto</td>
<td>Aquí el texto</td>
</tr>
</tbody></table>
<tbody>
<tr>
<td>Aquí el texto</td>
<td>Aquí el texto</td>
</tr>
<tr>
<td>Aquí el texto</td>
<td>Aquí el texto</td>
</tr>
</tbody></table>
Podéis cambiar los parámetros que véis en rojo, la descripción es la siguiente:
Donde pone center es centrado, cambiar por right o left si quréis la tabla alineada hacia un lado.
Donde pone bgcolor es el color de fondo de la tabla.
Donde pone border es el grosor del borde de la tabla.
Donde pone bordercolor es el color del borde de la tabla.
Donde pone cellpadding es el espacio que hay entre el borde y la imagen.
Donde pone cellspacing es el espacio que dejamos entre las celdas.
Donde pone URL de la imagen debéis pegar la URL de la imagen que queráis.
Donde pone 150 es el tamaño de la imagen, height es el alto y width es el ancho.
Donde pone Aquí el texto ponéis el texto que va dentro de cada celda.
Entre <tr> y </tr> podeis añadir más líneas para más imágenes ó textos horizontalmente.
Para poner más filas de imágenes sólo tenéis que añadir más cuerpos de código:
<tr>
<td><img src="URL de la imágen" height="150" width="150" /></td>
<td><img src="URL de la imágen" height="150" width="150" /></td>
</tr>
Para poner más filas de textos sólo tenéis que añadir más cuerpos de código:
<tr>
<td>Aquí el texto</td>
<td>Aquí el texto</td>
</tr>
También podéis mezclar imágenes y textos en la misma tabla, allí donde queráis una imágen añadís una línea de código de imagen y un texto añadís una línea de código de texto, quedando de la siguiente forma:
<tr>
<td><img src="URL de la imágen" height="150" width="150" /></td>
<td>Aquí el texto</td>
</tr>
Nota Importante: Si cambiáis los valores de texto amenudo sólo visualizar la edición de la entrada o página en modo HTML, porque si lo visualizáis en modo Edición se os descolocará la tabla.
0 comentarios:
Publicar un comentario