About Tutorialübersicht Labels Header Goodies Tutorialwünsche

Dein Bloggerlayout - Part 1: Die Grundlagen

Dienstag, 5. Februar 2013

Heute möchte ich euch zeigen, wie ihr euer eigenes Layout erstellt. Ich weiß, das es schon Tutorials dazu auf time to steal ideas und Copy Paste Love gibt, aber hier zeige ich euch 'meine Weise'.
Im Vorhinein möchte ich euch sagen, dass ich mir sehr Mühe gegebn hab, und wenn ihr eine Frage habt, sofort stellen, falls etwas ungenau formuliert ist gerne auch :) Nur Rechtschreibfehler dürft ihr behalten ♥

So let's go!


Erst einmal braucht ihr die Minima Vorlage, (DOWNLOAD (copypastelove)) und einen Testblog, auf dem ihr an dem Design basteln könnt.
Für den Testblog empfehle ich ein Bild (so wie ihr es immer postet) und etwas Text, zum Beispiel Lorem ipsum.

Wenn ihr es jetzt anschaut, müsst es so aussehen:



Die Breite

Aber so wollen wir ja das nicht haben, ne?
Also machen wir uns daran, die Breite zu verändern. Das ist nicht ganz so einfach wie bei den neuen Vorlagen, aber überhaupt nicht kompliziert :)

