Lätt html-kodning
2010-01-31 20:15:07

Fetstil ----------------> <b>Din text</b>

Kursiv stil ------------> <i>Din text</i>

Lägga in en bild ---> <img src="adressen till bilden">

Länk ------------------> <a href="adressen till sidan">Länktext</a>

Bild som länk ------> <a href="adressen till sidan"><img src="adressen till bilden" border="0"></a>

Annat typsnitt -------> <font face="namnet på typsnittet">Din text</font>

Storlek på texten --> <font size="1-6 (välj en siffra)">Din text</font>

Annan färg ----------> <font color="din färg">Din text</font>

Allt i samma kod---> <font face="typsnittet" color="färgen" size="storleken">Din text</font>

Centrera något -----> <center>Texten eller bilden</center>

Radbrytning -----------> <br />

Understruken text -----> <u>Din text här</u>

Mellanslag --------> &nbsp;

Överstruken text --------> <strike>Din text</strike>

Kodmallens uppbyggnad
2010-01-31 20:01:21

Body: Det är själva "kroppen", innehållet på bloggen. Det är i body som koderna för allt som rör din blogg finns

<body>
Här mellan finns alla koder som tillhör bloggen.
</body>

Header: Här är koden för headern, rubriken (som är en bild) på din blogg. Alltså den översta bilden på din blogg.

<div id="header">

Här mellan finns koden för bloggens beskrivning (BlogDescription)
</div>

Content: Här är koderna som rör det som finns i själva "innehållet" utav bloggen. 

<div id="content>
Länkar till kommentarssidan, kategorierna, tid/datum för uppläggning utav inlägg och placering utav inläggsrubriken finns här.
</div>

Kommentarskoden - vill du ändra färg eller storlek på texten "kommentarer", klicka här
<a href="${EntryPermaLink}#comment">Kommentarer (${EntryCommentCount})</a>

Kategorikoden - vill du ändra färg på texten, om du skriver någon, klicka här
<a href="${EntryCategoryLink}">(Här kan du skriva en text -ex Postat i)${EntryCategoryName}</a>

Tid och datumkoden

${EntryDate} @ ${EntryTime}

Koden för inläggsrubriken
<h3>${EntryTitle}</h3>

OM du vill lägga in en bild framför någon av koderna (en klocka framför tiden, se exempel här) så klicka här.

Side: Det är din meny. Här finns det koder som rör din meny. (det är en oerhört omfattande och lång kod då den innehåller rätt mycket)

<div id="side">
Koder som rör din profil, sök-funktionen, inläggsinformation, kategorierna och dit arkiv finns bl.a här
</div>

Koden som berör din profil
<div id="profile">
<tag:profile>
<tag:if test="${ProfileExists == 'true'}">
<h4>Om</h4>
<a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><img src="${AppUrl}shared/img/profiles/${ProfileImage}" alt="Min profilbild" /></a>
<p><a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><span style="font-weight:bold"> ${ProfileName}</span></a></p>
</tag:if>
</tag:profile>
</div>

Koden som berör din sökruta

<div>Sök i bloggen</div>
<form action="${AppUrl}index.bd?fa=search.do" name="search" method="post">
<input type="hidden" name="bl_id" value="${BlogID}" />
<input type="text" name="criteria" value="" size="12" maxlength="64" />
<input type="submit" value="Sök" />
</form>

Koden som berör dina inlägg
<div>Senaste inäggen</div>
<ul>
<tag:recentlist limit="20"> <------ här ändrar du hur många inlägg som ska synas i din meny åt gången
<li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag:recentlist>
</ul>

Koden som berör dina kategorier
<div>Kategorier</div>
<ul>
<tag:categorylist>
<li><a href="${CategoryLink}">${CategoryName}</a></li>
</tag:categorylist>
</ul>

Koden som berör ditt arkiv
<div>Arkiv</div>
<ul>
<tag:archivelist>
<li><a href="${ArchiveLink}">${ArchiveName}</a></li>
</tag:archivelist>
</ul>

Lägg upp en bild på din blogg
2010-01-31 19:50:45



Detta visar hur du lägger upp en bild på din blogg.

