Hvordan lage tre kolonner Innenfor en artikkel i Blogger

May 12

Blogger har ikke en standardalternativet for å opprette kolonner i et innlegg, men du kan bruke enkel HTML for å lage en kolonne effekt i Blogger innlegg. En mulighet for å opprette søyler, er å bruke tre side-ved-side-DIV elementer, noe som skaper selvstendige bokser av innholdet i hvert element. Fordelen med å bruke divs er at hver kan bli stylet individuelt, og gir tre kolonner som ser veldig annerledes. Det andre alternativet er å opprette en tabell med tre side-by-side-celler. Tabeller kan være lettere å jobbe med fordi de tilbyr mer struktur og svært liten variasjon mellom cellene.

Bruksanvisning

Kolonner med bord

1 Åpne en ny blogg post og klikk på "Compose HTML" -kategorien i øvre høyre hjørne av sammensetningen tekstområdet. Dette åpner HTML editor og fjerner rik tekst alternativer.

2 Begynn bordet med følgende kode:

Bredde, cellpadding, cellspacing og grenseelementer kan alle bli forvandlet til din smak. "Cellpadding" refererer til hvor mye plass i piksler er tilstede i en celle mellom innhold og kanten. "Cellspacing" refererer til hvor mye plass i piksler mellom hver celle. Den "grensen" attributt kan settes til "0" hvis du ikke vil ha en synlig ramme, eller en høyere verdi hvis du ønsker en tykkere kant. Den "width =" 100% "" erklæring setter bordet for å fylle din plass, men du kan endre dette til en mindre eller mer spesifikk bredde, angitt i piksler.

3 Type "<tr>" på neste linje for å starte tabellen rad. Du vil bare ha en rad i tabellen.

4 Begynn den første cellen med følgende kode:

Den "valign" attributtet sikrer teksten vil alltid justere til toppen av cellen; dersom ikke er angitt, vil innholdet sentrere vertikalt i cellen hvis den ikke er fylt. "Juster =" left "" refererer til den horisontale tekstjustering i cellen; du kan endre dette til "center" eller "riktig" hvis du ønsker det. Bredden bruker en prosentandel for å fylle omtrent en tredjedel av plassen din, men som med bordet, kan du endre dette til en bestemt bredde, angitt i piksler.

5 Skriv inn innholdet i cellen umiddelbart etter "<td>" tag; hvis du begynner på neste linje, vil Blogger sette inn et sideskift før innholdet i cellen. Når innholdet er fylt, avslutter celle med "</ td>".

6 Gjenta prosessen for de to andre celler. Når du er ferdig, bør alle de tre cellene begynner med "<td valign =" top "align =" left "width =" 33% ">" (eller hvordan du konfigurert celler) og avsluttes med "</ td>".

7 Avslutt bordet ditt med "</ tr>" (uten anførselstegn) for å avslutte raden i tabellen og "</ table>" for å avslutte tabellen. Klikk på "Preview" for å bekrefte at kolonnene ser riktige ut. Du kan legge inn innhold utenfor bordet enten over åpningen "<table>" tag eller under den avsluttende "</ table"> tag. Klikk "Publiser" når innlegget ditt er ferdig.

Kolonner av DIV Elements

8 Start første kolonnen med "<div style =" float: left; width: 33%; ">" og endre verdiene til å passe dine behov. Med tre kolonner satt til "33%", eller omtrent en tredjedel av plassen, det er ikke rom mellom kolonnene. For å legge til fem piksler med padding i hver kolonne, denne innstillingen - <div style = "float: left; width: 31%; padding: 5px;"> - vil fungere bedre. Hvis bloggen din har en fast bredde, kan du bruke eksakte pikseltall for mer presise kolonner. Du må kanskje eksperimentere for å finne den rette innstillingen. Erklæringen "float: left" må inkluderes i hvert DIV; Dette fører til at tre divs å stille opp side ved side mot venstre.

9 Inn i kroppen din første kolonnen umiddelbart etter åpning "<div>" tag på ditt første div. På slutten av kolonnen innhold, legge til en avsluttende "</ div>" tag.

10 Lag den andre kolonnen ved hjelp identisk koding på neste linje - for eksempel <div style = "float: left; width: 31%; padding: 5px;"> - og fylle innholdet i andre kolonne. Slutt med "</ div>", og gjenta prosessen for tredje kolonne. Ikke legg en tom linje mellom to DIV elementer; dette vil føre dem til å rave i en trapp-lignende konfigurasjon.

11 Forhåndsvis innlegget ditt å sikre at kolonnene er riktig justert og alle passer på rad.

Hint

Du kan lage en CSS-grensen på hver type kolonne ved å legge inn denne koden - style = "border: 1px solid # 000000;" - Enten til "<div>" eller "<td>" tag for hver kolonne.
Gå inn på et CSS for å style din DIV innenfor "style =" element. CSS kan brukes for å modifisere tekst, farger og til og med oppførselen til bilder i elementet.
Hvis det mangler HTML noen braketter, og endte koder eller anførselstegn, vil Blogger varsle deg om at innlegget ditt ikke kan lagres på grunn av HTML feil. Inntil du finne og rette opp feilen, vil du ikke være i stand til å lagre eller forhåndsvise innlegget ditt.