Reducir el tamaño de las entradas en el inicio de Blogger

En ocasiones nos parece que una entrada resulta demasiado larga para colocarla de forma íntegra y nos parece más interesante poner sólo una parte de la misma a modo de aperitivo, de manera que quién esté interesado pueda acceder a la información completa a través del típico "Leer más".

Prueba leer mas

Para insertar una tabla en Blogger, debemos realizar los siguientes pasos. Lo primero será insertar el código html correspondiente. Podemos partir de una tabla 3x3, dónde C representa Columnas y F filas, algo como esto:

<table border="1" cellpadding="5"><tbody>

<tr><td>C1,F1</td>

     <td>C2,F1</td>

     <td>C3,F1</td></tr>

<tr><td>C1,F2</td>

     <td>C2,F2</td>

     <td>C3,F2</td></tr>

<tr><td>C1,F3</td>

     <td>C2,F3</td>

     <td>C3,F3</td></tr>

</tbody></table>

Tabla 3x3 añadida en blogger.

Podemos ir observando que, sólo con este código ya podemos modificar:

Introducir tablas en Blogger

Para insertar una tabla en Blogger, debemos realizar los siguientes pasos. Lo primero será insertar el código html correspondiente. Podemos partir de una tabla 3x3, dónde C representa Columnas y F filas, algo como esto:

<table border="1" cellpadding="5"><tbody>

<tr><td>C1,F1</td>

     <td>C2,F1</td>

     <td>C3,F1</td></tr>

<tr><td>C1,F2</td>

     <td>C2,F2</td>

     <td>C3,F2</td></tr>

<tr><td>C1,F3</td>

     <td>C2,F3</td>

     <td>C3,F3</td></tr>

</tbody></table>

Tabla 3x3 añadida en blogger.

Podemos ir observando que, sólo con este código ya podemos modificar:
i. El tipo de borde de nuestra tabla "border". SI lo definimos como "0" no veremos el borde y desde 1 en adelante sólo modificaremos el grosor de la segunda línea, la línea exterior.
ii. El margen de separación del texto con los bordes de la tabla "cellpadding". A mayor número mayor distancia de separación.
iii. Incluir nuevas filas o nuevas columnas según nuestras necesidades. Para ello simplemente añadiremos <tr> para filas y <td> para columnas.

Por supuesto, existen múltiples opciones más:
- Muchas veces nos interesa que la tabla se adapte al ancho de nuestro blog. Para ello recurrimos a una orden CSS, la opción style="width: 100%;". Si modificamos ese 100% se adaptará hasta el punto que nosotros queramos, pero siempre en función del ancho definido en el blog. Quedaría así:

<table style="width: 100%;" border="1" cellpadding="5"><tbody>
<tr><td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Adaptar nuestra tabla al ancho del blog.

- Podemos cambiar el color de todo el fondo de la tabla. Para ello escribiremos bgcolor="grey" después de <table.

<table bgcolor="grey" border="5" cellpadding="5"><tbody>
<tr><td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Añadir un color de fondo a la tabla.

- Es posible que nos interese que la primera fila tenga un color de fondo mientras que el resto de la tabla tenga otro (o no tenga). Para conseguir éste efecto podemos añadir el atributo bgcolor tras la <tr> que nos interese, por ejemplo la primera:

<table border="5" cellpadding="5"><tbody>
<tr bgcolor="purple"> <td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Cambiar el color de fondo sólo a ciertos elementos (fila en este caso).

- En lugar de un color de fondo podemos insertar una imagen de fondo bajo la tabla, para ello utilizamos la opción background="URL de la imagen" (como ya veíamos para entradas) después de <table. Por ejemplo:

<table background="http://us.123rf.com/400wm/400/400/loskutnikov/loskutnikov1106/loskutnikov110600045/9719891-tabla-de-madera-vieja-fondo.jpg" border="5" cellpadding="5"><tbody>
<tr><td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Añadir una imagen de fondo a la tabla.

- Otro parámetro modificable es el color del borde. La instrucción es bordercolor y, nuevamente debemos añadirla tras <table>.

<table bordercolor="blue" border="5" cellpadding="5"><tbody>
<tr> <td>C1,F1</td>
    <td>C2,F1</td>
    <td>C3,F1</td></tr>
<tr><td>C1,F2</td>
    <td>C2,F2</td>
    <td>C3,F2</td></tr>
<tr><td>C1,F3</td>
    <td>C2,F3</td>
    <td>C3,F3</td></tr>
</tbody></table>

Cambiar el color del borde de la tabla.

