lørdag den 23. januar 2010

Layout guide: Hvordan er det liige man..?

Der er flere og flere der spørger om diverse ting med hensyn til bloggens layout, så nu har jeg strikket en lille guide sammen, der forhåbentlig kan opklare det lidt.

1. For at ændre sit layout skal man gå ind under layout i blogger menuen og derefter rediger HTML.

Jeg bruger layout skabelonen Minima og derfor vil html-koderne se anderledes ud, hvis man bruger en anden skabelon, men man burde godt kunne bruge guiden alligevel.

Hvordan gør jeg min blog bredere?

1. Mange spørger hvordan jeg gør min blog så bred, og det er faktisk såre simpelt. Man skal blot ændre pixel størrelsen forskellige steder under html. Det er kun størrelsen på width man skal ændre. Header-wrapper bestemmer bredden på ens header (altså i mit tilfælde det billede jeg har, hvor der står pagik). Vil man indsætte et billede som header, bliver man derfor nødt til at tilpasse widthheader-wrapper, så det passer med bredden på ens billede.

2. Header description bestemmer hvor bred selve headeren er. Hvis ens header fx består af en tekst, er det header description der bestemmer hvor bred teksten kan være, hvorimod header-wrapper bestemmer bredden på rammen rundt om teksten. Forvirret? Kort sagt: header-wrapper skal altid være større eller samme størrelse som header description og ellers prøv dig frem.

3. Outer-wrapper består af både indlæg, header og sidebar og er altså bloggens samlede bredde. Main-wrapper er bredden på indlæg og sidebar-wrapper er bredden på menuen til højre eller venstre. Det er en god idé at huske bredden på main-wrapper, da man så kan tilpasse sine billeder, så de har præcis samme bredde som ens indlæg.

4. Det nemmeste er at prøve sig frem lidt ad gangen og se hvordan det ser ud ved at trykke vis eksempel inden man gemmer.

Hvordan fjerner man rammen om billeder?
1. Border er rammen rundt om billeder, som kan fjernes ved at sætte px til 0. Det samme kan gøres ved headeren og profilbilledet.

Hvordan laver jeg overskriftsstregen?

1. Igen er det border vi skal have fat i. Da jeg ikke kan huske hvordan koden så ud inden jeg lavede den om, kan jeg kun vise, hvad jeg har ændret koden til. Antal pixel bestemmer hvor tyk stregen er og solid betyder at det er en helt almindelig streg og ikke fx prikker.

Håber det kunne bruges, ellers må I meget gerne stille spørgsmål. Men det er nu ikke fordi jeg er nogen ekspert. Jeg har selv bare prøvet mig frem.

