Ausklappbares Kästchen mit Show-Button [Tutorial]

5. Juni 2013 | 48 Kommentare

ACHTUNG! Dieser Code ist eventuell fehlerhaft. Bitte höchstens erst an einem Testblog ausprobieren und erst dann verwenden!

Hey Leute,
Ich hab schon seit einer Weile sehr wenig Zeit um mich um meinen Blog zu kümmern (noch eineinhalb Wochen Schule und die Lehrer müssen einem noch die letzten Test reindrücken - kennt das ja) und deshalb kriegt ihr heute ein kleines aber wirklich feines Tutorial!

Ausklappbares Kästchen "Show"
Das ist doch toll, oder? Falls ihr die farbige Leiste nicht mögt, ich stelle dann später auch die Variante mit der normalen Schriftart zur Verfügung.

ACHTUNG SPOILER!
Meine Damen und Herren, ein Kästchen ins Kästchen setzen ist natürlich auch möglich ;)
Ich sehe in diesen Dingern eine tolle Möglichkeit, Spoiler in einer Rezension zu kennzeichnen. Ich versuche meine immer so spoilerfrei wie möglich zu halten, aber sollte es mal echt nicht anders gehen, werde ich definitiv diese Kästchen verwenden :)

Klappentext zu "Die Raupe Nimmersatt"
Das macht so Spaß, einfach weil man's kann!
Klappentexte könnte man dadurch doch auch platzsparender gestalten, oder? Ein kleiner Nachteil ist jedoch, wenn man mehrere von den Kästchen auf einmal verwendet, behalten sie alle die selbe Farbe, Schriftgröße etc. - aber ich hab euch ja eh gesagt, dass ihr sparsam damit sein sollt :P

Yeahey, dieses supergeniale Klappdings *verschwörerisch zublinzel* ist gar nicht weit verbreitet. Einzeln eingesetzt sieht das wirklich gut aus, ihr seht ja dass 3 auf einmal sehr chaotisch wirken - also bitte auf die Dosis achten ^^ Ein ein paar haben es in meinem letzten Post schon bemerkt und weil es doch einige Interessenten gab, sehe ich keinen Grund, dieses Wissen nicht auch mit euch zu teilen.

<div style="margin: 10px;"><div class="smallfont" style="margin-bottom: 2px;"><h5>DEINE ÜBERSCHRIFT</h5><style>h5 {text-align: center;margin:0.1em 0.1em;font:normal normal 85% Verdana, sans-serif;line-height: 1.10em;text-transform:none;letter-spacing:.1em;color:#fff;background-color: #B0D5FF;}</style>
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';      this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 45px;" type="button" value="Show" /></div><div class="alt2" style="border: 0px inset; margin: 0px; padding: 6px;"><div style="display: none;">HIER KOMMT DER TEXT REIN DER NACH DEM SHOW ERSCHEINEN SOLL<br /><br />
</div></div></div>

margin: 10px; bestimmt, wie weit die Leiste vom Postrand entfernt sein soll
85% ist die Größe der Schrift
line-height: 1.10em; damit könnt ihr bestimmen, wie Hoch das "Farbige" sein soll; 1.50em; wäre zB etwas breiter
color:#fff; ist die Schriftfarbe; #fff = weiß, #000 = schwarz
background-color: #B0D5FF; ist die Hintergrundfarbe der Leiste, hier bekommt ihr den Code für jede erdenkliche Farbe; WICHTIG: vergesst ja nicht das # und das ;!
font-size: 11px; Schriftgröße im Show-Button 
margin: 0px; ist nur wichtig bei der Variante ohne der Leiste, dazu unten mehr; bestimmt wie weit der Button von der Überschrift entfernt sein soll
width: 45px; die Größe des Buttons; müsst ihr ändern, wenn ihr etwas anderes als 'Show' wollt
"Show" statt Show könnt ihr auch Lies mich etc reinschreiben

Wollt ihr keine farbige Leiste, wie ich es in den Beispielen oben angewandt habe, löscht ihr <h5>, </h5> und alles von <style> bis </style>. Ihr könnt die Überschrift danach im Verfassen-Modus ganz gewöhnlich herrichten, wie ihr wollt. 
Mir persönlich gefällt die Variante mit der Leiste zwar ein bisschen besser, es kommt allerdings auf die Verwendung an. Die Leiste hat jedoch auch einen Nachteil: benutzt ihr den Code zB mal mit der Farbe Rot, und ihr wollt den Code ein paar Wochen später in einem anderen Post mit der Farbe Gelb könnt ihr noch so viel herumgelben wie ihr wollt, sie wird rot bleiben. Also: pro Blog nur ein Leistenstyle, schade! Deswegen kann ich euch die Variante ohne Leiste mehr empfehlen, muss aber jeder für sich selbst entscheiden.
Dafür gibt es bestimmt eine mehr oder weniger komplizierte Lösung aber ich benutze den Code nicht oft genug, um danach zu suchen. 

Copyright, Urheberrecht, blablablub liegen nicht bei mir, solche Sachen darf jeder nutzen, der will. Falls ich euch helfen konnte, freut mich das. Falls es noch Fragen gibt, versuche ich mein Bestes, sie euch in den Kommentaren zu beantworten. :)

