Info: Dieser Blog wurde 2014 eingestellt. Dies hat viele Gründe, die an dieser Stelle jedoch nicht relevant sind. Die meisten der hier veröffentlichten Tutorials sind inzwischen nicht mehr aktuell, verlasst euch also nicht auf das hier geschriebene.
Zusammen mit dem Blog sind auch unsere E-Mail, unser ask.fm und unser facebook eingestellt.

Sidebar-Widgets unterschiedlich gestalten

Hallöchen! (:

Ich bin die 15-jährige Dornröschen und werde von nun an versuchen, euch hier mit vielen Tutorials den Blogger Alltag zu erleichtern.  Heute möchte ich euch zeigen, wie ihr die einzelnen Widgets in eurer Sidebar verschieden gestalten könnt. Normalerweise sehen die Widgets bei den Blogs ja immer gleich aus. Es wird also immer die selbe Schrift für den Text, den Titel und die Links verwendet, alles hat die selbe Farbe etc. Wenn ihr nun aber ein Widget zum Beispiel mit einer anderen Hintergrundfarbe ausstatten wollt, solltet ihr nun weiterlesen.


Zuerst öffnet ihr euren Dashboard, klickt auf den gewünschten Blog und anschließend an der Seite auf Vorlage. Nun müsst ihr auf den Button HTML bearbeiten drücken.
Jetzt habt ihr den Code vor euch. Um an die für das Tutorial benötigte Stelle zu kommen, müsst ihr mit Hilfe der Suchfunktion nach       sidebar-wrapper  suchen. Die Suchfunktion startet ihr übrigens mit strg+F bzw. ctrl+F.
Da es sidebar-wrapper zweimal im Code gibt und nur eine Stelle richtig ist (nämlich der HTML-Code und nicht die CSS-Definition), stellt sicher, dass ihr auch wirklich folgende Stelle gefunden habt (wenn nicht klickt einfach auf den Pfeil nach unten, um zur richtigen Stelle zu gelangen).


In diesem Code könnt ihr eine Übersicht eurer Widgets in der Sidebar finden (falls es bei euch komplett anders aussieht, prüft dass bei "Widget-Vorlagen komplett anzeigen?" kein Haken ist). Jedes Widget in eurem Blog hat eine persönliche ID, die es uns erst ermöglicht, die Widgets verschieden zu gestalten. Häufig haben die Widgets ID's wie HTML1 oder HTML2. Das sind einfach Widgets, die ihr über das Tool "HTML/ Java Script" erstellt habt. In der Grafik sind die verschiedenen ID's unterstrichen
Wenn jetzt eins euer Widgets HTML2 heißt, kann man sich sehr schlecht erschließen, um welches Widget es sich handelt. Dafür wird aber zum Glück in der selben Zeile auch noch der Name des Widgets angegeben. In der Grafik habe ich es türkis  markiert.
So, jetzt wo wir wissen, wie die verschiedenen Widgets heißen, können wir über CSS jedem Widget eigene Eigenschaften zuweisen. Dafür suchen wir im Code als nächstes nach ]]></b:skin> Dadrüber können wir jetzt unseren CSS-Teil hinzufügen. 
#BlogArchive1{
}

#BlogArchive1 h2 {
}

#BlogArchive1 a:link {
}
#BlogArchive1 a:visited {
}
#BlogArchive1 a:hover {
}
Der in gelb geschriebene Teil bestimmt die Eigenschaften von dem Widget selbst. Hier könnt ihr zum Beispiel den Hintergrund des Widgets (background), die Schriftart (font-family) und -farbe (color), den Rahmen (border) und vieles mehr bestimmen. 
Das lila Geschriebene bestimmt die Eigenschaften des Widgettitels. Hier könnt ihr auch herumexperimentieren, ein paar Anregungen wären Schriftart (font-family), Schriftgröße (font-size) oder eine Unterstreichung (entweder mit border-bottom oder text-decoration: underline;). 
Die grün geschriebenen Stellen bestimmen die Eigenschaften der Links in den verschieden Zuständen (link, hover und visited). Auch hier könnt ihr euch wieder etwas Netter zusammenbasteln. 
Das dick Unterstrichene bestimmt, um welches Widget es sich handeln soll. In dem Beispiel oben habe ich das Blog-Archiv genommen. Falls ihr ein anderes Widget gestalten wollt, müsst ihr diese Stelle einfach mit der oben angesprochenen ID des gewünschten Widgets ersetzen.

Durch diese Methode könnt ihr eurer Kreativität freien Lauf lassen. Versucht's doch einfach mal, ich bin mir sicher, dass dabei durch viel Experimentieren richtig schöne Sachen entstehen können. :) Ich habe es selber an meinem Probeblog ausprobiert, aber ohne mir richtig viel Mühe zu geben, deswegen sieht es leicht komisch aus. Aber ich will's euch trotzdem mal zeigen:


Hinweis: Falls es Eigenschaften gibt, die ihr nicht überschreibt, dann werden diese von dem CSS-Teil des sidebar-wrapper's übernommen. Das heißt, wenn ihr beim sidebar-wrapper angibt, dass jedes Widget rund sein soll und es dann bei den einzelnen CSS-Definitionen nicht mit anderen Angaben überschreibt, dann wird auch das Widget rund. 

Das war's dann mit meinem - nebenbei ersten - Tutorial. Ich hoffe es hat euch weitergeholfen und war gut verständlich. Ich würde mich wirklich wahnsinnig sehr über Feedback freuen. Falls es Fragen oder sonstige Unklarheiten gibt, könnt ihr sie gerne in den Kommentaren hinterlassen, ich beantworte sie so früh wie möglich. 

Bis zum nächsten Mal,
Dornröschen 

Kommentare:

  1. Ist ja cool :) Ich hab's jetzt nicht ausprobiert, weil ich glaube, das passt bei mir nicht so recht hin, aber es sieht auf jeden Fall gut aus.
    Ich hab eine kleine Frage: Weißt du, wie die Schriftart der Sidebar im Minima Template heißt? Bzw. wie man die Schrift in die Simple Vorlage einbauen kann?! Verzweifel da schon länger dran ...

    AntwortenLöschen
    Antworten
    1. Hihi, sehr peinlich. Das war ja leicht. Danke sehr für deine Hilfe! :**

      Löschen
  2. Sieht klasse aus! Werde ich demnächst mal ausprobieren! :)

    Momentan läuft bei mir die Aktion: Blog of the Month. Schau doch mal vorbei :)

    my blog xx

    AntwortenLöschen
  3. In meinem HTML gibt es kein 'sidebar-wrapper'? Mein HTML ist generell total komig, seitdem der Vorlagendesigner bei mir nicht mehr funktioniert.

    AntwortenLöschen
  4. hey :) Super Tutorial!

    Ich habe noch eine Frage: Bei dir ist alles so schön zentriert und die schrift nicht am Rand gequetscht. Wie kann man das erreichen?

    AntwortenLöschen
  5. Bei mir gibt es kein Sidebar-Wrapper :(

    AntwortenLöschen
  6. Bei mir gibts komischerweise kein Sidebar-Wrapper :/

    AntwortenLöschen
  7. Das Pröblemchen habe ich leider auch :/

    AntwortenLöschen
  8. und ich leider auch.. funktioniert bei mir irgendwie alles nicht. möchte gern einen rahmen um meine Gadget-titel haben.

    AntwortenLöschen

Wie schon an anderer Stelle dieser Seite bemerkt, ist der Blog eingestellt. Das bedeutet leider auch, dass wir als Blogautoren auf deinen Kommentar nicht eingehen werden.