Pimp my blog


Före och efter

Nja, det är inte mycket som ändrats med bloggen, men jag har lagt in en widget från Twitter i sidmenyn (jag måste verkligen få ordning på min sidmeny och skapa två spalter, men det fungerar inte särskilt bra med den design jag har nu). Det kanske verkar lite överflödigt, men jag hoppas att det ska bli som en friskare fläkt på bloggen. Jag är lite flummig av mig som person, och Twitter ger mig möjligheten att visa det på ett helt annat sätt. Visserligen skulle det vara roligt om ni följde mig (nej, jag fiskar inte alls efter fler följare), men jag vet också att Twitter inte är någonting alla har, så nu har ni helt enkelt möjligheten att kika in här (jag riktar mig främst till dig, Linn :p)

Apropå Twitter: Har ni några Twitter-konton? Det skulle vara kul att följa er :)

//Lisa

Hur man får bort texten i headern

Det är många som stör sig på texten i headern. Framför allt när man ägnat mycket tid åt att skapa en egen bild med en personlig text (såsom jag har gjort, liksom många andra) -- i det läget vill man inte ha en text som förstör bilden.
Det är några som undrat över hur man får bort den, och det är inte så svårt som man skulle kunna tro -- man behöver inte sudda ut sitt bloggnamn bland inställningarna, men det är ett par rader som ska suddas ut.



I varje kodmall finns det en kod för headern (inringat i rött), och i denna kod finns ett par rader som styr headertexten. Det är dessa två rader (inringat i gult) som ska raderas. Enklare än så kan det inte bli, men glöm inte bort att radera dessa två rader i alla kodmallarna.

//Lisa

Dropdown-menyer

Jag har fått en fråga angående dropdown-menyer, och jag ska göra mitt bästa för att berätta hur det går till. Om någonting skulle vara oklart är det bara att fråga, alternativt besöka denna sida.
Jag har valt att använda mig av den mall jag själv har som hjälpmedel; om ni vill skaffa en dropdown-meny föreslår jag att ni kopierar texten, klistrar in på Word och gör egna redigeringar för att få som ni vill ha det (samt att sudda ut mina förklaringar som står skrivet i kursiv). När ni ska överföra det till designen, använd er först av en testsida för att se att allt ser bra ut.

Dessa koder ska klistras in längst ner på Stilmallen

#navbar {
margin: -23px 0px 0px 175px; (ändra på siffrorna för att få menyerna där du vill ha dem)
padding: 0px;
height: 1em;
}

#navbar li {
list-style: none;
float: left;
}

#navbar li a {
display: block;
padding: 8px 13px;
background-color: #; (lägg till en färgkod om du vill ha en bakgrundsfärg till menyerna)
color: #E6E6E6; (färgkod för menytexten)
text-decoration: none;
font-family: Candara, Calibri, Verdana, sans-serif; (fonten för menyn...)
font-size: 14px; (...och dess storlek)
}

Se bild 1

#navbar li a:hover {
background-color: none;
font-weight: bold;
font-seize: 16px;
}

Denna kod styr vad som händer när man för pilen över menyerna; vill man inte att texten ska fetstilas är det bara att byta ut "font-weight: bold;" mot "font-weight: normal;". Om man inte heller vill att storleken ska förändras är det bara att skriva in samma tal som i den föregående koden.
Se bild 2

#navbar li ul {
display: none;
width: 10em;
background-color: #69f;
opacity:0.7;
filter:alpha
(opacity=70);
}

Denna kod styr inte mycket; det man ska lägga fokus på är bredden (width) och genomskinligheten (opacity) på undermenyn.
Se bild 3

#navbar li:hover ul, #navbar li.hover ul {
display: block;
position:
absolute; margin: 0;
padding: 0;
z-index: 1;
}

#navbar li:hover li, #navbar li.hover li {
float: none;
}

#navbar li:hover li a, #navbar li.hover li a {
background-color: #fff; (färgkod för bakgrundsfärgen på undermenyn)
border-bottom: 1px dashed #333; (detta är om man vill ha en linje under länkarna i undermenyn; man kan byta ut "dashed" mot någon annan form av linje, och detsamma gäller färgen)
color: #BABABA; (färgen på texten i undermenyn)
}

Se bild 3

#navbar li li a:hover {
background-color: none;
color: #A7A7A7;
font-weight: bold;
font-size: 16px; }

