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.

Gadgets "smooth" zeigen und verbergen


Ein Gastpost von 5202
Es gibt eine simple Wahrheit über Blogger Gadgets - sie nehmen viel Platz weg! Ich kenne blogspot.com Blogs, auf denen Gadgets 2/3 der verfügbaren Fläche einnehmen und das ist definitiv zu viel. Merke: Besucher kommen wegen eurer Inhalte und nicht wegen eurer Gadgets - Archiv & Co. sind sicher sinnvoll für euren Blog, trotzdem solltet ihr das ganze so klein wie irgend möglich halten.

Als radikalen Ansatz stelle ich euch heute eine Technik vor, mit dem ihr Gadgets nur bei Bedarf "smooth" zeigen und wieder verbergen könnt - "smooth" meint, dass ihr Gadgets mit 'Click' auf einem Layer animiert ein.- und ausblendet. Das ganze funktioniert mit reiner CSS und der Pseudoklasse :checked - erfordert also kein Javascript!

Demo

Um sich das besser vorzustellen habe ich eine Demo mit drei Gadgets gebaut - in der Tableiste könnt ihr per Click ein HTML/Java Gadget, ein Archiv Gadget und ein Friend Connect Gadget öffnen und schließen.




Vorbemerkung

Probiert das bitte unbedingt zuerst in einem Test-Blog aus! Ein Layout ist schnell zerschossen ... benutzt außerdem den _alten_ Blogger-Editor, der neue Editor produziert merkwürdige Fehler ...

A) HTML-Markup: Schalter und Sockel

Das HTML besteht aus zwei Teile, nämlich einem HTML-'Schalter' und einem Sockel, in dem später die Gadgets liegen. Ich beschreibe der Übersichtlichkeit halber das Markup für drei Einheiten, für mehr müsst ihr selber ergänzen
Der Checkbox 'Schalter'
Der Schalter besteht ganz simpel aus input Elementen mit dem Attribut checkbox. Eine Checkbox kann zwei Zustände haben, nämlich :checked und nicht :checked. Für drei Schalter benötigen ihr drei input Elemente:
<input id='rad1' name='rad' type='checkbox'/>
<input id='rad2' name='rad' type='checkbox'/>
<input id='rad3' name='rad' type='checkbox'/>
Jedem input Element ordnet ihr nun ein Label zu - das Label betätigt quasi den Schalter. Jedes Label braucht eine eindeutige Zuordnung zu einem input Elemente über das Attribut for.
<input id='rad1' name='rad' type='checkbox'/>
 <label for='rad1'>
  <span class='titel'>About</span>
 </label>
<input id='rad2' name='rad' type='checkbox'/>
 <label for='rad2'>
  <span class='titel'>Archiv</span>
 </label>
<input id='rad3' name='rad' type='checkbox'/>
 <label for='rad3'>
  <span class='titel'>Follower</span>
 </label>
In dem Label liegt jeweils ein span Container mit dem Titel - statt eines Textes könntet ihr aber auch ein Icon, farbige Kachel oder whatever nehmen. Ich habe für die Demo einen Text genommen, weil's einfacher zu verstehen ist ... man muss es ja nicht unnötig kompliziert machen:=).

Der Schalter wäre damit fertig!

Der Widget Sockel
In den HTML 'Schalter' baut ihr nun einen Sockel für die Widgets ein:
<input id='rad1' name='rad' type='checkbox'/>
 <label for='rad1'>
  <span class='titel'>About</span>
   <b:section class='tabs' id='tabs1' maxwidgets='1' showaddelement='yes'/>
 </label>
<input id='rad2' name='rad' type='checkbox'/>
 <label for='rad2'>
  <span class='titel'>Archiv</span>
   <b:section class='tabs' id='tabs2' maxwidgets='1' showaddelement='yes'/>
 </label>
<input id='rad3' name='rad' type='checkbox'/>
 <label for='rad3'>
  <span class='titel'>Follower</span>
   <b:section class='tabs' id='tabs3' maxwidgets='1' showaddelement='yes'/>
 </label>