Gå in på Skapa/bild och bläddra fram vilken bild du vill ha. Välj hur bred den ska vara och tryck på ladda upp.



Om du bara vill ladda upp bilden för att spara den i ditt "fotoalbum" (arkiv/bilder) så klickar du bara på spara när detta syns på din skärm.

OM du vill ha länken till den bilden du precis lade upp, klicka då på bilden.


Då ser det ut såhär och då kopierar du texten som finns i adressfältet, det som är markerat med rött.

Länka en bild
2010-01-31 19:44:32

Om du vill länka en bild så gör du såhär:

Du lägger först upp en bild på din blogg, klickar på den och kopierar adressen i adressfältet. (Se hur man gör här)

Sedan går du in i din kodmall och letar upp vart du vill lägga in din bild (beskrivning utav kodmallen hittar du här).

Denna koden är den du ska lägga in i kodmallen:
<a href="adressen till sidan"><img src="adressen till bilden" border="0"></a>

I "adressen till sidan" lägger du in den länk som din sida har.
I "adressen till bilden" lägger du in den kopierade länken från din bild.

Ex:
<a href="http://www.emiliasvenssons.blogg.se/"><img src="https://cdn2.cdnme.se/cdn/7-2/1680342/images/2010/lnkar_71836382.jpg"></a>

När jag lägger upp denna kod i kodmallen så kommer den bilden att länka till min blogg.

Länkar i menyn
2010-01-31 19:31:15

I kodmallen bestämmer du vart en länk ska ligga. De flesta länkarna (se vilka de är här) är redan utlagda men skulle du vilja lägga in en egen länk i t.ex din meny så gör du såhär:

Du letar upp <side> i din kodmall. Det är början på din meny. (men du måste välja helt själv vart du lägger in den, det är svårt för mig att säga exakt vart)

Detta är själva länken som du ska lägga in under <side>:

<a href="
adressen till din sida">Texten som beskriver länkningen</a>

Jag vissar i ett exempel:
<a href="http://www.hm.se/>H&M</a> <----- Nu är texten H&M (som skulle synas i din meny om du la in denna kodmallen) länkad så att man kommer till H&M genom att klicka på "H&M".

Länkar - Stilmall
2010-01-31 19:25:27

Det finna olika typer utav länkar i bloggen. I stilmallen sätter du "utseendet" på dina länkar. Bilden för klarar vart de finns:



1. Länkar i ett inlägg
2. Länkar i entrymenta, dvs. permalink, kommentarer, kategori och trackbacks
3. Länkar i menyn
4. Länkar i headern (bloggnamnet)


1. Länkar i inlägg
Såhär ser den länken ut i stilmallen