Denna kod styr vad som händer när man för pilen över länkarna i undermenyn.

Dessa koder ska in i kodmallarna (glöm inte bort att klistra in koderna i alla mallarna)

<ul id="navbar">

För en länk, utan dropdown-meny (se bild 2)

<li><a href="LÄNK 1"><NAMN PÅ LÄNKEN</a></li>

För kategorier med dropdown-menyer (se bild 3)

<li><a href="">KATEGORI 1</a>
<ul>
<li><a href="LÄNK 1:1">NAMN PÅ LÄNKEN</a></li>
<li><a href="LÄNK 1:2">NAMN PÅ LÄNKEN</a></li>
<li><a href="LÄNK 1:3">NAMN PÅ LÄNKEN</a></li>
<li><a href="LÄNK 1:4">NAMN PÅ LÄNKEN</a></li>
<li><a href="LÄNK 1:5">NAMN PÅ LÄNKEN</a></li>
</ul>
</li>
<li><a href="#">KATEGORI 2</a>
<ul>
<li><a href="LÄNK 2:1">NAMN PÅ LÄNKEN</a></li>
<li><a href="LÄNK 2:2">NAMN PÅ LÄNKEN</a></li>
<li><a href="LÄNK 2:3">NAMN PÅ LÄNKEN</a></li>
</ul>
</li>
<li><a href="#">KATEGORI 3</a>
<ul>
<li><a href="LÄNK 3:1">NAMN PÅ LÄNKEN</a></li>
<li><a href="LÄNK 3:2">NAMN PÅ LÄNKEN</a></li>
<li><a href="LÄNK 3:3">NAMN PÅ LÄNKEN</a></li>
<li><a href="LÄNK 3:4">NAMN PÅ LÄNKEN</a></li>
<li><a href="LÄNK 3:5">NAMN PÅ LÄNKEN</a></li>
</ul>
</li>
</ul> (Den här koden är viktig att lägga till där ni vill att koden ska ta slut; jag glömde ha med den av misstag, och ni kan tänka er hur bra det blev).





Pilen kom inte med på bilden, men den ligger över "Hem"-länken, vilket gör texten något fetare jämfört med de andra.




Nu är det bara frågan om var man ska placera denna kod någonstans. Om man vill ha den ovanför headern placerar man koderna ovanför:
<div id="header">

Vill man istället ha den under headern är det bara att placera koderna under </div> tillhörande header-koden.

Det bästa är dock att placera koden i header för att sedan flytta dem med hjälp av margin (den under #navbar { i Stilmallen); på så sätt kan man placera menyerna under, ovanför och mitt i headern utan att behöva krångla i kodmallarna.

Det är inte lätt att få sina dropdown-menyer på det sätt som man själv vill, så ni får ha lite tålamod -- det är inte lätt att hålla reda på alla koder, men jag hoppas att jag kunnat hälpa er på traven utan att ha gjort saker och ting värre.

//Lisa

Bilder i sidmenyn


Carro ställde en fråga jag fått ett par gånger utanför bloggen; Hur får man bilder i sidmenyn??



Det är faktiskt inte så svårt att fixa, men jag tänker ändå gå igenom ala steg så att det inte blir några krångligheter.

Det första man behöver göra är att ladda upp en bild, och det måste vara en bild som är i samma bredd som sidmenyn, eller mindre (om bilden är bredare än menyn blir det bara knas av alltihop). Om ni skulle vara osäkra på bredden är det bara att gå in i stilmallen och titta under rubriken "side" och se vilket värde som står på "width". När ni sedan laddar upp bilden till bloggen ser ni en liten ruta där det står 400; detta är alltså värdet på bredden som ni vill att bilden ska ha. Klickar ni på den rutan dyker andra värden som ni kan välja.

När bilden är sparad är det bara att klicka på den. Bilden visas då i det format som den laddats upp, och det ni gör är att kopiera länken för den websida som bilden visas i.

Nu till "problemet": Hur man får in bilden i sidmenyn

Det är denna kod ni ska använda er av:
<p style="text-align: center;"><img class="image" scr="LÄNK TILL BILD" alt="" /></p>

(ni kan såklart ha en annan position på bilden än vad jag har; istället för center, som gör bilden centrerad, kan ni skriva in right, left eller justify)

Sedan kommer det till var man vill placera in bilden/bilderna någonstans. Jag har använt mig av en bild av min egen kodmall; de inringade områdena är koden för de bilder som ska visas, och de understrukna områdena är till för att visa var jag placerat bilderna någonstans (ovanför de olika rubrikerna). Ha i åtanke att min kodmall kan skilja sig från er då jag tagit bort koden för att visa kategorierna i sidmenyn. Ha även i åtanke att detta enbart är för en av kodmallarna (i det här fallet framsidan); om ni vill ha bilden/bilderna på de resterande mallarna måste koderna klistras in även där.



Jag hoppas att detta varit till någon hjälp.
//Lisa

Designändringar



Före, på sätt och vis


Efter


Jag glömde bort att ta en "före"-bild innan jag lekte med min design igår; det var något jag kom på först efteråt, så smart som jag är. Även om den övre bilden är någon månad gammal var det den som var den bästa; men det jag ville påvisa var utbytet av headern, profilbilden och att jag flyttat upp kategori-flikarna ovanför headern.
Jag, personligen, tycker att det blev bättre på det här sättet, men om det är någonting ni tycker att jag ska ändra på är det bara att säga till; även om det är min blogg, och min design, är det trots allt ni som ska kunna läsa den. Det minsta jag kan göra är att underlätta det för er :)