Beachtet: Jede section hat eine eindeutige und fortlaufende id, die mit dem input Element und dem for Attribut übereinstimmen muss, sonst kann der Schalter das entsprechende Element nicht ansprechen. Für ein viertes Element müsstet ihr entsprechend die Zahl "4" vergeben, für ein fünftes "5" und so weiter ... keine Gehirnchirurgie:=).
Der Einbau
Ihr habt nun euer HTML komplett zusammen und müsst es in euren Test-Blog einbauen - dazu sucht ihr diese Stelle im HTML:
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
Direkt _darüber_ kopiert ihr nun euer HTML und speichert das ganze ab. Kommen merkwürdige Fehlermeldungen, dann habt ihr mit Sicherheit irgendwo eine Zuordnung vergessen oder eine Klammer falsch gesetzt - XML debuggen kann einem zur Verzweiflung bringen, aber da müsst ihr durch :=). Mit dem schwierigsten Teil seit ihr auf jeden Fall nun fertig!

B) Gadgets einbauen

Der nächste Schritt ist ein Kinderspiel: Ihr geht unter Dashboard > Design zu "Seitenelemente" und schaut euch euer Werk an. Ihr habt nun direkt unter den Header drei neue Elemente und ein altes Element, nämlich die Tab-Leiste für das Seiten Gadget. Diese Tab-Leiste ist die _unterste_ und die ignoriert ihr. In den drei oberen Elementen könnt ihr nun jeweils ein beliebiges Gadget einbauen - tut das. Das werden die Gadgets, die ihr später per Click öffnen und schließen werdet.

C) CSS

Kommen wir zum spannenden Teil, nämlich der CSS. Wenn ihr zwischenzeitlich mal einen Blick auf euren Blog werft, werdet ihr wohl ziemlich erschrecken, weil's nach dem totalen-Gadget-Chaos ausschaut. Darin wieder Ordnung zu bringen machen wir mit CSS.

Sämtlich folgende CSS kommt in den Vorlagen Designer > eigene CSS. Ihr könnt die CSS nach und nach oder in einem Block in den Editor packen. Falls ihr das nach und nach macht, könnt ihr die Änderung sehen, die eine bestimmte CSS auslöst, wenn ihr hinter der letzten geschweiften Klammer } der letzten Zeile die Taste "Eingabe" [Enter] drückt. Eine Änderung speichert ihr mit dem Schalter "auf Blog anwenden" rechts oben.

Funktionale CSS
Fangen wir mit dem wichtigsten an, nämlich der funktionalen CSS für den Schalter.
input { display: none }
.tabs-outer { overflow: visible }
label .tabs {
    display: block;
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
     z-index: -1;
     opacity: 0;
     -webkit-transition: all .6s;
        -moz-transition: all .6s;
         -ms-transition: all .6s;
          -o-transition: all .6s;
             transition: all .6s;
}
Im ersten Schritt blendet ihr die input Elemente aus, macht eine kleinen Reset für die Blogger Vorlage und versteckt den Layer, in dem eure Gadgets liegen. Beachtet, das ihr die Gadgets nicht mit display:block ausblendet, sondern mit Höhe/Breite/Durchsichtigkeit = 0 lediglich "versteckt" ... wir wollen das ganze ja später wieder "smooth" öffnen.

Als nächstes kommt SPANNUNG TROMMELWIRBEL der große Trick, wie ihr die Gadgets öffnet:

input:checked+label .tabs {
    z-index: 9;
    position: absolute;
    width: 876px;
    height: 600px;
    opacity: 1;
    margin-left: -20px;
    margin-top: -50px;
    background: rgba(173, 58, 43, .95);
    -webkit-transition: all .6s;
       -moz-transition: all .6s;
        -ms-transition: all .6s;
          -o-transition: all .6s;
               transition: all .6s;
}
Mit der Pseudoklasse :checked selektiert ihr das Element, das angewählt worden ist, d.h. das input Element - mit dem Kombinator + selektiert ihr den direkten Nachfolger auf der gleichen Ebene, also dem über das Attribut for zugeordneten Label ... okay, ist simpler als es sich anhört.

