Finn.no – CSS og ALT-kode «hack»

På Finn.no har er det liten frihet til å forme artikler etter eget ønske. I denne artikkelen belyses en «hack» som åpner for mer frihet. Metoden omgår finn.no's filter og dermed kan man bruke CSS til designmessige forhold og bruke ALT-koder for å sette opp lister.

HTML og CSS på Finn.no

Finn.no er svært strenge på hvilke HTML-tagger som tillates. De eneste HTML-taggene de stiller til disposisjon er: , , ,  og . Med disse taggene er det mulig å lage kursiv tekst, tykk skrift og understreket tekst.

Det er dog umulig å bestemme farger og så videre, og det er her CSS kommer inn i bildet. Nedenfor vises resultatet av en finn-annonse der CSS, HTML og nettbladets «finnhack» er brukt.

Koden som produserer annonsen ovenfor, kan kopieres her:

Kopier «finnhack»

<u><b style=font-size:2em;>Test av «FinnHack»</b></u>
<b style=color:red;>Her skriver vi med rød tekst. Dette gjør vi ved å bruke style-attributen og CSS.</b>

<b style=color:blue;font-weight:normal;>Her har vi litt blå tekst. Dessuten er ikke teksten i tykk type, fordi vi har brukt CSS til å sette «font-weight:normal;»</b>

<b style=background-image:url(http://URL-TIL-DITT-BILDE);background-repeat:no-repeat;padding-left:55px;display:block;font-weight:normal>Her har jeg satt et bakgrunnsbilde og litt padding, slik at «gåseøynene» kommer til syne øverst i denne tekstboksen. Pass dog på at bildet du linker til ikke er synlig før annonsen er akseptert. Da ender det med at annonsen din ikke blir akseptert av finn.no, siden alle annonser går igjennom en godkjenningsprosess.</b>

Dessuten vil vi slenge inn en tøff liten logo. Det er alltid morsomt, hehe.

<b style=background-image:url(URL-TIL-DIN-LOGO);width:106px;height:16px;display:block></b>

OBS: Koden ovenfor må redigeres. Adressene til bildene er ikke inkludert i koden.

Dersom det er ønskelig å bruke bilder i annonsene må du ha eget Webhotell der du kan lagre bildene. Du må aldri publisere finn-annonser med bilder i CSS-koden, fordi alle annonser gjennomgår en godkjenningsprosess. Hvis annonsen din inneholder bilder, vil de ikke godkjenne annonsen din og muligens stoppe denne hacken fra å fungere.

«FinnHack» for bruk av CSS forklart:

Her er et eksempel på hvordan man kan utforme HTML og CSS på finn.no:

Test av «FinnHack»
Her skriver vi med rød tekst.
Blå tekst - ikke i tykk type

Legg merke til at vi ikke bruker style="font-size: 2em;", men style=font-size:2em; – det er dette som er kjernen i «hacket». De to reglene som gjelder er:

Ikke bruk dobbelt eller enkelt anførselstegn i HTML koden
Ikke bruk mellomrom i mellom de forskjellige innstillingene

Punkt #2 viser at man ikke må bruke mellomrom mellom color:blue; og font-weight:normal;. Ved bruk av mellomrom vil ikke trikset fungere. Nå over til lister.

ALT-koder tillater lister på Finn.no

På Finn.no kan man ikke bruke Lister i HTML – men det finnes et «hack» for å få til dette også. Nummererte lister er selvfølgelig ikke noe problem, for de lager man enkelt ved å skrive nummeret først. Men det blir straks verre dersom man vil sette opp ei punktliste. Løsningen er å bruke en ALT-kode.