Designa din metroblogg!
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
Hej
Jag vill bara tacka för en uuuunderbar sida, tuuusen tack för ditt inlägg och din blogg. You made my day!! =)
Detta va kul, lättare än vad jag trodde och super skoj! TACK =)
Hej igen, ännu en gång, super tack för din kanon sida! =)
Det finns bara en liten sak som jag inte kan lista ut.. jag ville ändra så att texten man skriver inlägg ska bli en viss stil (Monotype Corsiva) men bara när jag skriver ett inlägg, resten åp bloggen ska va vanligt, dvs Arial eller Veranda eller nått. Men det funkar inte, hur jag än ändrar så antingen ändrar jag inget eller allt.
Sorry nu visste jag inte vart jag skulle skriva, här eller maila?
Tacksam för svar och hjälp.
Mvh
Hej! Jättekul och bra med en sån här sida :) Bara ett problem; jag har gjort exakt som du har beskrivit och ändå funkar det inte. Jag har kört fast redan vid min header. Så här ser det ut i min CSS när jag har laddat upp min egen bild;
/Generellt: Typsnitt och f?rger/
#minBlogg {
background:#FFFFFF url(londonbanner.jpg) top center no-
color:#000;
font-family:Helvetica,Arial,Verdana,sans-serif;
font-size:1.1em;
margin:0 0 0 0px;
padding:0 0 0px 0px;
}
Förstår inte vad som är felet. Har prövat att ta bort de bilder som redan finns, men det funkar ändå inte. Tacksam för svar!
hej!!! =) det fungerar inte för mig. jag har gjort som det står. men får ändå inte fram headern.
hur ska jag göra?? så här har jag skrivit:
/Generellt: Typsnitt och f?rger/
#minBlogg {
background:#95B6D7=oo.jpg url oo.jpg769x221px top center no-repeat;
color:#000;=000000=svart
font-family:Arial,Helvetica,Verdana,sans-serif;
font-size:1.1em;
margin:0 0 0 2px;
padding:10px 25px;
border:1px dotted #032B54;
}
/URLen/
#bloggURL {
position:absolute;
top:10px;
left:130px;
har jag ens gjort rätt???
Tack så jätte mycket :D Du gjorde verkligen min dag där! har försökt i veckor att fixa en header till Metrobloggen och nu är den ordnad. Tack :D
Riktigt bra förklarat!
Tack, Tack och Tack!
=)
Åh, det verkar krångligt. Men jag ska ta och försöka! :D
Jag har fått in header nu på min blogg. men får fan inte bort orginalrubriken... Störande!
Tack!!! Tack!!!! Tack!! du förstår inte hur mycket du har hjälpt mig! Steg för steg var verkligen toppen för man kan jämnföra hela tiden! En helt underbar sifda! tack än en gång för att du fixat denna! Kram
Kanonbra guide! Jag gör också en hel del guider om metrobloggens design... Så kika gärna in..
tack!
åh, tack för din hjälp!
du är guld värd
Förstår inte hur man laddar upp en bild på metrobloggen , om du kan hjälpa mig skulle va snällt maila mig eller komentera på min blogg www.sabinath.blogg.se
elelr maila på [email protected]
puss på dig !<3
du räddade mig när jag råkade radera alla inställningar jag hade sen tidigare...
Tack tack tack! Detta hjälpte jätte mycket, satt och googlade och hittade detta inlägget :D
Detta verkar spännande.......får se vad jag kan klura med i helgen å nästa vecka!
Tack än så länge!
Enormt stort TACK till dig för detta inlägg!
tack så jätte mycket !
Det funkade inte att lägga in bilden,
skulle bli väldigt glad om du kunde hjälpa mig?
tack på förhand!
Du är grym! Den enda av alla massa förklaringar jag läst som verkligen fungerar - TACK!
tack tack tusen tack! you made my day 2 :D har letat superlänge efter sån här hjälp :D
Tusen tack!!!
Gillar denna Bloggen :)
Hej,
Jag är Johan. Kära webmaster Jag behöver lite shopping, IQ-test, Gifs, Model, Routenplaner, Dejting, Webtains, el, Casino, mode, utbildning sajterna mina webbplatser mår bra i större söka engines.Your ingången är mycket uppskattad jag skulle vilja gratulera er för att även söka i Google har jag hittat din hemsida och eftersom vi båda är i liknande områden jag skulle vilja utbyta länkar med din webbplats.
Jag har några friska innehållssidor i mina webbplatser och ger dig vissa friska länkar från mina webbplatser.
Så, om du är intresserad så vänligen skicka mig din länk detaljer med mina webbplatser. Jag kommer att aktivera dina länkar inom några minuter.
Jag kan försäkra er att ni kommer få bra sökmotor värde från vår länk. Om du inte är den berörda personen, sedan vänligen vidarebefordra detta mail till de berörda webmaster.
För en gångs skull lärde jag mig något genom att läsa en blogg. Det är inte alltid man gör det direkt, tack för att du lägger ner din tid på att blogga :).