Ihr sucht also nach /* Outer-Wrapper, dann landet ihr hier:
klick zum vergrößern


Und die Zahlen bei width:...; könnt ihr beliebig verändern. Ich habe hier ein Beispiel für Bilder in X-Large und zentriert:

Wie ihr sehen könnt, habe ich bei outer-wrapper das padding:10px; entfernt, aber dafür padding:10px; bei main-wrapper und padding:5px; bei sidebar-wrapper eingefügt.
Diese Zahlen bestimmen den Abstand vom Rand zum Geschriebenem, bzw. Bild.

outer-wrapper bestimmt die gesamte Breite eures Blogs.
main-wrapper bestimmt die Breite des Postingbereichs
sidebar-wrapper bestimmt die Breite der Sidebar
-> Dabei muss outer-wrapper immer größer sein als main-wrapper und sidebar-wrapper zusammen!
Am Besten einfach rumprobieren :)

Und falls ihr einen Header habt/haben wollt, sucht nach
#header-wrapper {
Und fügt dort die Breite ein, die auch bei outer-wrapper ist :)

Das Design optimieren

Jetzt geht ihr in den Vorlagendesigner. Also auf 'Anpassen'. Und da könnt ihr alles nach euren Wünschen gestalten.
Hier ist mein Beispiel:

Wenn ihr einen weißen Hintergrund habt, überspringt diesen Schritt.
Jetzt wollen wir nämlich die Sidebar und den Postbereich weiß hinterlegen.
Dazu gibt es drei Möglichkeiten:
1)
2)
3)
1) Alles weiß hinterlegt
2) Spalte zwischen Postingbereich und Sidebar
3) Alles zerstückelt

Wir sind immernoch im Bereich von oben (/* Outer-Wrapper)
Für 1) und 2)  benötigt ihr diesen Code:
background:#fff;
Für 1) müsst ihr einfach nur bei outer-wrapper den kopierten Code von oben einfügen. Fertig :)

Bei 2) müsst ihr den Code einfach nur bei sidebar-wrapper und bei main-wrapper  einfügen:
Für Nummer 3) wird es schon etwas schwieriger. Zuerstmal solltet ihr bei sidebar-wrapper und  main-wrapper das padding wieder entfernen, das müssen wir nämlich jetzt nochmal einfügen. Passt auf, das ihr bei den beiden nicht schon einmal background:#fff; stehen habt!

Bei .post { fügt ihr das darunter ein:
padding:10px; background:#fff;
Geht auf 'Vorschau'. Jetzt dürfte der Postingbereich zerstückelt sein.
Wenn ihr noch margin-top:2px; einfügt, könnt ihr den Bereich der 'Zertsückelung' einstellen.
Probieren!

Für die sidebar sucht ihr nach .sidebar .widget, .main .widget { und entfernt dort das , .main . widget
Darunter fügt ihr jetzt
padding:5px; background:#fff;
ein.
(Ja, die Info habe ich von time to steal ideas.)

Jetzt ist euer Grundgerüst fertig! 

Aber so ganz schön ist es auch noch nicht, deswegen basteln wir mal weiter.

Der Posttitel

Zuallererst fällt der Posttitel auf - so toll sieht das ja nicht aus, oder?
Natürlich können wir diesen verändern.
Ihr sucht nach
.post h3 {
Und darunter könnt ihr nur Befehle einfügen. Hier ein paar Beispiele:


  • Textausrichtung zentriert/links/rechts - text-align:center/left/right;
  • Textfarbe - color:#FARBE
  • Hintergrund  - lest hier ein tutorial :)

  • Schriftart - font-style:Verdana; | Wenn ihr eine Schriftart nehmen wollt, die nicht bei Blogger registriert ist, schaut euch dieses Tutorial an :)
  • Schriftgröße - font-size:*px; Auch hier könnt ihr die Zahl beliebig verändern :)
  • Rahmen: - border:1px solid/dashed/dotted #FARBE
    • border:.; - alle vier Seiten haben einen Rahmen
      border-left:.; / border-right:.; - nur links/rechts ist ein Rahmen
      border-top:.; / border-bottom:.; - nur oben/unten ist ein Rahmen
    • *px; - bestimmt die Dicke der Linie, die Zahl kann beliebig verändert werden
    • solid - ______ / dashed - _ _ _ _ / dotted - .........
    • und die Farbe könnt ihr auch bestimmen. Hier könnt ihr sie euch aussuchen.
  • (nur benutzen bei border) Höhe des Postitels - wenn ihr den Bordercode benutzt habt, dürfte euch aufgefallen sein, dass die Linie ziemlich weit unten ist. Um dass zu ändern ersetzt ihr line-height:1.4em; mit line-height:*px; . Mit diesem Wert könnt ihr rumspielen, bis er euch gefällt.
Hier seht ihr, wie ich mich entschieden habe, und den Code findet ihr auch auf dem Bild :)

Die Sidebar und das Datum

Und zu guter letzt im Grundlagenteil - Der Sidebartitel und das Datum.
Sucht nach:
h2 {
Hier könnt ihr jetzt wieder dasselbe einfügen wie oben, d.h. Textausrichtung, Textfarbe...
Aber: Wenn ihr nicht alles großgeschrieben haben wollt, entfernt text-transform:uppercase;

So sieht es nun bei mir aus:

So gefällt mir das Datum jetzt aber nicht. Ich finde die Linie doof, die Schriftart und die Farbe. Also ändern wir das nun an dieser Stelle:
h2.date-header {
Die ist direkt unter h2 {
Ihr müsst jetzt sozusagen 'Das Gegenteil' machen. Das heißt aus border-bottom:1px solid ..; wird border-bottom:0px; aus font-family:The Girl next door; könnt ihr die Schriftart machen die ihr wollt, und natürlich noch alles, was man auch beim Posttitel machen konnte :)
Damit es alles nicht so weit oben ist, hab ich noch margin-top:3px; eingefügt. Auch diese Zahl könnt ihr ändern.

Der Blogtitel

Hier gilt eigentlich auch wieder alles, was bereits beim Posttitel erwähnt wurde. Falls ihr einen Header habt, ist das nicht nötig.
Sucht nach
header h1 {

Und das ist mein Endergebnis:

Die Grundlagen sind nun fertig! Herzlichen Glückwunsch, du hast es bis hierher geschafft!
Diesen Monat kommen auch noch Part 2 [Die Feinheiten (z.B. Pattern, Links, Bilder bearbeiten,..)] und Part 3 [Die Extras(z.B. Menü, Leiste,..)] dazu :)

Und ich würde mich RIESIG freuen, wenn ihr mir eure Designs in die Kommentare postet!
Und noch eine Gute Nacht! ♥

43 Kommentare:

  1. sehr gut beschrieben, ich habe mich da ewigkeiten reinwurschteln müssen als ich letztes jahr den blog gestartet hab:D

    AntwortenLöschen
  2. Eine wirklich gelungene Beschreibung, die selbst ich verstehe. Bin mal gespannt auf die Nächsten Tutorials, vielleicht kann ich das ein oder andere ja auch für meinen Blog brauchen ;)

    AntwortenLöschen
  3. Bei mir funktioniert leider einiges nicht. Ehrlich gesagt kann ich beim Posttitel nur die Position verändern. Sobald ich eine Farbe angebe oder einen Rahmen, dann macht der nichts oder verändert die von mir angegebene Position wieder in die ursprüngliche. Was könnte ich falsch machen?

    AntwortenLöschen
    Antworten
    1. stelle sicher, dass du alles Semikolons ; gesetzt hast!
      wenn das nicht klappt, dann frag nochmal! ;)

      Löschen
    2. Jetzt passt alles :)
      http://wanzawach.blogspot.be/

      Löschen
  4. Viele Dank für das Tutorial :)
    Ich muss sagen, es ist besser geschrieben als bei Copy paste love ;)

    AntwortenLöschen
  5. ich freu mich schon wenns weiter geht <3

    AntwortenLöschen
  6. Auch wenn ich im Moment nicht die Zeit habe, mir ein eigenes Design zu basteln, mus ich hier einfach mal was loswerden:
    Ich finde es wirklich, wirklich toll, dass Du dir hier so viel Mühe machst undd as alles so ausführlich und verständlich erklärst!
    Weiter so! =)

    LG
    Charlie

    AntwortenLöschen
  7. Hey,

    danke für deine ausfürhliche Beschreibung!!
    Ich werde mich gleich dran machen und auf einem Testblog das es mal versuchen und ich freue mich schon auf die nächsten Layout-posts.
    Wenn du möchstest setzte ich später hier mal den Link zu dem Testblog drunter :)


    xoxo

    AntwortenLöschen
    Antworten
    1. sry ich bekomm die Minima nicht runtergeladen also wirds nix mit dem neuen desing

      Löschen
  8. Das ist echt super! Ich hab mich eigentlich noch nie wirklich für Design und so interessiert, aber jetzt ist mein Interesse definitiv entfacht und ich lasse all meine Kreativität aus, haha :D Danke!

    AntwortenLöschen
  9. http://iam-lifepictures.blogspot.de/ <- das hab ich designed mit eurem Tutorial :)

    AntwortenLöschen
  10. Danke hat echt gut geklappt !! :) mein design ist noch nich ganz fertig aber hier: http://testblogklara.blogspot.de/

    AntwortenLöschen
  11. Hey, wenn ich die dritter Variante versuche ist es bei mir so, dass zwar der post bereich noch weiß ist, die sidebar jedoch wieder die farbe des hintergrunds hat. weiß vielleicht jemand, woran das liegen könnte?
    liebe grüße :)

    AntwortenLöschen
  12. Das Tutorial ist klasse. ♥
    Mein Design sieht so aus: http://tintentropfen.blogspot.de/

    AntwortenLöschen
  13. Wundertoll :D ich habs echt hinbekommen :D

    Danke Danke Danke :D


    Jetz muss ich mir nur noch einen header zusammenbasteln.

    Achso und wo kann ich die Navigation ändern? Also die Anzeige der Seiten? Das sieht bei mir noch komisch aus :DD

    Krieg ich die auch Über den Header dann später ohne das es komisch aussieht?

    alles liebe
    Nyro

    http://nyrociel.blogspot.de/

    AntwortenLöschen
  14. hallo patrizia du hattest mir ja mein design erstellt, wo kann ich den bereich oben zwischen hintergrund und dem Header verkleinern? Mir kommt da zuviel Hintergrund, bevor mein Header kommt. Lg

    AntwortenLöschen
  15. Ich kann leider nur die Position verändern und ich setz auch überall das Simmikolon dahinter. Kannst du mir helfen? :)

    AntwortenLöschen
  16. Mein Post-Footer ist irgendwie ganz komisch, obwohl ich nichts daran geändert hab :s Da steht nur "keine Kommentare" und die Reaktionen. Weißt du, wie ich das beheben kann?

    AntwortenLöschen
  17. Danke für die tolle Anleitung :)! Habe mir daraus ein neues Design gebastelt und euch gleich im letzten Post verlinkt :):
    http://missvalerieanne.blogspot.co.at/

    AntwortenLöschen
  18. Vielen Dank! Ich werd es morgen mal ausprobieren! Hqb ich es richtig verstanden, dass man die farbe nicht nur auswählen muss, sondern auch noch bei diesem wapper reinschreiben muss? Schon mal vielen Dank im Vorraus!
    Liebe Grüße!

    AntwortenLöschen
    Antworten
    1. Ich habe es gerade hinbekommen! Vielen Dank für das Tutorial! Ich glaube ich wäre viel zu dumm dafür, so was alles selbst auzuprobieren..
      Liebe Grüße!

      Löschen
  19. Hi Patrizia ;),

    ich wollte dein tolles Tutorial grad mal ausprobieren und habe eine Frage: Gibt es so eine Vorlage auch mit Sidebars an beiden Seiten bzw. kann man das umstellen?
    Würde mich über eine Antwort freuen ;).

    LG
    Charlie

    AntwortenLöschen
  20. Bei mir funktioniert das mit der "Sidebar Weiß hinterlegen" nicht :( naja.. dann werd ich wohl noch etwas suchen müssen.

    AntwortenLöschen
  21. Bei mir ist auf einmal das Datum verschwunden und unter h2 { steht das gar nicht, sondern etwas weiter unten. ich krieg das irgendwie nicht hin, weißt du vielleicht wo mein fehler ist? aber wirklich gutes tutorial! (:

    AntwortenLöschen
  22. bei mir funktioniert es irgendwie nicht. wenn ich nach outer-wrapper suche bekomme ich nur eine andere stelle angezeigt..

    AntwortenLöschen
  23. Fuuuuu, die neue HTMAL-Vorlage findet nix ... :(((
    Lena♥

    AntwortenLöschen
  24. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  25. Ich krieg das mit dem Hintergrundwechsel nicht hin :(
    Bei mir ändert sich die Farbe des Postshintergrundes, aber ich möchte die Farbe vom gesamten Blog ändern. Das, was bei dir rosa ist, möchte ich grau, aber es passt nicht. :(

    AntwortenLöschen
  26. Der Link funktioniert bei mir nicht, obwohl ich das alles schon gerne machen würde! :(
    Aber richtig gut beschrieben! :)

    Liebe Grüße,
    Hanna :)

    AntwortenLöschen
  27. Hallo,
    wirklich super beschrieben.
    Ich bin gerade am basteln und frage mich,wie kann ich den Rahmen vom Blog-Titel entfernen?
    Habe die Vorlage von CPL..
    Liebe Grüße
    Johanna

    AntwortenLöschen
  28. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  29. Hey,
    bin ganz neu am Blogbasteln und bekomme schon eckige Augen vom Tutorials lesen. Ich bin langsam am verzweifeln, die Minima Vorlage gibt es nicht (mehr?) bei Blogger und dein angeführter Link funktioniert nicht:(
    Kann ich eine andere Vorlage nehmen bzw gibt es eine andere Möglichkeite Sidebar und Posts "aufzustückeln"?

    Liebe Grüße
    Yasmin

    AntwortenLöschen
    Antworten
    1. Hab leider genau das gleiche Problem. Weil ich hab auch nicht die 'alte' Vorlage :(
      LG *Anna*
      my-secrets-of-fashion.blogspot.com

      Löschen
  30. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  31. hey :) also irgendwie kann ich beim vorlagen designer nix machen ? ;/ woran liegt das ?

    AntwortenLöschen
  32. Hallo, ich muss auch sagen, dass es sehr gut beschrieben ist.

    Ich möchte gerne meine Sidebar farblich hinterlegen, habe aber den Part "Outer Wrapper" bei mir nicht finden können. Gibt es eine alternative dazu? Lg

    AntwortenLöschen
  33. bei mir gibts auch keinen outer wrapper :/
    lg

    AntwortenLöschen
  34. Danke für die Anleitung, hat bei mir eigentlich gut geklappt. Aber bei der Zerstückelung habe ich keine Abtrennung zwischen Postbereich und Sidebar geschafft. Woran kann das liegen? Als ich es dann nochmal versucht habe, wurde die Sidebar gar nicht mehr weiss.
    Im übrigen hat es mir meine Sidebar einfach unter den Postbereich verschoben...

    http://lullaby-diy.blogspot.ch/

    AntwortenLöschen
  35. WÜrdest du mir meinen Blog designen ich bin zu doof dafür

    AntwortenLöschen