Bildlänkar i headern!
2013-01-13
18:40:00
18:40:00
Har fått så sjukt många frågor om hur jag gjor mina bildlänkar i headern. Innan satt de nere i menyn och även då fick jag massa frågor, så det är nog dags att jag visar hurjag gjort. Som vanligt - fråga om ni inte förstår. Väldigt svårt att göra en guide utan ett skärminspelningsprogram. Skulle säga att detta är mellansvårt och man behöver kunna lite i både koder och gimp/photoshop eller annat. Men det ska nog gå.
För er som inte har lagerfönstret eller verktygsfönstret öppet - Klicka på "fönster" och sen står verktygs & lager-fönstret längst ner på fliken.
1. Börja med att skapa en ny bild i Gimp. Funkar med andra redigeringsprogram också men det ska helst vara ett med möjlighet att göra bakgrunden transparent. Välj storlek, skulle rekommendera något mellan 60x60px och 100x100px. Klicka på "Avancerade alternativ" och välj "Transparent" där det står "Fyll med...".
2. Välj "Elliptiskt markeringsverktyg". Kryssa i rutan där det står "Fast".
3. Zooma in och klicka i ena kanten av bilden och dra till den andra. Flytta runt cirkeln och ändra storlek på den tills du är nöjd.
4. Välj en färg i verktygsfönstret och dra den till cirkeln. Nu kan du skriva eller rita något i cirkeln och sen är det bara att spara som "knapp_1.png" eller något. Glöm inte att filnamnet måste sluta på .png!
Jag har istället för en färg fyllt mina cirklar med en rymdbild och klippt ut en twitterfågel. Detta är lite svårare och tar väldigt lång tid att förklara utan att filma. Detta rekommenderas till de som redan kan lite inom Gimp :)
1. Ladda upp bilderna på bloggen på "Arkiv". Klicka på dem och kopiera koden där det står "fullstor".
TIPS - Lägg in koderna i ett textdokument.
2. Kopiera den här koden:
<div style="position:absolute; width: BREDD PÅ HEADERpx; x-index:0; left: 99px; top: 99px;"><a title="bloglovin'" href="LÄNK"><img alt="bloglovin" border="0" src="BILDKOD" /></a></div>
3. Lägg in den i textdokumentet så många gånger som du har antal bilder. Har du tre knappar, lägg in koden tre gånger.
4. Lägg in bildkoderna där det står och länken till sidan du vill att bilden ska gå till. Kopiera alla koderna (inte de koderna med ENDAST bilder).
5. Gå in i kodmallen och lägg in koderna i stycket som heter "<div id="header">".
6. Nu är det bara att prova sig fram vart de ska sitta genom att ändra på antalen pixlar. Ska du ha alla bredvid varandra ska alla siffrorna efter "top" vara samma.
Man måste självklart inte lägga in koderna i ett textdokument men jag tycker det är lättast och går snabbast.
Kommentarer
Postat av: Lisa
fint!
önskar att jag kunde göra så, men har u devote. så det funkar nog inte :/
Postat av: Amanda
Fint.
Skulle du kunna visa hur man lägger in en profilbild och header på blogg.se?
Postat av: wendelasvensson
fattar absolut ingenting..
Postat av: matilda ♡
Jag håller på och fixar med det just nu, testade att lägga in en ikon först, och det fungerade bra, men när jag lade in den andra ikonen så funkade inte den förstas länk.. Jag förstår inte vad som är problemet? Kan du hjälpa mig? :)
Trackback