Mit diesem Selektor gebt ihr nun dem Layer, in dem eure Gadgets liegen, eine Höhe/Breite/Farbkraft. Ich habe in meiner Demo den Layer die Breite des Innenteils des Blogs plus 40 px gegeben, um ihn dann mit margin-left um 20 px nach rechts zu verschieben. Damit liegt der Layer genau über den Innenteil und 'überlappt' ihn auf beiden Seiten um 20px ... aber das könnt ihr natürlich machen wie ihr wollt. Mit margin-left und margin-top könnt ihr auf jeden Fall den Layer nach oben und unten verschieben. Ich habe ihm außerdem eine 5% transparenten Hintergrund über den Alphakanal der rgba Farbe gegeben ... aber das ist nur Spielerei.

Ihr könnt jetzt mit 'Auf Blog anwenden' die bisherige CSS speichern und euch euren Blog anschauen. Clickt auf die einzelnen Titel und die Gadgets sollten sich schön "smooth" öffnen und schließen.

Mission accomplished!

Layout CSS
Zum Abschluss gebe ich euch noch a bisserl CSS für's Layout, um euch die Orientierung für eure eigene CSS zu erleichtern. Das wichtigste vorneweg:
#layout label .tabs {
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 1;
}
Das bezieht sich auf die Dashboard Layout-Vorlage - ihr habt nämlich jetzt das Problem, dass eure Gadgets aus dem Dashboard 'verschwunden' sind; mit obiger CSS bekommt ihr sie 'zurück' ...


#rad1:checked+label .tabs { background: rgba(145, 171, 49, .9) }
#rad2:checked+label .tabs { background: rgba(184, 75, 28, .9) }
#rad3:checked+label .tabs { background: rgba(227, 212, 63, .9)}
Damit könnt ihr den Layer für ein einzelnes Gadget individuell gestalten - ich habe das jetzt nur mal mit Hintergundfarbe gemacht, könnte aber auch für die genaue Position (margin-left und margin-top) interessant sein.