//Lisa

En ändring, eller två

Jag hade tänkt göra denna ändring först efter att ha bytt header, men jag kände att jag inte ville vänta längre.
Men vad tycker ni? Var detta bättre eller sämre?

Före:


Efter:

(jag har flyttat alla kategorier från sidmenyn till headern, och jag fixade en drop-down-meny)


//Lisa

Det här med YouTube-klipp...

"Hur får man in låtar på sin blogg?:) har försökt så många gånger men gett upp XD. och bara fått in videon :/ hihi.

Puss!"


Det var Emma (hon driver en riktigt söt blogg, om ni frågar mig, så kika gärna in) som ställde den här frågan, men jag kommer ta allt från början.


Om man vill lägga in en YouTube-video behöver man såklart börja med att leta upp klippet man vill ha.
När du har hittat videon finns det en liten ruta -- "Bäda in" -- som man ska klicka på.


När du klickat på rutan får man klicka på olika alternativ, som ni själva får välja. Efter att ha gjort det ska du kopiera koden.


När du ska skriva ett nytt inlägg ska du klicka på en länk som finns längst ner till höger; "Ändra redigerare".


Det är här du ska klistra in koden.
För att få en remsa istället för hela videon ska ni leta upp "height" som finns på två ställen i koden. Siffran här varierar, men du ska ändra det till 25.
Det finns även två ställen där det står "width"; det finns vissa videos som är bredare än er blogg och det är en annan sak som är viktig att se efter för att videon ska hamna rätt.


När allt det är gjort är det bara att klicka på "Ändra redigerare" igen för att komma tillbaka till "den vanliga sidan" om ni vill lägga till någon speciell text. Annars är det bara att publicera inlägget som det är...


...och så ser det ut såhär :)

Jag hoppas att jag inte glömt ta upp något steg, och att det var tydligt. Om det är något som är oklart är det bara att kommentera ;)

//Lisa

Angående bloggdesignen


hej, hur har du fått designen att lysa igenom? krånglat massor med det!
En fråga jag fick av Emma, och som jag tänkte besvara här i bloggen :)

 

Jag hade också en hel del problem med det förut. Jag trodde att man kunde göra wrappern genomskinlig, men då blev hela bloggen genomskinlig. Det var först för någon månad sedan jag fick en snilleblixt och insåg att man kunde använda sig av två olika bilder istället.


 
Bilden till vänster är "orginalbilden", och den till höger har jag redigerat för att man ska få en genomskinlig look (det krävs inte mycket; det räcker med att man höjer ljusstyrkan).


Det som är viktigt är att man använder sig av samma "position" när man lägger in bildkoderna för att designen ska fungera, och man ska helst inte ha "center" heller.



Som ni ser har jag skrivit in "left" som "background-position" på både bakgrunden (body) och wrappern. Det fungerar lika bra med "right", men inte med "center", av någon anledning.

 

För att få en genomskinlig look hela vägen ner har jag valt att även skriva in denna kod i Stilmallen (den ska in under wrappern):

#wrapper:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Denna kod hittade jag med hjälp av DDB.

Jag hoppas att det inte blev alltför rörigt nu, men om det är någonting ni känner att ni vill ha förklarat är det bara att fråga (eller att besöka DDB) ^^

 

//Lisa