Hvordan kode en blogg Layout

Enten du er koding en blogg layout for WordPress, Typepad, Blogger, eller en annen plattform, er kunnskap om HTML og CSS nødvendig. Web programmeringsspråk HTML styrer strukturen i bloggen din, mens CSS styrer styling. Kode elementer som vanligvis finnes i blogg oppsett inkluderer HTML doctype, CSS style sheet, header image, navigasjon, innhold, sidebar og bunntekst. Selv om hvordan du kode en blogg layout varierer avhengig av bloggen publisistisk plattform du bruker, noen aspekter av koden generelt forbli den samme, og kan brukes til å kode alle typer blogg.

Bruksanvisning

1 Sett doctype erklæring i bloggen din indeks eller header fil. Doctype erklæring - som vises før noen HTML-koding - forteller leseren hvilken versjon av HTML bloggen din er å bruke:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>

2 Lag, inne Notepad eller en annen tekst editor, et CSS stilark som inneholder fonter, farger og andre stil preferanser. For eksempel:

kropp {

background-color: # ffffff;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px; }

container {

width: 800px;
color: # 000000;
bakgrunn: #ffffff;
float: left;
text-align: left; }

header {

width: 800px;
height: 20px;
bakgrunn: # ffffff url (images / headerimage.jpg); }

innhold {

width: 500px;
color: # 000000;
bakgrunn: #ffffff; }

sidebar {

width: 275px;
color: # 000000;
bakgrunn: #ffffff;
float: right; }

h1 {
margin-top: 15px;
font-size: 15px;
color: blue; }

Lagre filen som "style.css" eller erstatte gjeldende CSS stilark med den du opprettet.

3 Tast begynnelsen av grunnleggende HTML-kode struktur inn i bloggen din indeks eller header fil.

<Html>
<Head>
<Title> bloggen Tittel </ title>
</ Head>

Den "<head>" er der du vil sette inn CSS-stilark kode. Du kan også sette inn noen metakoder og Javascript koder. Den ferdige koden skal ligne dette:

<Html>
<Head>
<Meta name = "fordeling" content = "global" />
<Meta name = "description" content = "Beskriv bloggen din." />
<Meta name = "søkeord" content = "Legg blogginnlegg søkeord adskilt med komma." />
<Title> bloggen Tittel </ title>
<Link rel = "stylesheet" href = "style.css" type = "text / css">
</ Head>

4 Sett body-koden og hovedinnhold i bloggens indeksfilen. Hovedinnholdet omfatter vanligvis din header image, navigeringsmenyen, blogginnlegg og sidepanelet. Kroppen koden er den eneste koden som kreves i denne delen, de andre kan variere sterkt - for eksempel:

<Body>
<Div id = "container">
<Div id = "innhold">
<Div id = "header">
<H1> Blogginnlegg tittel </ h1>
</ Div>
<Div id = "nav">
<H2> Navigasjon </ h2>
</ Div>
Blogginnlegg vises her.
</ Div>
</ Div>

eller

<Body>
<Div id = "container">
<Div id = "innhold">
<Div id = "header"> </ div>
<H1> Blogginnlegg tittel </ h1>
</ Div>
<Ul id = "nav">
<Li> <a href="#"> om meg </a> </ li>
<Li> <a href="#"> Kontakt </a> </ li>
</ Ul>
Blogginnlegg vises her.
</ Div>
<Div id = "sidebar">
Sidebar innhold, for eksempel koblinger, kalender og arkiver vises her.
</ Div>
</ Div>

5 Skriv inn den avsluttende HTML-kodene nederst på bloggens hovedside eller bunntekstfilen.

</ Body>
</ Html>

Hvis du vil sette inn en bunntekst kode med kreditter, sett dem før den avsluttende body-koden. For eksempel:

<Div id = "footer"> <center> Innhold Bloggnavn. </ Div>
</ Body>
</ Html>