Chrome Pointer

Lär dig webbdesign - Hur man gör en bildlänk

   Bildlänkar är populära, och det är inte så konstigt eftersom de också är snygga. Idag kommer jag alltså berätta två saker - hur man lägger in en länk i sin kodmall, och hur man länkar via en bild. Notera att vi nu är inne i kodmallen, inte stilmallen. Om man vill att koden ska finnas i alla fyra kodmallar får man lägga in koden på samma ställe i alla fyra kodmallar. Det är dock inte särskilt vanligt - jag har valt att låta mina menyer se likadana ut i alla kodmallar, eftersom jag personligen tycker det är snyggast och mest praktiskt.
 
   Som exempel tar vi SSO Wikis logga som finns i menyn till vänster. Det är en bildlänk.
   Det är den här bilden jag menar.
 
 
   Vi säger att jag vill länka en text, till att börja med. Jag vill länka till mig själv. Texten som jag vill ska länka till mig ska vara "HEJSAN". Då skriver jag, där jag vill att koden ska finnas:
 
<a href="http://monokerus.se">HEJSAN</a>

   Så här ser koden ut om man länkar något, vad som helst. Webbadressen, vilket i det här fallet förstås är "http://monokerus.se", byts ut mot den adress som det ska länkas till. "</a>" efter mitt ord, måste jag ha för att "stänga" koden. Länken tar alltså slut där. Om jag missar att skriva </a> kommer länken fortsätta i oändlighet och det skapar trassel. Kom ihåg att alltid avsluta koder.
 
   Nu lägger vi bort länken för en stund, så pratar vi om bilder. Nu vill jag lägga in SSO Wikis logga i min kod. Först laddar jag upp bilden på bloggen, genom att gå till "Arkiv" -> "Bilder" och ladda upp den där. Bilden måste nämligen finnas på internet för att man ska kunna lägga upp den på bloggen så här. Tänk på bildens storlek, då ni laddar upp den. Alla bilder jag har i mina inlägg är max 700px (pixlar) breda. Bilderna jag har i sidomenyerna brukar jag ladda upp till 200px, eftersom mina boxar är 185px breda. Jag kan ändra bildernas storlek i koden, men jag vill komma så nära rätt upplösning som jag kan.
 
   Då jag har laddat upp bilden kommer det synas två stycken olika webbadresser. Jag föreslår att ni alltid väljer adressen för fullstor bild. Vi kan nämligen ändra bildens storlek senare,
   Jag kopierar bildadressen (markera adressen, kopiera den) och går tillbaka till kodmallen.
 
   Nu har jag valt ett ställe där jag vill ha min bild, förslagsvis i sidomenyn. Jag skriver in koden för min bild:
 
<img src="LÄNKEN HÄR">
 
   Enkelt va? Det där kan absolut räcka. Men, min bild är 200px och får inte vara bredare än 185px. Så jag skriver istället:
 
<img src="LÄNKEN HÄR" width="185px">
 
   Tadaa! Nu passar bilden i min design. Kom ihåg att förhandsgranska innan du sparar, så att du vet hur det faktiskt ser ut, och så att du är säker på att du placerat bilden rätt. Tänk på att du kan ändra bildens bredd precis hur du vill, men det är alltid bättre att förminska än att förstora. Det blir mycket bättre kvalité på bilden då, helt enkelt. Du kan ändra höjden manuellt också, men nu då jag bara väljer bredden kommer bilden automatiskt anpassa sig så att den inte blir utstretchad.
 
 
   Nu ska vi tillsist placera länken. Det gör vi genom att lägga ihop koderna.
 
<a href="LÄNK TILL SIDA"><img src="LÄNK TILL BILD" width="185px"></a>
 
   Klart! Glöm inte att om du skriver i hur många pixlar bred bilden ska vara så MÅSTE du ha med "px" i koden - annars händer ingenting.
   I morgon går jag igenom lite enkla baskoder som kan vara bra att kunna :)
 
   (PS! Under hela den här serien uppskattas det om ni kommer med tips på saker som ni vill lära er! c:)






Sophia Puppyheart

Det här har inte med inlägget att göra men jag behöver hjälp... Kan du komma på ett bra smeknamn till min Palominoarab?
Han heter Goldblaze och jag vill gärna att han ska kallas nått som har med namnet att göra. Jag har tänkt på Goldy men vet inte riktigt... Om du inte har några idéer kanske du vet nån hemsida elr nått? Snälla hjälp!

Svar: Oj vad svårt! Asså man kan ju googla på typ "djurnamn" eller "namn till häst" och komma på något bra... Jag har verkligen inte en aning, Golden kanske? xP
Esmeralda Silverforce