48 Kommentare

  1. Oh ja, da freue ich mich drauf, dass mal auszuprobieren! :) Viel Dank, für das Tutorial! :) Ich finde du hast das sogar ziemlich gut erklärt (ich hasse es, wenn es schlecht erklärt ist, weil ich es dann nicht hinbekomme.. Manchmal bin ich sogar für die einfachsten Sachen zu dumm :D)!

    Alles Liebe
    Nicole :)

    AntwortenLöschen
    Antworten
    1. Achso, das mit den Arbeiten kenne ich natürlich auch.. -.- Man muss ja UNBEDINGT sogar noch an dem Tag schreiben, ab dem dann nichts mehr geschrieben werden darf. Manche Lehrer sind exht zu allem fähig und ich könnte die manchmal echt... GR! Am liebsten würde ich unseren Mathelehrer mal so "zufällig" irgendwo runterschubsen.. Der ist echt schlimm, der hat unsere Arbeiten schon seit zwei Wochen und hat noch nicht mal angefangen zu korrigieren, weil er ja unbedingt bei den schriftlichen Abiturprüfungen aufpassen musste und die restlichen 18 Stunden am tag hat er ja natürlich keine Zeit (wie sollte es auch anders sein?). -.- Bei sowas könnte ich echt ausrasten! :D
      Dir wünsche ich aber natürlich noch viel Erfolg bei deinen anstehenden Arbeiten und danach schönes Erholen! :)

      Löschen
    2. Ich hoffe, du kannst es umsetzen - ich hab den Code mehrmals kontrolliert und so schwer ist es wirklich nicht :)
      So gehts mir auch. In letzter Zeit bin ich auf etwas anspruchsvollere Tutorials umgestiegen und brüte schon seit Tagen über einem neuen Suchfeld. Nur will das mit der ID nicht richtig hinhauen - ich krieg dich noch Suchfeld, ich krieg dich noch!

      Ja, das find ich auch total blöd. Naja, heute hatte ich eine, Freitag und Dienstag hab ich eine und noch zwei kleine Arbeiten. Dann nur noch chillen. ICH FREU MICH SCHON.
      Danke, ich dir auch!

      Alles Liebe,
      Sandra

      Löschen
    3. Jap, ich denke schon, dass ich das hinbekomme, nachdem ich jetzt einige Tutorials nachgemacht habe, muss ich das ja hinkriegen, ich habe schon schwerere Sachen gemacht.. :) Das mit dem Suchfeld, da gibt's doch ein Gadget oder? Und ID, kein Plan was das ist :DD

      Wir schreiben diese Woche noch zwei Vokabeltests (einen in Englisch und einen in Franz) und dann noch eine Deutscharbeit, aber dann bin ich auch endlich fertig! :) Ich freue mich schon mega.^^

      Übrigens hab ich dich getaggt und würde mich freuen, wenn du mitmachst! :) http://www.dasbuchgelaber.blogspot.de/2013/06/tag-11-fragen.html

      Löschen
  2. Suuuper, vielen Dank!!! Bisher habe ich Spoiler-Meldungen immer mit Schrift und Balken in gleicher Farbe darüber gemacht, aber das hier ist natürlich viiiel eleganter :-)

    AntwortenLöschen
    Antworten
    1. Das war die Idee dahinter, freut mich dass sie dir gefällt! :)

      Löschen
  3. Danke - da hab ich wieder einmal bei dir was dazu gelernt :) Werde ich natürlich sobald wie möglich ausprobieren^^

    Liebe Grüße Tessa

    AntwortenLöschen
  4. Du weißt ja, dass ich des so super finde, und du erklärst einfach so toll! Dankö nochma für die Hilfe ;)
    Liebste Grüße,
    L E Y

    AntwortenLöschen
    Antworten
    1. Hähä, ja, du hattest den Code ja schon vorher verwendet ;) Danke, dass du meine Hilfe in Anspruch nimmst :D

      Löschen
  5. Meine Heldin *______* Muss ich bei Gelegenheit mal ausprobieren xD

    UND bezüglich Derek Landy und soooo, hast du gesehen, das der Loewe Verlag derzeit eine Aktion hat, wo man Band 7 SIGNIERT gewinnen kann, wenn man ein Youtube Video kommentiert? :D Ich meine, das Buch ist zwar auf Deutsch, aber SIGNIERT :D Vielleicht hast du ja Lust mitzumachen ;)

    AntwortenLöschen
    Antworten
    1. Hahaha :D

      Was, echt jetzt? *sabber* Das zu gewinnen ist zwar WUNSCHDENKEN aber es wär halt o .... OBERVERDAMMTNOCHMALTOTALGENIALDASSICHEINEZUSAMMENBRUCHKRIEGENWÜRDE!
      Ach, ich seh grad irgendwas von Brickfilm! Ich kann mich gar nicht mehr erinnern was in Rebellion der Restanten passiert ist, Schande über mich ...
      Danke Tanja!

      Löschen
  6. Hey :)

    Ich finde es ganz ganz toll von Bloggern, die sich mit HTML auskennen, anderen durch Tutorials Hilfe geben.
    Ich wollte meinen Blog auch endlich mal selber gestalten, aber ich hab da null Ahnung. -.-
    Deine anderen Tutorials sind genauso super und haben mir sehr geholfen. Ich werd mich jetzt mal selber hinsetzen und es versuchen. :D

    Ich würde mich aber noch ganz ganz sehr freuen, wenn du vielleicht noch erklären könntest, wie du die Striche gemacht hast, die zum einen deine Sidebar von den Post trennen und der Strich unter deinem Posttitel und wie du unterdrunter das mit den Komentaren und den Datum gemacht hast ;)

    Und wie das mit dem Weiterlesenlink funktioniert? Ich würde mich echt freuen, wenn du da vielleicht noch was machen könntest :D

    Vielen lieben Dank

    Ganz liebe Grüße

    Nicole

    PS: Danke das du mir in dem Post von Mai verraten hast, das das letzte Band von Cassandra Clare zu den restlichen Teilen passt - ich hatte ernsthaft überlegt die Bücher zu verkaufen ;)

    AntwortenLöschen
    Antworten
    1. Hey ;)

      Eigentlich finde ich dein Design schon ziemlich gelungen. (Auch wenn es vor ein paar Stunden noch anders ausgesehen hat :O) Aber ich bastel auch immer an meinem Blog herum, mir macht das Spaß! :)

      Puh :D
      Die Trennlinie zwischen Sidebar und Postbereich ist eine Seperatorlinie. Die war bei meiner Vorlage (Simple) gleich dabei und ich wüsste nicht, falls es dazu ein Tutorial gibt.
      Hier ist das Tut um den Posttitel zu unterstreichen: http://www.copypastelove.org/2011/05/posttitel-unterstreichen.html

      Dafür hab ich ewig gebraucht weil es nicht hinhauen wollte, das musst du unbedingt zuerst auf einem Testblog ausprobieren: http://sweedeedesign.blogspot.co.at/2013/02/tutorial-datum-und-kommentarlink-unter.html

      Mein Weiterlesendings ist ein eigenes Bild und hieeer ist ein Tut von einer Freundin: http://kaugummiqueen.blogspot.co.at/2013/04/tutorial-eigenen-individuellen.html

      Damit sollte alles beantwortet sein :)
      Ich kenne sogar einige, die ihre Bücher jetzt verkauft haben. Lies dir mal die Stellungnahme von Arena durch (http://www.arena-verlag.de/aktuelles/clockwork-princess-coverfragen), die designen jetzt extra noch einen Umschlag im alten Design, den man dann um Clockwork Princess machen kann. :D

      Alles Liebe,
      Sandra

      Löschen
  7. Danke, danke für das Tutorial. Wie zum Teufel hast du diesen Code gefunden? Ich habe im Internet SOVIELE Seiten durchsucht, und nichts annähernd Verständliches gefunden ._. Zwanzig mal ausprobiert, und es hat einfach nicht funktioniert xD

    Und ja, die Schule kotzt mich auch schon an. Und Mathe...ach du kacke, habe ich das versemmelt, ich könnte eine 5 bekommen ._. Das kommt davon, wenn ich in einer Woche drei Arbeiten habe - besser einplanen geht nicht, oder was? -.- Durchfallen werde ich zwar nicht, weil ich sonst nirgends eine 4 oder 5 habe, aber eine Klausel möcht ich nicht aufbrauchen o.o Tut mir leid, muss gerade meine Sorgen ausheulen, bin gerade so verzweifelt !! D: AAAArgh, ich sterbe, Hilfe! ...

    AntwortenLöschen
    Antworten
    1. Tutorial gibt es soweit ich weiß echt noch nicht dazu. Aber ich hab neulich das Seitenquelltextlesen für mich gefunden xD Hab so 'nen Kasten auf einem Blog gesehen, dann im Seitenquelltext mit strg + f nach dem Gesucht was vor dem Button stand und alles kopiert und angepasst. Ba dum tss. Ja ich weiß ich bin ein Genie. *ironie off*

      Ich schreib auch voll viele Tests grade. Bzw hab ich den Großteil scho hinter mir, aber Chemie war echt scheiße -.-
      Mein Bruder hat seine Klausel schon in der 6. oder 7. verbraucht und sitzt jetzt in der 8. und lernt für die Matura. Die er wahrscheinlich nicht schaffen wird, aber der ist echt noch nie sitzen geblieben. Das finde ich irgendwie faszinierend.
      Also mach dir keinen Kopf, und ich höre mir gern die Sorgen anderer an :D Ich jammer auch sehr gerne andere Leute voll, hähä.

      Alles Liebe,
      Sandra

      Löschen
  8. OMG *,* du hast mir sooo geholfen, ich hab letztens einen ganzen Nachmittag damit verbracht, dass zu suchen und es einfach nicht hingekriegt! mit diesem tutorial bist du soo meine heldin, da ich schon aufgegeben hatte, dass jemals hinzubekommen :DD
    Liebe Grüße
    Jueli

    AntwortenLöschen
  9. Kann man eigentlich den Leisten Style nicht irgendwie im CSS Code des Blogs einbinden, so dass er dann nur einmal eingefügt ist und dort eventuell dann abgeändert werden kann?

    AntwortenLöschen
    Antworten
    1. Ich weiß keinen konkreten Grund warum es nicht geht, aber es geht nicht. Ich habe auf meinem Testblog jetzt direkt im CSS-Teil des Quellcodes h6 und h7 definiert. h7 wird angezeigt, h6 jedoch nicht.
      Allerdings ist interessant, dass meine Leiste bevor man den Post anklickt (also wo man noch auf Weiterlesen klicken muss) genauso aussieht wie die Leisten im letzten Awardpost, wenn man dann aber Weiterlesen klickt sieht die Leiste so aus, wie ich das grundsätzlich haben hätte wollen. Vielleicht hilft dir das ja weiter, aber ich glaube eher nicht. ;)

      Löschen
    2. Doofe Frage, ich weiß, aber wieso h7, und h6, wo doch in Deinem Co oben h5 steht... Und könnte man es nicht mit einem neuen Format bennen? So dass es mit keinem kollidiert.. Hm... Ich glaub ich muss da auch mal probieren... Und dass wo ich null Ahnung habe...

      Löschen
    3. Hey, kann ich Dir irgendwie eine Mail schicken? Ich habe es irgendwie hinbekommen (zumindest sieht es schon ähnlich aus), kann es nur nicht hier poste, da es im Kommentar scheinbar nicht klappt, den Code zu posten :)

      Löschen
    4. Und es geht doch!!!!!!!! Ich habe es hinbekommen! Zwei Leisten, zwei Unterschiedliche Farben. Den Link zum Beweis habe ich Dir gemailt. :)

      Löschen
    5. Mist, nur der Button funzt nicht, aber die styles gehen..

      Löschen
    6. :D Ich freu,mich total, wenn ich mich mit jemandem über solche Sachen unterhalten kann. Deine Mails hab ich auch schon bekommen, ich antworte dir gleich :)

      Löschen
  10. Hallo :)
    Haha, das mit dem Kästchen ist ja lustig :D Muss ich dann irgendwann mal machen :D Ich blick da ja mit diesem ganzen HTML-Kram nicht so wirklich durch :D Da bin ich dann immer froh, wenn ich mal so leicht verständlichere Tutorials finde ^^
    Übrigens habe ich auch deinen Tag gemacht :)
    Ich finde es wahnsinn, wie du dir da solche Mühe gegeben hast :) Großen Respekt und dankeschön! :)
    http://books-and-art.blogspot.de/2013/06/tag-100-bucher-die-man-gelesen-haben.html
    Liebe Grüße
    Haykuhi

    AntwortenLöschen
    Antworten
    1. Ich hatte vor meinem Blog auch nix damit am Hut, aber auf kurz oder lang bin ich da nicht drumrumgekommen und jetzt macht es mir ziemlich Spaß. :)
      Danke! Und viele Dank, dass du mitgemacht hast! :)

      Alles Liebe,
      Sandra

      Löschen
  11. Sandy, du bist genial! Und Gedankenlesen kannst du auch noch! xD Ich habe nämlich vor, heute oder morgen einen Post mit Tags zu schreiben und weil das sehr viele sind, wollte ich dich da fragen, wie du das immer mit den Kästchen hinkriegst^^ Jetzt muss ich das wohl nicht mehr tun :p Und es ist ja nicht mal so schwer, da bekomm sogar ich hin :D Also ganz lieben Dank fürs Turtorial ;)

    Liebe Grüße,
    Filo

    AntwortenLöschen
    Antworten
    1. Hahaha, zum zweiten Mal heute, was :p Ja, ich finde es auch ziemlich praktisch und außerordentlich kompliziert ist es an sich auch nicht, da hast du recht.

      Löschen
  12. Huhu ,
    Eine tolle Erklärung :) Ich hoffe ich werde bald mal dazu kommen es auszuprobieren .. Ich würde mich freuen wenn du mal bei meinem selbst erfundenen TAG vorbei schauen würdest , würde mich sehr freuen wenn du mitmachen würdest da ich gespannt bin welche Bücher bei dir raus kommen ♥ http://jemasija8.blogspot.de/2013/06/verschlungene-bucher-tag.html#comment-form


    LG JENNY

    AntwortenLöschen
    Antworten
    1. Ich hab mich sehr darüber gefreut, besonders weil der TAG ja ganz neu war :) Danke :)

      Löschen
  13. cool, muss ich gleich mal ausprobieren :D

    AntwortenLöschen
  14. Deine Tutorials sind wirklich genial *_*
    Ich hab mich nämlich sofort gefragt, wie das hier geht, als ich es das erste Mal bei dir gesehen habe :D

    AntwortenLöschen
  15. Ich hab das ganze heute mal ausprobiert, ich bin begeistert! :) Vielen, vielen Dank für das tolle Tutorial. :)

    AntwortenLöschen
  16. Liebe Sandra PusteBlum!
    Deine Anleitung ist total super und echt einfach nachzumachen.
    Eine special-Frage habe ich aber: Wie kann ich in diese Show/Hide-Box einen Link setzen? Ich schreibe ja dann dirket im HTML-Eingabefeld den Inhalt darein und das klappt irgendwie nicht. Ich muss dazu sagen, dass ich auch ein absoluter Neuling auf diesem Gebiet bin. :)
    Alles Liebe!

    AntwortenLöschen
    Antworten
    1. Ah, es ist doch ganz einfach - auch mit dem Link innerhalb der Box.

      NAME der angezeigt werden soll

      Löschen
    2. Soweit ich dich jetzt verstanden habe, hat sich das eh schon geklärt :) Aber vielleicht wollen es ja noch andere Nutzer die die Kommentare lesen auch wissen, hier ein Beispiel:

      TEXT TEXT <a href="http://beispiel.com" target="_blank">VERLINKTER TEXT</a> TEXT TEXT

      Damit könntest du zB auch die Überschrift (also im Balken) mit einem Link versehen, auch wenn ich nicht weiß, warum man das tun sollte :) Mit dem target="_blank" öffnet sich der Link in einem neuen Fenster, falls du das nicht willst, den Teil einfach rauslöschen.

      Löschen
  17. Vielen Dank (;
    Hat mir sehr geholfen!
    Lg. Jasi

    AntwortenLöschen
  18. Hey,
    tolles Turtorial, du erklärst das immer super :)

    Aber irendwas hängt da bei mir. Es wird zwar alles angezeigt, aber wenn man auf den "Show" Button klickt wird es nicht geöffnet, hast du vielleicht eine Idee woran das liegen könnte? Hab auch mal probiert den Code unverändert einzufügen, da gings aber irgendwie auch nicht?!
    Hoffe du kannst mir helfen ^^

    Alles Liebe
    Lea <3

    AntwortenLöschen
  19. Hi :D Wollte nur mal bescheit(/d?) geben dass das Kästchen nicht mehr funktioniert. Bei mir mache ich alles richtig und erst steht auch der ganze Text drin und da speicher ich ab und wenn ich es nochmal eine Stunde später öffne steht da nichts mehr vom Code. Nix. Naaada. :/ Liegt aber wahrscheinlich an Blogspot.

    AntwortenLöschen
    Antworten
    1. Danke, dass du mir das sagst. Bei mir gehts zwar noch und auch als ich den Code auf meinem Testblog einbettet hab, hat alles geklappt, aber ich lass das mal ein paar Tage so und wart ab. Ich hatte nämlich auch schon einige Scherereien damit (auch wenn mir grad nicht detailreiche einfallen). Ich hab den Code jetzt auf jeden Fall als eventuell fehlerhaft gekennzeichnet!

      Löschen
  20. Spoilerklappen retten LESERLEBEN.

    In dem Fall also DANKE für das wieder einmal tolle Tutorial. :D Hat uns sehr weitergeholfen.

    Liebe Grüße
    ~ Jack T.R.

    AntwortenLöschen
    Antworten
    1. Das kann ich nur bestätigen!! Wurde erst gestern wieder zu Tode gespoilert -.- Ist das denn SO SCHWER, ein "Achtung Spoiler" vorher zu schreiben ...

      Löschen
    2. Die Spoiler-Klappe ist schwer, OBWOHL mans ja googlen kann und du das hier klasse erklärst. ^^ Aber ich weiß schon was du meinst...da könnte man am liebsten den Rezensenten das Buch an den Kopf...schlagen....*Und noch ein Dutzend anderer Dinge die ich hier aber Sicherheitshalber nicht nennen kann ^^*

      Löschen

Ich schätze es sehr, dass du dir die Mühe machst, mir dein Feedback zu hinterlassen! Der Blog wird nicht mehr weitergeführt, ich bin aber noch über die Kommentar-Funktion erreichbar.

© 2012 - 2016 Pusteblume? · Powered by Blogger · Datenschutz · Impressum