Cómo hacer tres columnas dentro de un artículo en Blogger

Blogger no tiene una opción por defecto para crear columnas en un mensaje, pero se puede usar HTML básico para crear un efecto de la columna en sus mensajes de Blogger. Una opción para la creación de columnas es el uso de tres elementos DIV de lado a lado, lo que crea cajas independientes de contenido dentro de cada elemento. La ventaja de usar DIVs es que cada uno puede ser de diseño individualizado, la creación de tres columnas que se ven muy diferentes. La otra opción es crear una tabla con tres células de lado a lado. Las tablas pueden ser más fáciles de trabajar, ya que ofrecen una mayor estructura y muy poca variación entre las células.

Instrucciones

Columnas con una mesa

1 Abrir una nueva entrada en el blog y haga clic en la pestaña "Componer HTML" en la esquina superior derecha del área de texto de redacción. Esto abre el editor de HTML y elimina las opciones de texto enriquecido.

2 Comience su tabla con el siguiente código:

<Table width = "100%" cellpadding = espaciado de celda "5" = frontera "5" = "1">

Los elementos de anchura, cellpadding, cellspacing y fronterizas pueden todos cambiar a su gusto. "Cellpadding" se refiere a la cantidad de espacio en píxeles está presente dentro de una célula entre el contenido y el borde. "Cellspacing" se refiere a la cantidad de espacio en píxeles es entre cada célula. El atributo "frontera" puede ser ajustado a "0" si no desea que el borde sea visible, o un valor superior si desea dejar un borde más grueso. El "width =" 100% "" declaración pone la mesa para llenar su espacio, pero esto se puede cambiar a una anchura más pequeña o más específica, expresada en píxeles.

3 Tipo "<tr>" en la línea siguiente para iniciar el registro de la tabla. Usted sólo tendrá una fila de la tabla.

4 Iniciar la primera célula con el siguiente código:

<Td valign = "top" align = "left" width = "33%">

El atributo "valign" asegura que el texto siempre se alineará con la parte superior de la célula; Si no se especifica, los contenidos se centrarán verticalmente dentro de la célula, si está vacío. "Align =" left "" se refiere a la alineación horizontal del texto dentro de la célula; usted puede cambiar esto a "centro" o "derecho" si lo desea. El ancho utiliza un porcentaje para cubrir aproximadamente un tercio de su espacio, pero como con la mesa, esto se puede cambiar a un ancho específico, expresado en píxeles.

5 Ingrese el contenido de la celda inmediatamente después de la etiqueta "<td>"; si se inicia en la línea siguiente, Blogger insertará un salto de página antes del contenido de la celda. Una vez que el contenido está vacío, poner fin a la celda con "</ td>".

6 Repita el proceso con los otros dos células. Una vez completa, las tres células deben comenzar con "<td valign =" "align =" left "width =" top 33% ">" (o como se configuró sus células) y terminan con "</ td>".

7 Poner fin a su mesa con "</ tr>" (sin comillas) para terminar la fila de la tabla y "</ table>" para poner fin a la mesa. Haga clic en el botón "Vista previa" para verificar que sus columnas son correctos. Puede introducir el contenido fuera de la tabla, ya sea encima de la abertura "<table>" etiqueta o por debajo del cierre "</ table"> etiqueta. Haga clic en "Publicar" cuando su publicación se haya completado.

Columnas de los elementos DIV

8 Iniciar la primera columna con "<div style =" float: left; anchura: 33%; ">" y cambiar los valores para adaptarse a sus necesidades. Con tres columnas ajustados a "33%", o aproximadamente un tercio del espacio, no hay espacio entre las columnas. Para añadir cinco píxeles de desplazamiento dentro de cada columna, este ajuste - <div style = "float: left; anchura: 31%; padding: 5px;"> - trabajará mejor. Si tu blog tiene un ancho fijo, puede utilizar el número exacto de píxeles para las columnas más precisos. Es posible que tenga que experimentar para encontrar el ajuste correcto. La declaración "float: left" debe incluirse en cada DIV; esto hace que los tres DIVs para alinear de lado a lado a la izquierda.

9 Entrar en el cuerpo de su primera columna inmediatamente después de la apertura de etiquetas "<div>" de la primera div. Al final de su contenido de la columna, añadir una etiqueta de cierre "</ div>".

10 Crear la segunda columna utilizando codificación idéntica en la siguiente línea - por ejemplo, <div style = "float: left; anchura: 31%; padding: 5px;"> - y rellenar el contenido de su segunda columna. Al final con "</ div>" y repita el proceso para su tercera columna. No ponga una línea en blanco entre dos elementos DIV; esto hará que se tambalean en una configuración similar a la escalera.

11 Vista previa de su mensaje para asegurar que sus columnas están correctamente alineados y encajan en una fila.

Consejos y advertencias

• Puede crear una frontera CSS a cada tipo de columna mediante la adición de este código - style = "border: 1px solid # 000000;" - Ya sea a la etiqueta "<div>" o "<td>" para cada columna.
• Introduzca cualquier CSS para el estilo de su DIV dentro del "estilo =" elemento. CSS se puede utilizar para modificar texto, colores e incluso el comportamiento de las imágenes dentro del elemento.
• Si el código HTML no se encuentra, los soportes u terminan las etiquetas o comillas, Blogger le avisará de que su mensaje no se puede guardar debido a los errores de HTML. Hasta a encontrar y corregir el error, usted no será capaz de guardar o una vista previa del mensaje.