Blogger non è un'opzione predefinita per la creazione di colonne all'interno di un post, ma è possibile utilizzare codice HTML di base per creare un effetto di colonna nei tuoi post di Blogger. Un'opzione per la creazione di colonne è quello di utilizzare tre elementi DIV di side-by-side, che crea finestre indipendenti del contenuto all'interno di ogni elemento. Il vantaggio di utilizzare DIVs è che ognuno può essere designato singolarmente, creando tre colonne che hanno un aspetto molto diverse. L'altra opzione è di creare una tabella con tre celle di side-by-side. Tavoli possono essere più facile lavorare con, perché offrono più struttura e poca variazione fra le cellule.

Istruzioni

Colonne con una tabella

1

Aprire un nuovo post sul blog e fare clic sulla scheda "Comporre HTML" in alto a destra dell'area di testo di composizione. Verrà aperto l'editor HTML e rimuove le opzioni di testo RTF.

2

Iniziare il vostro tavolo con il codice riportato di seguito:

< table width = "100%" cellpadding = "5" cellspacing = "5" border = "1" >

Gli elementi di larghezza, cellpadding, cellspacing e confine possono essere modificati a proprio piacimento. "Cellpadding" si intende la quantità di spazio in pixel è presente all'interno di una cella tra il contenuto e il bordo. "Cellspacing" si intende la quantità di spazio in pixel è tra ogni cella. L'attributo di "confine" può essere impostato su "0" se non si desidera un bordo visibile, o un valore più alto se si desidera un bordo più spesso. Il "width ="100% "" dichiarazione imposta la tabella per riempire il vostro spazio, ma è possibile modificare questo a una larghezza più piccola o più specifica, espressa in pixel.

3

Digitare "< tr >" sulla riga successiva per avviare la riga della tabella. Si avrà solo una riga nella tabella.

4

Iniziare la prima cella con il seguente codice:

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

L'attributo "Valign" assicura che il testo verrà sempre allineato alla parte superiore della cella; Se non specificato, il contenuto sarà centrare verticalmente all'interno della cellula se non è pieno. "Align ="left"" si intende l'allineamento orizzontale del testo all'interno della cellula; Se lo si desidera, è possibile modificare questo "centro" o "destra". La larghezza utilizza una percentuale per riempire circa un terzo del vostro spazio, ma con la tabella, è possibile modificare questo su una larghezza specifica, espressa in pixel.

5

Immettere il contenuto del tuo cellulare subito dopo il tag "< td >"; Se si avvia nella riga successiva, Blogger verrà inserita un'interruzione di pagina prima del contenuto del tuo cellulare. Una volta riempito il contenuto, è necessario terminare la cella con "< /td >".

6

Ripetere la procedura per le altre due celle. Una volta completato, tutte le tre celle dovrebbero iniziare con "< td valign ="top"allineare ="sinistro"width ="33% ">" (o tuttavia configurato le vostre cellule) e alla fine con "< /td >".

7

Terminare il vostro tavolo con "< /tr >" (senza virgolette) per terminare la riga della tabella e "< / tavolo >" alla fine della tabella. Fare clic sul pulsante "Anteprima" per verificare che le colonne sembrano corrette. È possibile immettere il contenuto all'esterno della tabella sopra il tag di apertura "< table >" o sotto la chiusura "< / tavolo" > tag. Quando il tuo post è completo, fare clic su "Pubblica".

Colonne di elementi DIV

8

Iniziare la prima colonna con "< div style ="float: left; width: 33%;" > "e modificare i valori per soddisfare le vostre esigenze. Con tre colonne impostate su "33%", o circa un terzo dello spazio, non c'è posto tra le colonne. Per aggiungere cinque pixel di riempimento all'interno di ogni colonna, questa regolazione-- < div style = "float: left; width: 31%; padding: 5px;" >..--funzionerà meglio. Se il tuo blog ha una larghezza fissa, è possibile utilizzare i numeri esatti pixel per le colonne più precisare. Potrebbe essere necessario sperimentare per trovare la giusta regolazione. La dichiarazione "float: left" deve essere incluso in ogni DIV; in questo modo i tre div per la linea side-by-side a sinistra.

9

Entrare nel corpo della tua prima colonna immediatamente dopo il tag di apertura "< div >" del tuo primo div. Alla fine dei tuoi contenuti di colonna, aggiungere una chiusura "< / div >" tag.

10

Creare la seconda colonna utilizzando la codifica identiche nella riga successiva..--ad esempio, < div style = "float: left; width: 31%; padding: 5px;" >..--e completare il contenuto della tua seconda colonna. Finirla con "< / div >" e ripetere il processo per la terza colonna. Non inserire una riga vuota tra due elementi DIV; Questo li farà barcollare in una configurazione simile a scala.

11

Visualizzare in anteprima il tuo post per assicurare che le colonne siano allineate correttamente e tutti in forma in una riga.

Consigli & Avvertenze

• È possibile creare un bordo CSS su entrambi i tipi di colonna aggiungendo questo codice--stile = "bordo: 1px solid #000000;"..--a entrambi i "< div >" o "< td >" tag per ogni colonna.
• Immettere qualsiasi CSS per applicare uno stile tuo DIV all'interno del "style =" elemento. CSS può essere utilizzato per modificare il testo, colori e anche il comportamento delle immagini all'interno dell'elemento.
• Se il tuo HTML manca qualsiasi staffe, terminata il tag o virgolette, Blogger vi avviserà che il tuo post non può essere salvato a causa di errori HTML. Fino a trovare e correggere l'errore, non sarà in grado di salvare o visualizzare in anteprima il tuo post.