Bygg ditt eget tema – steg-för-steg-guide

Då sätter vi igång

Öppna båda filerna (layouten och stilmallen) i ett lämpligt redigeringsprogram. Ta dig sedan lite tid att granska koderna så du blir bekant med dem. Presentationen (css) av layouten är färdig, det enda du behöver göra är att eventuellt byta färg på text, rubriker och länkar, liksom att infoga din grafik. Hur vi stylar blogg.se:s koder samt stoppar in blocket entrybody där dina inlägg kommer att synas, det gör vi längre fram i guiden.

Front, arkiv, entry och kategoripage

Börja med att kopiera layouten i fyra exemplar – spara dem som front.htm, arkiv.htm, entry.htm samt kategori.htm – så du får grunden till alla kodmallar och kan skilja dokumenten från varandra.

Är du osäker på hur man gör så följ denna guide; har du inte öppnat ditt textredigeringsprogram så gör det. Gå sedan till arkiv öppna. Leta fram dokumentet XTML 1.0 Transitional Template – 3 kolumner. Dubbelklicka så öppnas källkoderna. Gå sedan till arkiv – spara som och spara dokumentet fyra gånger så du får front.htm, arkiv.htm, entry.htm samt kategori.htm. När du är klar så öppna alla fyra dokumenten i textredigeraren så vi kan arbeta parallellt med dem.

Härefter kommer vi att börja med front.htm, jag kommer att vara mycket tydlig när vi byter kodmall eller ska börja arbeta med stilmallen så ni kan följa med i de olika stegen utan att få problem.

Från XTML 1.0 Transitional Template – 3 kolumner till front.htm

Den nya layouten som vi ska använda har följande ursprungliga koder i början:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>XTML 1.0 Transitional Template - 3 kolumner</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="description" content="En presentation av hemsidan skrives här" />
<meta name="keywords" content="nyckelord" />
<link rel="stylesheet" href="style_1.css" type="text/css" />
</head>

Det här är viktiga koder som ger information till besökarens webbläsare och till sökmotorerna. Nu är inte dessa koder helt kompatibla med hur blogg.se vill ha sina koder. Vi ska därför byta ut vissa koder och istället skriva in koderna som tillhör blogg.se. Jämför med de ursprungliga koderna ovanför, det är samma koder men blogg.se använder därutöver serverscript i sina.

Blogg.se:s koder

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>${BlogTitle} - ${BlogDescription}</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="generator" content="${AppUrl}" />
<link rel="stylesheet" href="${BlogUrl}style.css" type="text/css" />
<link rel="alternate" href="${BlogUrl}index.rss" type="application/rss+xml" title="RSS" />
<script type="text/javascript" src="http://static.blogg.se/public/js/script_blogg.js"></script>
<script type="text/javascript" src="http://static.blogg.se/shared/js/script.js"></script>
</head>

Vad blogg.se däremot inte har är dessa koder: <meta http-equiv="imagetoolbar" content="no" /> respektive <meta name="keywords" content="nyckelord" />.

Den första koden tar bort en liten ruta som brukar uppkomma när någon med Internet Explorer besöker sidan. Från rutan kan man sedan ladda ned grafiken som finns på hemsidan. Nu går det förvisso att göra detta ändå, men koden tar bort rutan och det blir snyggare för besökaren.

Den andra koden ger dig möjlighet att skriva in nyckelord. Förvisso så sägs det att Googles sökmotorer numer struntar i nyckelorden – jag är av den åsikten att det inte är en ursäkt för att inte skriva in några. Allt som kan få en sida att segla upp i rankingen och indexeras är bara positivt! Därför lägger vi till koderna.

Du ska nu byta ut de ursprungliga koderna i front.htm till dessa här inunder – kopiera och klistra in. Observera att det bara är dessa koder som ska bytas, radera inte alla koder på sidan!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>${BlogTitle} - ${BlogDescription}</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="generator" content="${AppUrl}" />
<meta name="keywords" content="här skriver du sedan för hand in ca 8 nyckelord med komma emellan" />
<link rel="stylesheet" href="${BlogUrl}style.css" type="text/css" />
<link rel="alternate" href="${BlogUrl}index.rss" type="application/rss+xml" title="RSS" />
<script type="text/javascript" src="http://static.blogg.se/public/js/script_blogg.js"></script>
<script type="text/javascript" src="http://static.blogg.se/shared/js/script.js"></script>
</head>

Fortsätt sedan och gör likadant i entry.htm, arkiv.htm och kategori.htm.

Nästa steg i guiden handlar layoutens <body>block och koderna vi ska sätta in. Välkommen dit!

Liknande poster:

2 Comments Add yours

  1. Sanna says:

    Hej, klistrat in stilmallen och gjort en egen “design” på photoshop av din “exempelmall”. men hur får jag in den som bakgrund och tema?

    1. Lena says:

      Hej och ursäkta för sent svar.
      Du öppnar stilmallen och letar dig fram till deklarationen html/body – i denna lägger du in den bild som ska vara bakgrundsbilden. Kanske att du får trixa med inställningarna beroende på hur din bild ser ut och ska visas.

Leave a Reply

Your email address will not be published. Required fields are marked *