- Podemos plntearnos el centrar el texto en su correspondiente celda. Para ello añadimos align="center" después de <tr> o <td> si queremos que sólo afecte a ciertas filas o columnas. 

  <table border="1" cellpadding="5"><tbody>
  <tr align="center"><td>C1,F1</td>
         <td>C2,F1</td>
         <td>C3,F1</td></tr>
    <tr><td>C1,F2</td>
         <td>C2,F2</td>
         <td>C3,F2</td></tr>
    <tr><td>C1,F3</td>
         <td>C2,F3</td>
         <td>C3,F3</td></tr>
    </tbody></table>

Centrar el texto.

- La famosa opción "combinar celdas" también es aplicable. Así lo único que haremos es utilizar código CSS de manera que la fila a combinar (o columna) se reduzca a una instrucción simple colspan. La idea es utilizar este comando definiendo cuantas celdas quieres agrupar, 3 en nuestro caso. Si quieres puedes alinearlas como hemos hecho en el ejemplo y añadir el texto como hacíamos siempre.

 <table style="width: 100%;"border="1" cellpadding="5"><tbody>
    <tr><td colspan="3" align="center">Combinar fila 1</td></tr>
    <tr><td>C1,F2</td>
         <td>C2,F2</td>
         <td>C3,F2</td></tr>
    <tr><td>C1,F3</td>
         <td>C2,F3</td>
         <td>C3,F3</td></tr>
    </tbody></table>

Combinar celdas en la tabla.

- Además podemos centrar la tabla respecto al fondo de la entrada añadiendo align="center" después de <table.

    <table align="center" border="1" cellpadding="5"><tbody>
    <tr><td>C1,F1</td>
         <td>C2,F1</td>
         <td>C3,F1</td></tr>
    <tr><td>C1,F2</td>
         <td>C2,F2</td>
         <td>C3,F2</td></tr>
    <tr><td>C1,F3</td>
         <td>C2,F3</td>
         <td>C3,F3</td></tr>
    </tbody></table>

Centrar tabla respecto al fondo de la entrada.

Estos son algunos de los ejemplo de modificaciones que más se suelen usar, pero hay muchos más, tantos como puedas imaginar y necesitar, así que sólo tienes que probar y crear.

Añadir una imagen de fondo a una entrada

Añadir una imagen de fondo a una entrada es relativamente fácil, pero requiere necesariamente la utilización de html. La idea es copiar el siguiente código en html: <table bordercolor="#000000" cellspacing="5" cellpadding="5" width="100%" background="URL de la imagen de fondo" border="0"><tbody><tr><td><p>En éste espacio debes incluir el conjunto de texto de la entrada. Desde la opción "Redactar" podrás modificar cuanto quieras de él y trabajar como con cualquier otra entrada.</p></td></tr></tbody></table> Así por ejemplo podríamos hacer lo siguiente, agregamos una imagen de fondo: <table bordercolor="#000000" cellspacing="5" cellpadding="5" width="100%" background="http://hd-wallpaper.org/wallpapers/10/Rainbow_Wave_Length.jpg" border="0"><tbody><tr><td><p>Ejemplo de insercción de imagen de fondo en una entrada de Blogger</p></td></tr></tbody></table> Como ves, también podremos moddificar el color del borde (bordercolor), los márgenes de la imagen al texto (cellspacing, cellpadding) o la anchura (width). Recuerda elegir imágenes no demasiado chillonas, con buena resolución y de un tamaño adecuado para la extensión de tu entrada para así evitar el "efecto tesela". Puede ser aconsejable trabajar la opacidad de dicha imagen, su brillo o contraste en la búsqueda de un mejor resultado (sea en InkScape o en Gimp).

Como traducir tu Blog (Blogger)

El objetivo es colocar una opción en la barra lateral, a modo de gadget, que nos permita traducir el blog entero al idioma deseado.

Gadget del traductor de Google.

Existen varias soluciones pero nuestra recomendación es usar Google Translate. Se trata de una potente y versátil herramienta en constante evolución.

Lo que debemos hacer es:
i. Entrar en Google translate, y concretamente en Traductor de sitios web. Esta opción se encuentra en la parte inferior de la ventana (ver imagen adjunta).

Ubicación de Google Translate. Pestaña para traducir webs y blogs.

ii. Accedes a una página que nos va a permitir configurar las opciones deseadas (ver imágen):

Opciones de Google Translate.

iii. Simplemente debemos configurar las opciones que deseemos y copiamos el código html (la zona recuadrada en rojo en la imagen).
iv. El último paso será copiar ese código copiado en un gadget de html.