Sophia Puppyheart

Okej tack endå:)

Anna

Hej jag undrar om du skulle kunna fixa ett sånt här inlägg om hur man lägger till musik som du har att går man in på datorn så kan man sätta igång sso musik skulle vilja veta okej om du inte kan vissa

Svar: Menar du typ att du vill ha SSO's musik i iTunes? För isf är det bara att gå in i spelfilerna och öppna MP3-filerna i iTunes, så ligger de kvar där sedan :) Om inte så förstår jag tyvärr inte riktigt hur du menar ^^'
Esmeralda Silverforce

Anna

Jag menar att du har ju musik på bloggen så när man går in på din blogg kan man höra musik.

Svar: Jahaa x) Googla på SCMplayer så hamnar du på rätt sida :)
Esmeralda Silverforce

Nadia Moonnight

Hejsan! Jag har lagt in rätt bildlänkar, men dom 2 länkarna som är högst upp går inte att klicka på. Men jag har gjort helt rätt, tror jag. Jag har iallafall gjort precis likadant som på dom andra 8 bildlänkarna...
Sedan har jag en till fråga, det kanske kommer i senare avsnitt men hur får typ extra rubriker i menyn? Det finns ju redan rubriker, typ Arkiv och Om mig. I min design har alla sånna rubriker typ en egen liten ruta, eller vad man ska kalla det. Jag skulle vilja ha en sån ruta, där bildlänkarna till mina hästars faktasidor ligger.

Svar: Jag kikade på din kodning, du har bara missat att avsluta a href-taggarna efter bildkoden. Tänk "a href -> bildlänk -> stäng a href" :)
Det kommer något liknande framöver, men jag tror att det är lätt för dig att lösa själv. Dina rubriker har div-taggen "navheader", så om du skriver DIN RUBRIK så får du en rubrik i samma gråa ruta som övriga rubriker ligger i :) Titta i källkodningen och leta upp div-en "navheader" så kanske du förstår hur jag menar ^^
Esmeralda Silverforce

Isabella Moonwater

Hej! Jag undrar hur man gör en länk i ett inlägg, när man klickar på bilden kommer det upp mer text under bilden och tvärt om att texten försvinner när man klickar på bilden igen. :) Du kan göra en till avsnitt i serien, om det är värd att skriva om. Tacksam för svar! :) <3

Svar: Tyvärr vet jag inte hur man gör det - jag har letat runt, men har inte hittat något :/
Esmeralda Silverforce

Isabella Moonwater

Okej, Tack för svaret <3 får leta vidare jag också xD

Juni Hawksmith

Jag skulle vilja veta om hur man gör en sådan där "länk" som när du skriver länken finner du HÄR. Alltså jag har typ googlat och hittar INGENTING (eller så är det bara jag som är dålig, lol.). Så jag skulle verkligen uppskatta om du gjorde ett inlägg om hur man gör det! Är ganska trött på att skriva alla länkar till alla sidor x) Jag har även kollat igenom hela den här kategorin om webbdesign och jag har inte hittat något. Som sagt, det skulle uppskattas! ^^

Svar: Jag tror det är det här du är ute efter: http://monokerus.se/2014/january/lar-dig-webbdesign-kallkodning-i-ditt-blogginlagg.html
- Tänk dock på att jag använder Blogg.se och därmed vet jag inte hur andra bloggportaler ser ut.
Esmeralda Silverforce

Kom ihåg mig!

Namn: (ALLA anonyma kommentarer raderas)


E-postadress: (syns endast för mig)


URL / Bloggadress:


Din Kommentar:


Trackback


Jag är Esmeralda “Esme” Silverforce, 90-talist som alltid haft ett enormt intresse för hästdatorspel. Från att ha varit en spelare av MMORPG’t Star Stable Online sedan spelets start arbetar jag nu med spelet, men mitt enorma intresse för andra spel består - och det är just de spel jag spelar som ni kan ta del av här!

Utöver denna blogg delar jag aktivt med mig av spelbilder på min Instagram @GamingbyEsme och pratar även mycket om spel på YouTube. Jag är också grundare av Jorvikipedia, som är ett slags uppslagsverk om allt som handlar om Star Stable. Ni kan läsa mer om mig och vem jag är längre ner i menyn!

Kontakt: Hitta min kontaktinformation genom att klicka på brevikonen i menyn högst upp på sidan!

Disclaimer: Bloggen är privat driven och ingenting skrivet på den är betalt material om inte annat tydligt framgår i inläggen. All min egen text samt grafik får användas om länk ges tillbaka till mig.