a {
color: #C9C9C9; } <--------Här ändrar du färgen på själva ordet som är länkat (på bilden är det ljusgrått)
a:hover {color: #000000 } <-- Här ändrar du hur texten på länken ser ut när du håller över muspekaren



2. Länkar i entrymenta
Såhär ser den länken ut i stilmallen


/** 'Posted by' txt **/
.entrymeta {
font-family: verdana, arial, sans-serif;  <------------ Här ändrar du Textsnittet
font-size: 10px; <---------------- Här ändrar du Storleken
font-weight: normal; <---Här ändrar du om du vill ha normal, fet eller kursivtext ( Bold=Fet Italic=Kursiv)
color: #666;
text-align:right;<--- Här ändrar du vars texten ska ligga (Right=Höger, Left=Vänster, Center=Centrerat)
}

.entrymeta a { color: #E04201; } <------------Här ändrar du fägen på ordet som är länkat
.entrymeta a:hover { color: #80FF9F; } <---- Här ändrar du färgen på länkningen när du håller över musen


3. Länkar i menyn
Såhär ser den länken ut i stilmallen

.nav {
font-family: verdana, arial, sans-serif; <------------ Textsnitt
font-size: 11px; <----------- Text Storlek
font-weight: bold; <------------ Om du vill ha normal, fet eller kursiv text (bold=fet, italic=kursiv)
}

.nav ul {
padding: 0px 0px 6px;
font-weight: normal;
margin: 0px;
}
.nav li {
list-style: none;
padding: 0px 0px 2px;
font-weight: normal;
margin: 0px;
}
.nav a { color: #000000;text-decoration:none;} <------------- Text Färg på det länkade ordet
.nav a:hover { color: #c90000;text-decoration:underline;} <----------------- Text Färg när du håller över muspekaren


4. Länken i headern (bloggnamnet) [För att ta bort bloggnamnet, klicka här]
Såhär ser länken ut i stilmallen

#header a {
color: #000;
text-decoration: none;
font family; arial, verdana; <----------- Här är textsnittet
font-size: 10px; <--------------Storleken på texten
font-weight: normal; <---------- normal, fet eller kursiv text (bold=fet, italic=kursiv)
}


Om du inte vill ha den länkade texten understryken så lägger du till text-decoration: none; efter den angivna färgen:

Före
a {
color: #A12573;
}

Efter
a {
color: #A12573; text-decoration: none;
}


Om du vill ha en bakgrunt på Hovern (Då man har muspekaren på Länken, som bilden längst upp) då ska du lägga till:

Background: #?????? ; efter Color; #80FF9F Så det ser ut på detta viset:

.entrymeta a:hover { color: #80FF9F; Background: #?????? ; }


Fet/kusriv/understruken
2010-01-31 17:16:23

När du skriver ett inlägg så kan du välja om du vill ha en text eller ett ord i fet, kursiv, eller understruken stil. Det väljer du på bokstäverna ovanför där du skriver ditt inlägg



Men om du vill göra det i t.ex. menyn så ska du använda dig utav följade:

<b>Din text här</b> ger fet text                                      Din text här
<u>Din text här</u> ger understruken text                    Din text här
<i>Din text här</i> ger kursiv text                                  Din text här

Texten i inlägget
2010-01-31 17:11:48

Om du vill ändra själva texten i inlägget så leta upp denna kodrad i din stilmall, nedan följer några beskrivningar:

/** Post's body text **/
.entrybody {
font-family: Verdana, Arial, Helvetica, sans-serif; <------ Textsnittet
font-size: 12px; <--------------------------------------- Stolek på texten
font-weight: normal;
color: #000000; <-------------------------------------- Färg på texten
line-height: 150%;
margin: 0px 0px 10px;
background-color: #FFFFFF; <--------------------------- Bakgrundsfärg för inlägget
padding: 10px;
}


(det handlar om texten i den röda rutan)

Ändra i rubriken för inlägg
2010-01-31 16:26:44

Leta upp detta stycke i din stilmall så förklarar jag vad det betyder.

/** Entry headers **/
h3 {
background: #FFFFFF;   <--------------- Detta är bakgrundsfärgen för själva rubriken
font-family: Courier New, Helvetica; <--  Detta visar vilket typsnitt rubriken har
font-size: 16px;  <---------------------- Det är storleken på själva texten
font-weight: bold;
padding:10px 10px 10px 10px;
color: #000000; <---------------------- Detta är textens färg
margin: 10px 0px 10px;
text-align: left; <------------------------ Detta visar om du vill ha texten till vänster, center, eller höger
border-bottom: 1px dotted #000000; <-- Detta är den undrelinjen (förklaring sen)
}

Nu lite noggrannare förklaringar:

Textens placeringar:
right - höger
left - vänster
center - centrerad

Kod för linje:
border-top:       (övre linjen)
border-bottom: (undre linjen)
border-right:     (högra linjen)
border-left:       (vänstra linjen)

Linjens utseende:
Dotted ..........
Dashed --------
Solid ______

Bara stora bokstäver
text-transform: uppercase;


Här är det lite exempel på hur man kan göra. Vill ni kopiera koderna så varsågod, kopiera hela koden och klistra över den på din stilmall.


/** Entry headers **/
h3 {
background: #c8c8c8;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
padding:10px 10px 10px 0px;
color: #000000;
border-bottom: 1px dashed #000000;
text-align: center;
margin: 0px 0px 10px;
}



/** Entry headers **/
h3 {
background: #ADD8E6;
font-family: Courier New, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
padding:10px 10px 10px 0px;
color: #4B0082;
border-bottom: 1px solid #4B0082;
text-align: right;
margin: 0px 0px 10px;
}



/** Entry headers **/
h3 {
background: #E9967A;
font-family: Edwardian Script ITC, Helvetica, sans-serif;
font-size: 30px;
font-weight: bold;
padding:10px 10px 10px 0px;
color: #FFFFFF;
border-bottom: 2px dashed #DC143C;
border-top: 2px dashed #DC143C;
text-align: center;
margin: 0px 0px 10px;
}

Fixerad/lås bakgrund
2010-01-31 16:16:16

För at få en sk. låst bakgrund behöver du bara lägga till denna kodrad i stilmallen under body { :

(Du hittar exempel på hur en låst bakgrund ser ut här och här)

background-attachment: fixed;

Såhär ska det se ut i din kodmall:

body {
margin: 0px;
padding:0px;
background: #FFFFFF url(http://ailimedesign.blogg.se/test/images/2010/ros_1180647648_1221332_71808550.jpg);
background-attachment: fixed;
}

Byta bakgrundsbild
2010-01-31 15:54:00

Om man vill ha en bild som bakgrund så är det jätte lätt att fixa.

Välj en bild du vill ha och ladda upp den på din blogg:

- Gå in på Skapa/Bild och välj den bilden du vill ha.
- Välj 1000px på bildens bredd och tryck sedan på "Ladda upp bild"


När det ser hur såhär framför dig så klicka på din bild.


Då kopierar du fältet med text som är rödmarkerat på bilden.


Gå in i din stilmall och leta upp kodavsnittet som ser ut såhär:

Body {
margin: opx;
paddingopx;
background: #DC143C och klistra in denna kod:

backround: #FFFFFF url(adressen till din kod);

Såhär ska det se ut:




Före med bara färg som bakgrund:



Efter med bild som bakgrund:


Byta bakgrundsfärg
2010-01-31 15:21:09

Nu ska jag visa hur man byter bakgrundsfärg på bloggen.

1) Leta upp en färgkod som du vill ha: Här finns det några exempel

2) Gå sedan in på din stilmall (design/stilmall/redigera stilmall) och leta upp avsnittet som ser ut såhär:

body {
margin: 0px;
padding:0px;
background: #FFFFFF; <--- här byter du ut sifferkoden till den kod om representerar den färgen du vill ha.

Om du väljer färgen: #DC143C som är en rödaktig för så ska det se ut såhär i stilmallen:

body {
margin: 0px;
padding:0px;
background: #DC143C; <------ här är den koden du valde


Före du har satt in sifferkoden:


Efter du har satt in sifferkoden:


Välkommen till min nya blogg!
2010-01-22 20:53:13

» Om mig
Jag driver denna design verksamhet då jag tycker att det är super roligt att mixa med foton och koder. Jag kommer att göra detta till ett företag, om ca ett år, men driver det just nu som en hobbyverksamhet.
Ni hittar mer info om mig på min personliga blogg, här!


» Vad gör jag?
Jag gör designer och headers till bloggar som finns hos blogg.se. Jag gör även grundläggande designer till företag och såväl privatpersoner. Jag utvecklas hela tiden vilket gör att även mina kunskaper utvecklas. Allt eftersom blir det avancerade designer - jag är inte rädd för utmaningar!

Kontakt:
[email protected]
Design bloggen
www.emiliasvenssons.blogg.se


» Om denna bloggen
Här kan du hitta designtips och enkla tillvägagångssätt för att göra din blogg så snygg som möjligt och precis som du vill att den ska se ut.

Lite att tänka på:

» Gör alltid en back-up på din blogg så att du lätt kan klistra in din stil/kodmall ifall något skulle gå fel.

» Om något skulle gå fel så är det inte mitt fel för att du inte förstod mina beskrivningar, men jag hjälper dig gärna att rätta till det så gått jag kan.

» Förhandsgranska alltid i stilmallen innan du sparar. Det är för ditt bästa.


» Beställa en design?
Vill du beställa en design? Klicka här för att beställa en.