54 kommentarer:

  1. PERFEKT GUIDE!
    Der er bare nogle af de ting, som jeg ikke har kunne finde ud af at ændre, men nu har jeg fundet ud af det ved hjælp af din guide. Ih, tak for det :-)

    SvarSlet
  2. Der er allerede en bred skabelon hos blogger. Den er en afart af den skabelon som du bruger, men den hedder så Minima Stretch - den trækker layoutet helt ud. Det er den jeg selv bruger, kan også godt lide det brede look :)
    http://infashionwetrustblog.blogspot.com

    SvarSlet
  3. Camilla: Det var lige det jeg havde håbet på at høre. :)

    Anna: Mystisk, den kan jeg ikke finde. Men den ligger måske ikke inde under de skabeloner man vælger?

    SvarSlet
  4. Hvor er det fedt, at du gider at bruge tid på at lave sådan en guide..

    - tak :D

    SvarSlet
  5. Tusind tak for din fine guide!
    Dejligt at du brugte tid på det.

    /Chau
    http://thetigerakachau.blogspot.com/

    SvarSlet
  6. Fedt med en guide, men jeg fatter stadig ikke hvordan jeg sætter en overskriftsstreg ind??? :o)

    SvarSlet
  7. Tusind tak!

    Cille: Hvis du har samme layout skabelon som mig, kan du bare skrive det samme som jeg har markeret under den kode der starter med ".post {" Så skulle den være i vinkel. Og så kan du selv ændre størrelsen af pixel, hvis du vil have den skal være mindre eller større. Hvis du har en anden layout skabelon, kan jeg desværre ikke hjælpe dig, da jeg ikke kan huske, hvad det var jeg gjorde.

    SvarSlet
  8. Bare i orden - Jeg prøver mig frem, men tak :o)

    SvarSlet
  9. Super fedt med denne mini-guide :)

    Den steg du fortæller om (solid), når jeg bruger den kode, så kommer stregen under indlægget, ved du hvad du gør for at din kommer til at være øverst?
    Nu et spørgsmål til dine billeder, hvordan får du dem så store? - Har prøvet tinypic, men får det ikke helt til at fungere.

    SvarSlet
  10. Cille: Håber du finder ud af det. :)

    Intro: Ja, det har jeg også prøvet. Men jeg kan ærlig talt ikke huske, præcis hvad det var ved koden jeg lavede om. Men når jeg skriver border-top, så er det den kommer i toppen. Ved ikke om det hjalp?

    Det lyder underligt, tinypic burde virke. Jeg bruger selv photobucket. Men det er svært at svare på, når jeg ikke ved, hvad det er du gør? Er dine billeder store i forvejen når du uploader dem? For de bliver ikke større af at blive uploadet, det skal de være i forvejen (undskyld hvis du allerede ved det, men bliver nødt til at forhøre mig om hvad grunden kunne være). Men du kan jo prøve photobucket i stedet, og se om det fungerer bedre for dig? Ellers skriv gerne igen. :)

    SvarSlet
  11. super fin guide pernille. :) tak..
    ville egentlig bare lige høre dig hvilken skrifttype du bruger? :)
    kærligst.

    SvarSlet
  12. ps. og hvordan får du din link liste til at se så fin ud? hvor der ikke er et stort mellemrum mellem hver blog-titel?

    SvarSlet
  13. Naja: Jeg bruger Georgia som skrifttype. Mhm, jeg har bare oprettet en helt almindelig linkliste i stedet for en blogliste, ved ikke om det er det, der gør forskellen?

    SvarSlet
  14. ahh smart. Det kunne sagtens være dét. Det må jeg lige prøve at ændre så, for din ser så fin ud. :)

    SvarSlet
  15. Ej hvor er det fedt, du har gidet at lave sådan en guide! SÅ fedt (:

    SvarSlet
  16. Super fed guide!
    Men jeg har lige et spørgsmål, som jeg håber, du kan hjælpe mig med.
    Jeg kan ikke få mine billeder til at være så store som dine, uden at de bliver grynet.

    Lærke.

    SvarSlet
  17. Lærke: Efter hvad jeg kan se på din blog ligner det at du uploader dine billeder direkte til blogger, hvilket automatisk gør dem meget mindre. I stedet skal du uploade dine billeder via fx photobucket eller tinypic. ByKatrine har lavet en guide til hvordan man gør det, den kan du se her: http://bykatrine.blogspot.com/2009/07/guide-strrebilleder.html
    Håber du kunne bruge svaret. :)

    SvarSlet
  18. Så fik du lige et tak på bloggen også. :)

    SvarSlet
  19. Jamen det var da så lidt og tusind tak. Er glad for at du fik det til at fungere så hurtigt. :)

    SvarSlet
  20. nu har jeg virkelig prøvet at klikke og taste på en masse forskellige ting, men kan stadig ikke få mine indlæg brede? øv øv. hvad har jeg overset? :)

    SvarSlet
  21. Laura: Det forstår jeg ikke. Har du gjort width større alle de steder, jeg har markeret? For så burde det virke.

    SvarSlet
  22. Det ligner, at du kunne have glemt at gøre "main wrapper" større, men jeg ved det ikke?

    SvarSlet
  23. hej tak tak og atter atter tak for en virkelig fed guide, min blog er blevet meget federe nu, men jeg kunne bare godt tænke mig at vide hvordan man for den sorte ramme om sin headder og ikke de der tynde streger?
    hilsen emma

    SvarSlet
  24. Emma: Det er jeg glad for at høre. Det ser rigtig godt ud!

    SvarSlet
  25. Virkelig fed guide! den hjalp mig rigtig meget til at lave mit eget layout (:

    sitesoflife.blogspot.com

    SvarSlet
  26. Åh hvor er du sej Pernille :D Farvel grimme billedkanter, jubii

    SvarSlet
  27. Altså må jeg lige have lov til at sige tak...jeg har haft en blog i flere år, altid været irriteret over et par rammer rundt om mit billede/header...så lavede jeg mig en anden blog, hvor jeg afprøver sådan lidt html (og jeg aner altså virkelig ikke hvad jeg gør:-) ) Så med din vejledning har jeg nu fået fjernet kanterne omkring headeren..lige nu leger jeg så med at gøre min blog bredere...som det dog går
    :-) mange tak fordi du gider dele med os andre ..
    (nu er du så lagt i mine foretrukne, for så kan jeg altid finde dette indlæg igen hihi)

    SvarSlet
  28. Skal lige høre om hvis man ændre sin side så som laver den bredder bliver alle ens gamle indlæg lavet om til den bredde også ?

    Tak fordi du deler med os.

    SvarSlet
  29. Tusind tak Pernille, du har levet en fantastisk vejledning som jeg har fulgt og endelig er mine billeder blevet større. Du er en skat ;)

    SvarSlet
  30. Har læst næsten alle kommentar, og kan stadig ikke finde ud af at gøre min billeder større. Nu har jeg været inde på photobucket og lave en bruger, men hvad skal jeg så gøre?

    SvarSlet
  31. Helle: Ændrer du i html følger hele bloggen med, også de gamle indlæg. :)

    Guide til store billeder: http://bykatrine.blogspot.com/2009/07/guide-strrebilleder.html

    SvarSlet
  32. Ge-ni-alt! Tak :-)

    www.joyfrydlarsen.blogspot.com

    SvarSlet
  33. Mange tak, din guide har virkelig hjulpet mig, men jeg har stadig problemer med én ting :D Hvordan får man sin overskrift til at stå i venstre side, stedet for i midten? På forhånd tak.

    SvarSlet
  34. Jeg har læst alle de her kommentarer, og søgt overalt på Internettet, og jeg kan SLET ikke finde ud af det. Min blog er fuldstændig smadret nu, og aner ikke hvordan jeg skal rette op på det :S

    Jeg har en anden skabelon nemlig, og et andet layout, så kiggede efter dit, og rettede der hvor jeg troede, at det nok var det samme, men det var så forkert - Er der nogle der har det layout der hedder: watermark by Josh Perterson?

    Og nogle der ved hvordan man får sin indlægs tekst/overskrift til at stå i midten?

    Er jeg fuldstændig nørd? :)

    Mvh.

    SvarSlet
  35. Anna-Sofie: Hmm, mener du indlæggenes overskrift? For ved mig, vil jeg da sige at den står til venstre?

    Hej Zine. Det er jeg virkelig ked af at høre! Jeg kender desværre ikke noget til den skabelon, men jeg mener at man kan nulstille sin skabelon, så alle ændringer bliver slettet. Måske du kan prøve det? Det er selvfølgelig træls, hvis andre ændringer du også har lavet også bliver slettet, men hvis du vil have dit layout tilbage, er det nok det eneste du kan gøre. Håber du finder ud af det! Og ved desværre heller ikke det med overskriften i midten.

    SvarSlet
  36. Okay, tusind tak for hjælpen :)
    Ved du måske hvordan jeg får eller hvordan det ser ud, det layout du har 'minima' ? For så kan jeg jo bare følge din meget fine guide med samme kode.

    God weekend :)

    SvarSlet
  37. Please hjælp, kan ikke rigtig komme videre med min blog !

    SvarSlet
  38. Hej Zine. Det er sjældent jeg tjekker for kommentarer på ældre indlæg, så beklager at jeg ikke har svaret. Men du kan altid sende en mail hvis der er noget.
    Men med hensyn til dit spørgsmål - der er lavet en del om med layout på blogger siden dengang jeg oprettede min blog, det der nye "blogger-designer" er kommet til. Men du skal gå ind under design --> rediger html. og så nederst på siden under "gamle skabeloner" skal du vælge "vælg layoutskabelon", og så kommer du ind på en side, hvor du blandt andet kan vælge minima.

    SvarSlet
  39. Jeg ved dette er et gammelt indlæg, men hvor har det dog hjulpet - fulgte alle instrukserne og min blog er blevet rigtigt lækker og overskuelig at se på :) Har nemlig også længe forsøgt at få de der fine sorte striber hen over indlæggene.
    Du er guld værd :)

    Jekatarina

    SvarSlet
  40. Okay, jeg har liiige det problem at jeg ikke kan fjerne min baggrundsfarve som er så forfærdeligt blå. Altså jeg kan lave den om til alle mulige andre farver bortset fra sort eller hvid? :-(

    /dominyka

    SvarSlet
  41. hej :)
    Hvordan får du den sorte streg imellem hvert indlæg til at være tyk? (:
    - Caroline.

    SvarSlet
  42. Har først set jeres kommentarer nu, så håber I har fundet ud af det, men her er mine svar alligevel. :)

    Dominyka: Bruger du tal-koder for farver eller skriver du farven med bogstaver? Jeg har ikke selv prøvet at ændre min baggrundsfarve, så jeg har svært ved at svare på dit spørgsmål før du fortæller lidt mere.

    Caroline: Det er overskriftstregen, så læs den del af guiden, der står det.

    SvarSlet
  43. Tusinde tak for rigtig dejlig guide. tak fordi du gider tage dig tid til at lærer alle os computer dumme mennesker det! :-)

    http://www.whereandwho.blogspot.com/

    SvarSlet
  44. Denne kommentar er fjernet af forfatteren.

    SvarSlet
  45. Hej ! Fedt indlæg :-)
    Kan du uddybe hvordan man laver overskriftstregen en smule mere ? Ved godt det er svært, men jeg tror jeg har lidt mere brug for hjælp. :S

    -Victoria.

    SvarSlet
  46. hej :)
    der er vel ikke nogen som kan svare på, om hvordan man får sin indlægs tekst/overskrift til at stå i midten?
    ved godt det spørgsmål er blevet spurgt tidligere(dog ikke svaret på), men kan være folk ved det nu??

    SvarSlet
  47. Denne kommentar er fjernet af forfatteren.

    SvarSlet
  48. hov nej mente ikke indlægs overskrift.
    men overskriften til ens blog? :)

    SvarSlet
  49. Mange tak!

    Men jeg har et lille problem, istedet for at den trækker min blog ud til ventre, så bliver den trukket ud til højre, så alle mine ting forsvinder, og bliver lagt neden uden den!
    Kan du måske tage et kig på min blog, og måske fortælle hvad deet er jeg har gjort forkert? :-)

    SvarSlet
  50. ARGH det sker også for min Zitha!! Hvad gør jeg! Alle mine widgets ender nede i bunden istedet for ude i højre side.. What to do?

    SvarSlet
  51. God guide. Men fatter det stadig ikke helt. :(

    SvarSlet