.titel {
  cursor: pointer;
  font-size: 32px;
  padding: 6px 12px;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  border: 1px solid #D8D8D8;
 -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
  background: #fafafa;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #eaeaea));
  background: -webkit-linear-gradient(top , #fafafa 0%, #eaeaea 100%);
     background: -moz-linear-gradient(top , #fafafa 0%, #eaeaea 100%);
       background: -ms-linear-gradient(top , #fafafa 0%, #eaeaea 100%);
        background: -o-linear-gradient(top , #fafafa 0%, #eaeaea 100%);
           background: linear-gradient(top , #fafafa 0%, #eaeaea 100%);
}
label:nth-of-type(1) .titel:hover {
background: rgba(145, 171, 49, .5)
}
label:nth-of-type(2) .titel:hover {
background: rgba(184, 75, 28, .5)
}
label:nth-of-type(3) .titel:hover {
background: rgba(227, 212, 63, .5)
}
Das ist die CSS für die Tabs aus meiner Demo - vielleicht könnt ihr was damit anfangen. Wie ich oben gesagt habe, könntet aber auch Icons oder Hintergrundbilder dafür nehmen, ihr braucht keinen Text. Wenn daran wirklich mal Bedarf besteht und ihr nicht zurecht kommt, fragt in den Kommentaren nach.


#BlogArchive1, #Followers1, #HTML1  { padding: 10px 20px;  }
    #BlogArchive1 a { color: #111 }
    #BlogArchive1 a:hover { color: #333 }
#ArchiveList, #ArchiveList a, .widget .zippy, #HTML1  {
color: #111;
font-size: 22px;
}
#ArchiveList a:hover {background: none}
Last not least, damit die Gadgets nicht so flatschig auf den Layern draufhocken, habe ich ihnen noch a bisserl CSS gegeben. Das ist Geschmackssache, aber ich find's halt hässlich, wenn ein Element direkt ohne Rand am anderen Element dran klebt ...

Ausblick

Mit dieser Technik lassen sich avangadistische Layoutkonzepte umsetzen, die mit 'normalen' Blogger-Layouts nicht mehr viel gemein haben. Ein Blog-Layout muss nicht unbedingt aus Header, Sidebar rechts, Sidebar links und in der Mitte dem Textteil bestehen. Es muss natürlich Sinn machen, soll heißen, einen echten Mehrwert für den Besucher bringen ... aber vieles ist noch gar nicht ausprobiert worden, was in Blogger 'technisch' möglich wäre.

Kommentare

Jetzt seid ihr gefragt - was haltet ihr von der Idee, Gadgets per Click zu öffnen und schließen? Sinnvoll oder sinnlose Spielerei? Hinterlasst einen Kommentar!

Ihr versteht nur Bahnhof und nichts funktioniert :=(? Fragt nach, vielleicht kann ich es noch besser erklären.

Alles klappt und ihr habt damit ein revolutionbär neues Layout gebaut? Lasst die Welt daran teilhaben und schreibt einen Kommentar ...

Kommentare:

  1. Mit dem Internet Explorer (selbst in Version 9) funktioniert das Aufrufen der Widgets nicht (Demo-Seite). Damit ist die an sich coole Idee leider unbrauchbar.

    AntwortenLöschen
  2. Danke für die Rückmeldung - das war lediglich ein Problem mit dem httpequiv -Header, jetzt sollte die Demo < IE8 funktionieren.

    AntwortenLöschen
  3. Mit dem IE8 geht's leider immer noch nicht, schade, aber für Windows XP gibt's keinen neueren IE mehr.

    AntwortenLöschen
  4. Okay, ich sehe das Problem, ich liefer für den IE8 noch ein Script nach und mache ein Update vom Post.

    Blogger unterstützt übrigens nur noch die letzten zwei Versionen vom jeweiligen Browser, im Oktober ist der IE8 auf Blogger also Geschichte. Ich finde das eine gute Entscheidung, niemand zwingt einem XP Benutzer dazu, ein so uraltes Teil zu verwenden - es gibt genug aktuelle und funktionierende Browser für XP ... es gibt Chrome Frame, für denjenigen der das look & feel vom IE nicht aufgeben will ... und so weiter.

    Der Punkt ist: Wer den IE8 benützt tut das nicht mangels Alternative, sondern mangels Eigeninitiative ... warum sollte ich das Problem vom Besucher, einen funktionierenden Browser auf seinen Rechner zu bekommen, zu meinem Problem machen? Wenn der Besucher das so will, dann stehen ihm halt auf meiner Seite nur eingeschränkte Möglichkeiten zur Verfügung. So zumindest würde ich das in meinem privaten Bereich handhaben - andere können das natrlich anders sehen, just my 2 cent :=).

    AntwortenLöschen
  5. Ich hätte die Frage, ob du mir den HTML-Code für das Lesergadget verraten willst?
    Gutes Tutorial, aber ungeeignet für mich .. auf jeden Fall schon mal ein Kompliment, Hut ab und Danke sehr!

    AntwortenLöschen
  6. Hey - inside an unicorn -

    ich habe für die Demo das ganz normale Blogger-Followers - Gadget genommen. Im HTML schaut das Widget so aus:

    <b:widget id='Followers1' locked='false' title='Follower' type='Followers'/>

    Ich vermut mal, du willst das Gadget auf deiner Unterseite anzeigen lassen? Da bringt dir das erst mal nicht viel ...

    Das geht, aber nur mit Konditionalen Tags - d.h. du schreibst eine Anweisung, dass das Follower-Gadget nirgendwo angezeigt wird, außer eben auf dieser einen Seite.

    Ich habe das Archiv-Gadget beschrieben, funktioniert aber auch für jedes andere Gadget.

    Die id vom Follower Gadget ist übrigens #Followers1.

    Gruß Oliver

    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.