:::: MENU ::::

Get Free Tips to Kick Ass in Business and Life

Etiquetas:
A veces, cuando escribimos un post, tenemos la necesidad de resaltar cierta parte del texto, poner datos adicionales o simplemente, hacer un resumen final


Para estos casos, una buena opción es la creación de una tabla, como esta que os enseño

⌂ Nombre restaurante
✉ Dirección
Ⓜ Parada de metro
⌚ Horario
☎ Teléfono
$ Precio

En mi caso particular, la utilizo tanto como como resumen de datos de contacto cuando recomiendo algún restaurante por ejemplo, tal y como os enseño arriba, o para personalizar la caja de suscripción por mail. Mirad que diferencia


Como os digo, tiene múltiples de aplicaciones y es realmente fácil de hacer aunque Blogger no nos dé una opción automática

Cuando estéis escribiendo un post y queráis insertar una tabla, tan solo debéis ir a la pestaña de arriba a la izquierda que dice HTML, y pegar el siguiente código


<div align="center"><table bgcolor="#bc91ed" border="0" cellpadding="3" cellspacing="1" style="width: 350px;">
<tbody>
<tr> <td>Aquí podemos escribir una línea
</td></tr>
</tbody></table></div>


No os asustéis que os explico que es todo lo que veis arriba

table bgcolor="bc91ed" es el color de fondo de la tabla. La mía como veis es de un color verdoso, pero vosotras podéis personalizarla con el color que más os guste. Para obtener el código del color, solo debéis ir a la web de Color Hex, elegir el color que más os guste y ahí, os informará del código que corresponde a ese color. Fácil!

border:0 es la línea que rodearía la tabla, en el caso que la tuviéramos. En este caso es 0 porque no hay, si queréis una línea solo debéis poner 1. Poner un número más alto en función del grosor de la línea, como más alto el número, más gruesa es la línea

cellpadding=3 es el equivalente a lo que sería un margen de la derecha e izquierda, o sea, el espacio libre desde que se acaba la letra hasta que finaliza la tabla. Puedes variar este número a gusto, en función del espacio que desees dejar

cellspacing=1 igual que en el punto anterior, pero solo que corresponde al margen de arriba y abajo

style="width:350px" es el ancho total de la tabla. Totalmente personalizable en función del espacio que necesitéis. Ya sabéis que no se mide con centímetros, sino con píxeles


Ahora ya sí, podemos empezar a escribir lo que queramos, tal y como os escribo arriba

Y ahora me podéis preguntar, ¿y cómo lo haces para insertar el formulario de suscripción por mail en la tabla?

Fácil, vosotr@s ya tenéis el código HTML que corresponde a vuestra suscripción. Pues este mismo código, debéis insertarlo donde dice aquí podemos escribir una línea, y ya. Nuestro formulario nos aparecerá con el color y los margenes que hayamos definido

No es nada difícil, en serio, pero eso sí, si no estáis acostumbrad@s al HTML, tenéis que tomarlo en calma

Como ya os he dicho en otra ocasión, las prisas son malas amigas, así que inspirar, dedicarle un tiempecillo hasta que lo tengáis por la mano, vale la pena

NOTA1 Estas tablas os sirven tanto para resaltar información como para poner bien bonita la cajetilla de suscripción por mail

NOTA2 Para saber como daros de alta en la suscripción por mail y poder ofrecer el servicio de Feedburner a vuestros lectores, mira este post






¡Feliz año nuevo!

9 comentarios:

  1. Hola Is, en el caso de insertar el código para personalizar la newsletter, ¿dónde está "escribir una linea"? ay madre, que torpeza! mil gracias

    ResponderEliminar
  2. Celia, en la imagen de color rosa pone "escribir una línea", ahí debes hacer lo que tengas en mente :)

    ResponderEliminar
  3. Por fin he aprendido a crear tablas en mis posts!! MIL GRACIAS!!!

    ResponderEliminar
  4. Hola Isa.... Como podría cambiar el tipo de letra?
    Un saludo y gracias ¡¡¡¡¡

    ResponderEliminar
    Respuestas
    1. Hola Manuel! pues te aparecerá la letra que tengas por defecto en tu blog, un abrrazo!

      Eliminar
  5. Buenas! y en caso de poner un fondo en la tabla y no un color?
    he sustituido el código del color por el de background... pero no me sale el fondo.
    como podrías funcionar?
    gracias.

    ResponderEliminar
    Respuestas
    1. debería ser otro tutorial, porque este es sólo para fondo de color. de todas maneras, haz un montaje de foto, será lo más fácil. saludos!

      Eliminar
  6. Hola Is, genial el tutorial. Sabes como se puede cambiar tambien el tipo de letra?
    Gracias!!

    ResponderEliminar
    Respuestas
    1. te dejo aquí ejemplo para que lo apliques al código de arriba :)

      <tr> <td>

      <span style="align: center; color: black; font-family: arial;">tu texto</span>

      </td></tr>

      Eliminar
Impulsa tu proyecto YA Empieza ahora