Hallo! Finnes det noen shettis-elskende her? Her har du i alle fall koden!

<div style="background: url(http://i64.tinypic.com/28wp6r.jpg); width: 800px; height: 1000px;">
<div style="width: 250px; height: 180px; overflow: auto; text align: center; margin-top: 180px; margin-left: 60px; float: left;">
<font color="white" size="2" face="arial">
text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</font></div>
<div style="width: 250px; height: 180px; overflow: auto; text align: center; margin-top: -180px; margin-left: 490px; float: left;">
<font color="white" size="2" face="arial">
text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</font></div>
<div style="width: 250px; height: 180px; overflow: auto; text align: center; margin-top: 110px; margin-left: 280px; float: left;">
<font color="white" size="2" face="arial">
text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</font></div>
<div style="width: 250px; height: 180px; overflow: auto; text align: center; margin-top: 95px; margin-left: 280px; float: left;">
<font color="white" size="2" face="arial">
text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</font></div>
</div>

Blogg med mobilen - Nouw har en av de beste blogg verktøy på markedet - Klikk her

Likes

Comments

For å lage layoter bruker vi en HTML-kode. Det er denne koden som se selve oppskriften på hvordan layouten skal se ut. . Bildet du bruker i layouten er CSS (nettbasert fra ribbet.no) -ikke så viktig å husk på nå ;)


Dette her er den første delen av kodingen, og her henter du frem det fantastiske bildet du har laget. Du må huske å resize bildet på ribbet.no med bredde 800px, for å få et passende layout. Høyden kan da variere. I HTML-koderen jeg har anbefalt dere å bruke i denne bloggen, tar du å åpner nå. Kopier linja under inn. Her må du passe på bredde og høyde, ordne tallene. Det er ikke fint med et avkuttet layout.

--------------------------------

<div style="background: url('ENTER YOUR URL HERE'); width: 800px; height: 600px;">

lim inn denne over som sagt, og trykk ENTER på tastaturet (ny linje)

Nå så jeg faktisk at jeg hadde en feil i det forrige blogginnlegget! Hjelp! Okei...vi tar det riktige nå, så er vi skulls :)

-------------------

Når du skal lage tekstboker er det viktig å huske på at du må gjøre ALLE steg nedover , til brekreftelsen. Det er da du ser tekstboksen. Den vil ikke komme frem om du ikke har limt inn Text text text ...!

Denne er det første du kopierer inn i HTML-koderen når du skal lage tekstbokser.

<div style="width: XXXpx; height: XXXpx; overflow: auto; text align: XXXX; margin-top: XXXpx; margin-left: XXXpx; float: left;">

Lim inn, bytt ut XXX med tall og XXXX med center, right eller left (om teksten skal være midtstilt, høyre eller venstre).

Start med f.eks 200 i bredde og høyde på tekstboksen. margin-top vil si hvor tekstboksen skal være i forhold til toppen av layouten. og margin-left vil si hvor boksen er i fohold til venstre side av layouten. Det er veldig viktig å prøve seg frem med forskjellige tall. Noen ganger må du til og med ha inn -Xpx (minuspixler!)

Trykk ENTER, ny linje

----------------------------------

<font color="black" size="2" face="arial">

Farge, størrelse og font. Her skriver du inn ønsket farge, på engelsk. Der det nå står "black". 2 i skriftstørrelse er som regel det vanligste på layouter, og er derfor ikke nødvendig å bytte ut. Arial er et eksempel på en font,men du kan bruke andre også. Ta det du ønsker, og sett ditt eget preg på layouten din!

Ferdig så langt? Trykk ENTER, ny linje

------------------------------------------

Neste steg er bare å utfylle tekstboksene, slik at dem får skrollebar.

text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Lim inn dette, trykk ENTER, ny linje

----------------------

For å bekrefte tekstboksen så limer du inn:

</font></div>

-------------------------------

Lag så mange tekstbokser du vil! Og husk at pixlene kan komme i både + og minus. Lek deg frem!

-------------------

Når du har ønsket antall bokser ferdige, limer du inn denne

</div>

Noen spørsmål? Send PM på howrse.no til hestegal2!


Likes

Comments

<div style="background: url(http://i66.tinypic.com/2vcsunn.jpg); width: 800px; height: 1000px;">

