Optimer din Myspace-profil del. 3. – Indsæt et billede allerøverst på siden.
En simpel måde at få sin Myspace-profil til at se professionel og anderledes ud er ved at indsætte et billede øverst på siden, over reklamerne, menuen og resten af indholdet. På den måde kan man bestemme hvad der møder nye besøgende på siden i stedet for det traditionelle lidt kedelige Myspace-layout.
Besøg vores testside hvis du vil se hvordan topbilledet kommer til at se ud hvis du følger nedenstående vejledning: http://myspace.com/makingwavestest
I sidste del af føljetonen viste vi hvordan man laver et simpelt grunddesign ved hjælp af en layout-generator. Nu skal vi til at arbejde med sidens andre visuelle elementer. Konkret vil vi denne gang indsætte et top-billede på siden. Det giver os mulighed for at præsenterer den besøgende for noget andet end det sædvanlige Myspace layout. Det kan gøres i 5 simple trin:
1. Find det rette billede.
Du skal først beslutte dig for hvilket billede du gerne vil have øverst på din side. Det anbefales kraftigt at du sørger for at dit billede er nøjagtigt 900 pixels i bredden, da det ellers vil kræve lidt nørkleri at få billedet til at stå i midten af siden. Måden du indsætter et billede i et Myspace-design er ved at indsætte billedets URL (webadresse) det rigtige sted.
2. Giv dit billede en URL (Webadresse)
Så snart et billede ligger på nettet har det en URL – For eksempel hvis du har oploadet det til Facebook eller Myspace. I dette tilfælde har vi dog at gøre med et stort billede, som ikke accepteres de to steder. Man skal med andre ord have sit billede “hostet”. Til vores test-side har vi lagt billedet på vores egen server, men hvis det ikke lyder som noget du kan finde ud af eller du tror du har serverplads nogen steder, kan du med fordel benytte dig af en service som Imageshack. Her mødes du af en skærm, der ser således ud:
Klik på knappen “Browse…“, vælg billedet fra sin plasering på din harddisk, vælg “opload” og du kommer frem til en side, der viser URL’en til dit billede.
4. Indsæt koden.
Følg vejledning fra sidste indlæg for at komme ind til det sted du kan redigere kassen “bio”. Det er igen her du skal indsætte din design-kode. Koden du skal indsætte ser således ud:
|
<style>
body{
background-position:top center;margin-top: 640;}
div.topbanner {
top: 0;
left: 49%;
margin-left: -387px;
width: 100%;
height: 563px;
position: absolute;
}
</style><div class=”topbanner”><img src=”http://making-waves.dk/Myspacetestbanner.png” border=”0″ />
<br />
<a href=”http://making-waves.dk/”><font size=”3″><br /><center>KLIK HER OG LÆS HVORDAN DEN ER LAVET</center></a></font>
</div>
|
Koden indeholder to elementer. 1.) Et billede, der kommer frem øverst på siden 2.) Et link, der kommer frem under billedet. Grunden til at vi har valgt at tage et link med i koden er at man så har muligheden for at sende brugere direkte videre til et sted man gerne vil have dem hen. – Det kunne f.eks. være Itunes eller en anden webshop. Hvis du vil fjerne linket fjerner du blot den del af koden, der ser således ud:
|
</style><div class=”topbanner”><img src=”http://making-waves.dk/Myspacetestbanner.png” border=”0″ />
<br />
<a href=”http://making-waves.dk/”><font size=”3″><br /><center>KLIK HER OG LÆS HVORDAN DEN ER LAVET</center></a></font> </div> |
5. Rediger koden så den passer til dit billede.
Hvis du sætter ovenstående kode uændret ind får du samme resultat, som på vores test-side. Du skal nu erstatte vores informationer med dine egne.
Hvis dit billede er nøjagtigt 900 pixels i bredden, skal du ændre fem ting i koden. 1.) Top-billedets URL, 2.) Mål 1: afstand fra toppen af siden ned til Myspace-reklamen, 3.) Mål 2 Billedets højde, 4.) Linktekst og 5.) linkadresse.
Du skal altså ændre følgende information:
- Top-billedets URL: http://making-waves.dk/Myspacetestbanner.png
- Mål 1: afstand fra toppen ned til Myspace-reklamen: ’640px’
- Mål 2: Billedets højde: ’563px’
- Linktekst: ‘KLIK HER OG LÆS HVORDAN DEN ER LAVET’
- Linkadresse: ‘http://making-waves.dk/’
Hvis du vælger et billede der har en anden bredde end 900 pixels (som i øvrigt er samme bredde, som Myspace-indholdet har som standard). Skal du regulere på de to værdier “left” og “margin-left“. Det er nemmere at skrive at du skal prøve dig frem, end det er at forklare hvordan du skal regne det ud. Grundlæggende beskriver de to tal hvor langt billedet er fra venstre side af skærmen, så hvis jeres billede er mindre end 900, skal tallene være højere og vise versa.
I næste afsnit vil vi vise, hvordan man fjerner eller skjuler overflødige kasser og indhold fra siden.
Tilføjelse
Vi har fået nogle henvendelser fra folk, der ikke har kunnet få koden til topbilledet til at virke. Vi har ikke været i stand til at forklare præcis hvorfor. Hvis du er blandt dem, der ikke får det ønskede resultat, har vi nedenfor indsat en ny kode, der kræver lidt mere nørkleri, men som burde virke for alle. Du skal tase dine oplysninger ind i stedet for TEKSTEN SKREVET MED BLOKBOGSTAVER – intet andet skal erstattes. Koden gælder kun selve billedet og ikke linket nedenunder. Hvis dit billede er 900 px i bredden skal du altså kun ændre tre informationer.
|
<style type=”text/css”>body{
background-position:top center;margin-top: MÅL1 AFSTAND FRA TOPPEN TIL REKLAMEN px;}
div.topbanner {
top: 0;
left: 49%;
margin-left: -387px;
width: 100%;
height: MÅL2 TOPBILLEDETS HØJDE px;
position: absolute;
}
</style><div class=”topbanner”><IMG SRC=” TOPBILLEDETS URL” border=”0″>
</div>
|
