[Blogger] Versenkter Widget-Container ✤✤✤✤✤

Dies war ein Gastpost bei cpl, da er allerdings dort entfernt wurde, habe ich ihn hier nun veröffentlicht. :)

Hallo alle zusammen.
Ich möchte heute ein weiteres "Fortgeschrittenen"-Tutorial für euch machen. Ich habe mit mir gehadert, ob Stufe 4 oder 5. Da mein letztes Tutorial allerdings doch einigen Schwierigkeiten bereitet hat, und dieses hier grundsätzlich komplizierter ist, habe ich mich doch für fünf Herzchen entschieden.
Dennoch: Es ist machbar! Ich geb wie immer mein Bestes euch da durchzuboxen.

Worum geht's?
Ich hab auf vielen Blogs bereits solche "Slide Out Facebook Widgets" gesehen, allgemein social-media-Dingends, die "heraussliden", sobald man drüberhovert. Ein Beispiel seht ihr auf dieser Seite.
Meine Idee war es, so etwas ähnliches zu bauen. Allerdings nicht für social media, oder zumindest nicht nur. Ziel war es, dem Blog einen Container hinzuzufügen der fully widgetized ist, also Platz bietet, um Gadgets drin zu versorgen.

Grundaufbau Container

Okay, im Grunde ist es eigentlich ganz einfach. Was wir uns zu nutzen machen, ist unser aller Liebling in der Webdesigner-Welt: CSS.
Die Idee dahinter ist folgende:
Ein Container wird im "normalZustand" im linken Rand versenkt, sichtbar ist bloss der Rand des Containers und ein Pfeil, sobald man über den Container hovert, flattert er heraus und die Widgets sind sichtbar.
Gebaut ist so etwas schnell.
Wir beginnen mit einem div-Container, dem wir eine eindeutige ID verleihen. Inhalt ist momentan leer, da drin kommen dann aber die Gadgets hin.
Dem Container geben wir dann mithilfe von CSS eine Grösse, eine Hintergrund-Farbe und dann positionieren wir ihn relativ versenkt.

<div id="dropout">
Hier kommen die Widgets rein!
</div>

<style>
#dropout {
height: 400px;
width: 300px;
background: #aaa;
position: relative;
left: -299px;
}
</style>

Im Hoverzustand, heben wir die Versenkung wieder auf, durch eine positive Positionierung.

<style>
#dropout {
height: 400px;
width: 300px;
background: #aaa;
position: relative;
left: -299px;
}

#dropout:hover{
left: 0;
}
</style>

Und hier hab ich euch das Ergebnis eingebunden. Über den grauen Streifen hovern.


Problem für mich war es dann, dass der graue Streifen schon sehr subtil ist. Also fügen wir ein Dreieck hinzu, dass die Aufmerksamkeit auf sich lenkt.
Ich hab's beim hovern jetzt hier noch verschwinden lassen, um "anzudeuten", was sich hier gestalterisch alles machen lässt.

Einbau in Blog

Haben wir das, bauen wir das ganze in den Blog ein.
Es ist eine Sache, die euch das Design zerschiessen kann, wenn's schiefläuft (wie alle eigentlicht...) also probiert es bitte in einem Testblog aus.
Wir gehen ins HTML


Als nächstes sucht ihr nach <div class='content'>


Und darunter kommt euer div-Container, zusammen mit den style-Klammern, in die eure CSS kommt.


Habt ihr die CSS eingefügt, klickt ihr auf speichern und schaut es euch an.
In meinem Fall sah es so aus:


Mir war der Abstand vom Rand zu klein, also hab ich ihn etwas grösser gemacht. Weiter habe ich durch das hinzufügen eines z-index: 5 meinen Container über dem Datum platziert, das im Weg war.
Das Ergebnis ist keine designerische Augenweide, aber es funktioniert. Also kann es weitergehen.

Widgetize

Okay. Damit wir in den Container unsere Gadgets packen können, müssen wir verstehen, wie so ein Widget-Bereich ausschaut.
Ich weiss nicht, ob ihr euch den Code schon einmal angesehen hat, grundsätzlich werden aber alle Gadgets in sections gepackt.
So eine section schaut im Grunde so aus:
<b:section class='classname' id='ID' maxwidgets='NUMBER' showaddelement='yes/no'locked='false/true'>
!!!WIDGETS!!!
</b:section>
Das sind alle Attribute, die ich bei den Blogger-Sections finden konnte. Nicht alle davon brauchen wir. Die Klasse und die ID sind wichtig, besonders die ID, denn jeder Bereich muss identifizierbar sein. Die Maximale Anzahl an Gadgets muss nicht unbedingt angegeben werden. Im Grunde ist es unbegrenzt. Eine Begrenzung macht bsp.weise beim Header Sinn, denn mehr als einen braucht man nicht. showaddelement ist für gewöhnlich auf yes, da man ja neue Gadgets hinzufügen will, sonst macht das keinen Sinn. Und "sperren" wollen wir's auch nicht.
Im Falle unseres Dropout habe ich die Section folgendermassen geschrieben:



Wenn ihr dann auf speichern klickt und auf Layout wechselt, könnt ihr das neue Quadrat sehen. Dort fügt ihr die Gadgets ein.

Style

Sobald ihr Gadgets drin habt, könnt ihr euch das ansehen. Schaut nicht so berauschend aus.


Die Antwort heisst CSS. Ihr müsst nicht extra für jedes Gadget eine neue CSS schreiben. Grundsätzlich enthalten Gadgets headings (h2) links (a) und Text, die ihr gestalten könnt.
Die Gestaltung findet in unserem Style-Bereich statt, den wir direkt unterhalb des eingefügten Bereich eingefügt haben. Wenn ihr die Definitionen des dropouts erweitert, passen sich die Gadgets an, da sie innerhalb des definerten Bereichs liegen.


Ja, das Beispiel oben schaut überhaupt nicht gut aus. Damit ihr euch aber vorstellen könnt, was man so machen kann, habe ich Noch gestalterisch was gemacht. In diesen Beispielen habe ich den HTML-Code noch etwas weitern müssen, da ich die CSS so geschrieben habe, dass bei einer Überfüllung des dropouts, eine scrollbar auftaucht und die kam in Kollision mit dem Dreieck.
Rot und Blau ^^



Und das war's, ihr seht, so schwer ist es nicht. :)
Ich hoffe das Tut hat geholfen und ihr probiert es aus, es ist eine nette Abwechslung, wie ich finde :)
Wie immer: Fragen einfach stellen und ich antworte ^^