<div style="width: 330px; height: 200px; overflow: auto; text align: center; margin-top: 420px; margin-left: 280px; float: left;">

<font color="black" size="2" face="arial">

text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

</font></div>

</div>

Likes

Comments

<div style="background: url(http://i65.tinypic.com/2cckni8.jpg); width: 800px; height: 1000px;">

<div style="width: 200px; height: 220px; overflow: auto; text align: center; margin-top: 230px; margin-left: 300px; float: left;">

<font color="black" size="2" face="arial">

text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

</font></div>

<div style="width: 200px; height: 220px; overflow: auto; text align: center; margin-top: 235px; margin-left: 70px; float: left;">

<font color="black" size="2" face="arial">

text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

</font></div>

<div style="width: 200px; height: 220px; overflow: auto; text align: center; margin-top: -226px; margin-left: 35px; float: left;">

<font color="black" size="2" face="arial">

text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

</font></div>

</div>

Likes

Comments

Nå skal jeg forklare hvordan jeg går frem for å lage en layout.
Først vil jeg si at jeg bruker ribbet.com og tinypic som er gratis programmer, men hvis jeg virkelig går inn for å ordne og designe en god layout bruker jeg Photoshop for å lage bakgrunnen. Derretter bruker jeg ribbet osv..
jeg bruker også denne HTML -siden hvor jeg kan sjekke ut koden min så langt.

1.
Finn frem ribbet.com og last opp ønsket bilde.
1.1.
Fiks bildets størrelse under Basic Edits-Resize, i den siste boksen skriver du 600, og ser hva du får i den andre boksen (optimalt er 800x600). Trykk derretter "apply"
1.2.
Legg på stickers. Her kan du velge å legge på litt av hvert. Disse bruker som bakgrunn på tekstboksene. Med verktøyene for stickers kan du velge farge, og du kan velge gjennomsiktighet (fade). Lek deg litt rundt her :)
1.3.
Legg inn tekst (om ønskelig) På høyre side skriver du inn tekst og velger ønsket font, trykk deretter "Add". Om du ikke er fornøyd med fontener det bare å trykke på andre; prøv deg frem. På venstre side kommer det en boks med fargevalg, gjennomsiktighet (fade), tekstoppsett (sentrert, høyre og venstre). Du kan også dreie tekstboksen rundt fra 0-360 (i vinkelgrader).
2.
Lagre bildet på pc
2.1
Finn frem tinypic og last opp bildet. Husk at du må fullføre en slik human verification! Dette krever ingen survey altså! Når bildet er lastet opp, kommer det 4 linker opp, velg linken for bildets URL som er den nederste!
3.
Nå starter det morsomste (syns jeg i allefall) -nemlig kodingen!
3.1
Lim inn denne:
<div style="background: url('ENTER YOUR URL HERE'); width: 800px; height: 600px;">
i html-koderen som jeg har vist til... I denne må du lime inn bildets URL der jeg har skrevet hvor du skal gjøre det. Om du ser at høyde eller bredde er feil, så juster litt på tallene til det blir riktig
3.2
Derretter trenger vi tekstbokser. Husk at du må gjøre ALLE i 3.2 samlet for å se tekstboksene, men ikke samme linje!
Lim inn dette: XXXpx; height: XXXpx; overflow: auto; text align: XXXX; margin-top: XXXpx; margin-left: XXXpx; float: left;"> og fyll ut alle Xene med tall.
Start med f.eks 200, og finn ut hvor boksen er. Lek deg litt frem! Du skal la tekstboksene passe til de fargete tekstboksene du ordnet på ribbet. Text align betyr hvordan teksten skal ligge- midtstilt osv...skriv inn enten: center , left eller right
3.2.1
Så skal du lime inn denne: <font color="black" size="2" face="arial">
Her bestemmer du farge på teksten, font og størrelse (2 er god str for layout) - bare å skrive inn det du ønsker!
3.2.2.
Derretter skal du fylle ut tekstboksen med tekst...i dette tilfelle er det bare å kopiere denne haugen...:
text text texte text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
Om det er for lite tekst til at du ikke for noe skrolleboks på tekstboksen, legg til enda mer av text til du får det!
3.2.3
Lim inn denne: </font></div>
3.3
Så limer du inn denne til slutt:
</div>

Likes

Comments