LOVE
Hej. Jag gjorde som ni ser denna hjälp guide för ganska länge sedan, hade nästan glömt bort den och måste tacka för alla fina kommentarer ni har skickat! Min nya blogg finns numera på http://fina.blogg.se
Ciao!
Designa din metroblogg!
OBS. DETTA GÄLLER ENDAST ANVÄNDARE AV METROBLOGGEN!
Jag tänkte försöka göra en grundlig och enkel guide till hur du gör din egen design på metrobloggen. Jag vet att många inte själva kan göra i ordning sin blogg och dom flesta vill väl ha en egen och personlig design. Jag tänker gå igenom grunderna och anledningen till att jag använder mig av blogg.se i det här inlägget är för att det inte går att göra miniatyrbilder hos metrobloggen. Jag går inte igenom varje kod utan de jag inte går igenom behöver ni inte göra något med utan bara låta det vara som det är. Jag förklarar också mer grundligt i början sen är det bara att kolla på bilderna så tror jag ni kommer förstå sambandet som finns mellan allt utan problem. Har ni frågor kan ni vända er till [email protected]. Lycka till!
1. Jag började med att välja mallen Vår. Egentligen spelar det inte så stor roll vilken du väljer när du väl har lärt dig men jag föreslår att du väljer Vår nu från början för att göra det så enkelt som möjligt. Färger som du kan använda hittar du här. Har du photoshop kan du använda färgblandaren där.
2. Då börjar vi då, för att lägga in en header så laddar du upp en bild från datorn, den bör ungefär ha måttet 729x300 men höjden (300) kan variera efter vad du själv tycker. Ett förslag är att döpa bilden i datorn till header så är den lätt att lägga in sen. Det du gör när du laddat upp den är att radera bilden som fanns från början så att bara din bild finns kvar (bild 1 nedan). Sen är det dags att lägga in bilden och ändra färger på bakgrunder och så. Bakgrunden kommer bli den plats där du skriver dina inlägg. På bild två ser du hur du gör allt detta. Efter detta är bakgrunden och headern klar, du ser resultatet på bild tre. Att texten går upp i bilden fixar vi senare.
3. Nästa avsnitt handlar om länkar. Det första (/*URLen*/) handlar om var den lilla texten med din bloggadress ska sitta. Där behöver du inte ändra något utan bara låta det vara. Nästa (#bloggURL a) är storleken och färgen på länken. För att förstå resten så klickar du på bild ett. För att se hur det ser ut när du gjort detta klickar du på bild två.
4. Här ser du hur man ändrar färg på kanten runt bilderna och färg på rubrikerna i bloggen. Klicka på bilderna för att se hur du gör och för att se resultatet.
5. Här ser du hur man tar bort bloggens namn (no more fashion victims) som ofta täcker headern. Detta syns inte när du förhandsgranskar utan namnet försvinner när du sparat och går in på din blogg genom bloggadressen. Här flyttar vi också ner allt så att texten inte står i headern. Höjden på din header ser du där du laddat upp bilden. Som vanligt ser du resultatet av det vi gjort på bild 2.
6. Här gör vi en streckad linje under inläggen.
7. Detaljer där man skriver kommentarer. Syns inte i förhandsgranskning.
8. Detajler i sidokolumnen. På bild ett har jag ändrat till prickade svarta linjer. Här ser vi resultatet när vi förhandsgranskar.
9. Här ändrar vi färgen på kanten kring profilfotot. Dock har jag inget så vi ser inte resultated av det här.
10. KLAAART! Hoppas att ni fick ett lyckat resultat!
UPDATE
Tänkte visa lite mer saker som gör designen lite snyggare.
1. För att få en bakgrund utanför själva bloggen så ska du klistra in en annan kod på samma plats som jag visar på bilden. Du får flytta adressen till headern. Kolla på bilderna för att förstå hur och nedanför har jag klistrat in koden som du bara kan kopiera. Som vanligt ser ni resultatet på bild två.
#minBloggInner {
background:#FFFFFF url(header.jpg) top center no-repeat;
margin:0;
padding:18px;
border:1px solid #000000;
}
2. Du kan även ha en bakgrund på sidokolumnen. Här nedan förklarar jag det. Resultatet ser du på bild två. Det du gör är att klistra in denna kod, där det står url () kan du om du vill klistra in en bildadress för att få en bild som bakgrund. Du ser resultatet om du förhandsgranskar.
background: #C4C4C4 url() top left repeat;
border: 1px solid #000000;
3. Ytterligare en sak man kan göra är en bakgrund på länkarna, både när man ser dom i bloggen och när man håller pilen över dom. Jag har valt att bara ha bakgrund när man har pilen över. Och sen har jag tagit bort strecket under länken.
Det var allt jag tänke visa idag. Lycka till!
OBS: KOMMENTERA INTE I DEN HÄR BLOGGEN, FRÅGOR SKICKAS TILL [email protected] ELLER HTTP://WWW.METROBLOGGEN.SE/FINA
Jag tänkte försöka göra en grundlig och enkel guide till hur du gör din egen design på metrobloggen. Jag vet att många inte själva kan göra i ordning sin blogg och dom flesta vill väl ha en egen och personlig design. Jag tänker gå igenom grunderna och anledningen till att jag använder mig av blogg.se i det här inlägget är för att det inte går att göra miniatyrbilder hos metrobloggen. Jag går inte igenom varje kod utan de jag inte går igenom behöver ni inte göra något med utan bara låta det vara som det är. Jag förklarar också mer grundligt i början sen är det bara att kolla på bilderna så tror jag ni kommer förstå sambandet som finns mellan allt utan problem. Har ni frågor kan ni vända er till [email protected]. Lycka till!
1. Jag började med att välja mallen Vår. Egentligen spelar det inte så stor roll vilken du väljer när du väl har lärt dig men jag föreslår att du väljer Vår nu från början för att göra det så enkelt som möjligt. Färger som du kan använda hittar du här. Har du photoshop kan du använda färgblandaren där.
2. Då börjar vi då, för att lägga in en header så laddar du upp en bild från datorn, den bör ungefär ha måttet 729x300 men höjden (300) kan variera efter vad du själv tycker. Ett förslag är att döpa bilden i datorn till header så är den lätt att lägga in sen. Det du gör när du laddat upp den är att radera bilden som fanns från början så att bara din bild finns kvar (bild 1 nedan). Sen är det dags att lägga in bilden och ändra färger på bakgrunder och så. Bakgrunden kommer bli den plats där du skriver dina inlägg. På bild två ser du hur du gör allt detta. Efter detta är bakgrunden och headern klar, du ser resultatet på bild tre. Att texten går upp i bilden fixar vi senare.
3. Nästa avsnitt handlar om länkar. Det första (/*URLen*/) handlar om var den lilla texten med din bloggadress ska sitta. Där behöver du inte ändra något utan bara låta det vara. Nästa (#bloggURL a) är storleken och färgen på länken. För att förstå resten så klickar du på bild ett. För att se hur det ser ut när du gjort detta klickar du på bild två.
4. Här ser du hur man ändrar färg på kanten runt bilderna och färg på rubrikerna i bloggen. Klicka på bilderna för att se hur du gör och för att se resultatet.
5. Här ser du hur man tar bort bloggens namn (no more fashion victims) som ofta täcker headern. Detta syns inte när du förhandsgranskar utan namnet försvinner när du sparat och går in på din blogg genom bloggadressen. Här flyttar vi också ner allt så att texten inte står i headern. Höjden på din header ser du där du laddat upp bilden. Som vanligt ser du resultatet av det vi gjort på bild 2.
6. Här gör vi en streckad linje under inläggen.
7. Detaljer där man skriver kommentarer. Syns inte i förhandsgranskning.
8. Detajler i sidokolumnen. På bild ett har jag ändrat till prickade svarta linjer. Här ser vi resultatet när vi förhandsgranskar.
9. Här ändrar vi färgen på kanten kring profilfotot. Dock har jag inget så vi ser inte resultated av det här.
10. KLAAART! Hoppas att ni fick ett lyckat resultat!
UPDATE
Tänkte visa lite mer saker som gör designen lite snyggare.
1. För att få en bakgrund utanför själva bloggen så ska du klistra in en annan kod på samma plats som jag visar på bilden. Du får flytta adressen till headern. Kolla på bilderna för att förstå hur och nedanför har jag klistrat in koden som du bara kan kopiera. Som vanligt ser ni resultatet på bild två.
#minBloggInner {
background:#FFFFFF url(header.jpg) top center no-repeat;
margin:0;
padding:18px;
border:1px solid #000000;
}
2. Du kan även ha en bakgrund på sidokolumnen. Här nedan förklarar jag det. Resultatet ser du på bild två. Det du gör är att klistra in denna kod, där det står url () kan du om du vill klistra in en bildadress för att få en bild som bakgrund. Du ser resultatet om du förhandsgranskar.
background: #C4C4C4 url() top left repeat;
border: 1px solid #000000;
3. Ytterligare en sak man kan göra är en bakgrund på länkarna, både när man ser dom i bloggen och när man håller pilen över dom. Jag har valt att bara ha bakgrund när man har pilen över. Och sen har jag tagit bort strecket under länken.
Det var allt jag tänke visa idag. Lycka till!
OBS: KOMMENTERA INTE I DEN HÄR BLOGGEN, FRÅGOR SKICKAS TILL [email protected] ELLER HTTP://WWW.METROBLOGGEN.SE/FINA
