February 10
Blogger non ha una opzione di default per la creazione di colonne all'interno di un post, ma è possibile utilizzare HTML di base per creare un effetto di colonna nei tuoi post di Blogger. Una possibilità per la creazione di colonne è di usare tre side-by-side elementi DIV, che crea scatole indipendenti di contenuti all'interno di ciascun elemento. Il vantaggio di utilizzare div è che ciascuno può essere uno stile individuale, la creazione di tre colonne che sembrano molto diverse. L'altra possibilità è quella di creare una tabella con tre celle side-by-side. Le tabelle possono essere più facile lavorare con perché offrono più struttura e molto piccola variazione tra le cellule.
1 Aprire un nuovo post sul blog e fare clic sulla scheda "Componi HTML" nell'angolo in alto a destra dell'area di testo composizione. Si apre l'editor HTML e rimuove ricche opzioni di testo.
2 Iniziate la vostra tavola con il seguente codice:
<Table width = "100%" cellpadding = "5" cellspacing = "5" border = "1">
Gli elementi di larghezza, cellpadding, cellspacing e di frontiera possono essere modificati a proprio piacimento. "CELLPADDING" si riferisce a quanto spazio in pixel è presente all'interno di una cella tra il contenuto e il bordo. "Spazio tra le celle" si riferisce alla quantità di spazio in pixel è tra le celle. L'attributo "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 il tavolo per riempire il vostro spazio, ma è possibile modificare questo per una larghezza inferiore o più specifiche, espressa in pixel.
3 Tipo "<tr>" nella riga successiva per iniziare la riga della tabella. Si avrà una sola riga nella tabella.
4 Avviare la prima cella con il seguente codice:
<Td valign = "top" align = "left" width = "33%">
L'attributo "valign" assicura il testo sarà sempre allineare la parte superiore della cella; se non specificato, contenuti saranno centrare verticalmente all'interno della cella se non è pieno. "Align =" left "" si riferisce al allineamento orizzontale del testo all'interno della cella; è possibile modificare questo per "centro" o "destra", se lo si desidera. La larghezza utilizza una percentuale di riempire circa un terzo del vostro spazio, ma come con la tavola, è possibile modificare questo per una larghezza specifica, espressa in pixel.
5 Inserisci il contenuto del tuo cellulare subito dopo il tag "<td>"; se si avvia nella riga successiva, Blogger inserire un'interruzione di pagina prima che il contenuto del tuo cellulare. Una volta che il contenuto viene riempito, terminare la cella con "</ td>".
6 Ripetere la procedura per gli altri due celle. Una volta completato, tutte e tre le cellule devono iniziare con "<td valign =" top "align =" "width =" left 33% ">" (o comunque la configurazione delle celle) e terminare con "</ td>".
7 Terminare la vostra tavola con "</ tr>" (senza virgolette) per terminare la riga della tabella e "</ table>" per terminare il tavolo. Fare clic sul pulsante "Anteprima" per verificare che le colonne sembrano corretti. È possibile inserire contenuti al di fuori del tavolo sia "<table>" tag sopra l'apertura o sotto la chiusura "</ table"> tag. Fai clic su "Pubblica" quando il tuo post è completo.
8 Iniziare la prima colonna con "<div style =" float: left; width: 33%; ">" e modificare i valori in base alle proprie esigenze. Con tre colonne impostate su "33%", o circa un terzo dello spazio, non c'è spazio tra le colonne. Per aggiungere cinque pixel di padding all'interno di ciascuna colonna, questa impostazione - <div style = "float: left; width: 31%; padding: 5px;"> - funzionerà meglio. Se il tuo blog ha una larghezza fissa, è possibile utilizzare i numeri esatti di pixel per le colonne più precise. Potrebbe essere necessario sperimentare per trovare il giusto setting. La dichiarazione "float: left" deve essere incluso in ogni DIV; questo fa sì che i tre div allineare side-by-side a fianco.
9 Inserire il corpo della vostra prima colonna subito dopo l'apertura "<div>" tag del vostro primo div. Alla fine del suo sito web colonne, aggiungere una chiusura "</ div>" tag.
10 Creare la seconda colonna utilizzando la codifica identica alla riga successiva - per esempio, <div style = "float: left; width: 31%; padding: 5px;"> - e compilare il contenuto del tuo seconda colonna. Termina con "</ div>" e ripetere il processo per la terza colonna. Non mettere una linea vuota tra due elementi DIV; questo li farà barcollare in una configurazione scala-like.
11 L'anteprima del post per garantire che le colonne siano correttamente allineati e tutti in forma di fila.