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.

Zitatboxen individuell gestalten

Öfters sieht man mal auf Blogs Zitatboxen. Was das ist, eine Zitatbox? Hier ein paar Beispiele:








Die Zitatbox benutzen geht ganz einfach, indem man beim Blogpost schreiben auf das folgende Symbol klickt.



Nun ist es so, dass die von Blogger vorgegebene Zitatbox ohne jegliche "Ausschmückungen" festgelegt ist. 
Um eine Zitatbox, so ähnlich wie die oben gezeigten oder eine ganz individuelle zu haben, müsst ihr in den HTML-Text eures Blogs gehen (Design // Vorlage -> HTML bearbeiten).

Dort sucht ihr nun nach
.post {
und fügt nach der } Klammer folgendes ein:
.post blockquote {
background:  #FARBE;
border-left: 3px solid #FARBE;
border-right: 3px solid #FARBE;
padding: 5px;
font-family: Verdana;
font-size: 11.5px;
color: #FARBE
}
Diese Angaben könnt ihr nun nach eurem Belieben verändern oder auch weglassen.
.post blockquote { Eröffnung des CSS-Codes der für die Zitatbox zuständig ist

background:  #FARBE; Hintergrundfarbe     
                                         
border-left: 3px solid #FARBE;  Linker Rand
                                
border-right: 3px solid #FARBE;   Rechter Rand
                             
padding: 5px;   Abstand zwischen Box und Text    
                                                        
font-family: Verdana;   Schriftart      
                                          
font-size: 11.5px;  
Schriftgröße 
                                                     
color: #FARBE;  
Schriftfarbe
                                                        
} Klammer die den Code schließt                                                                              

mehr zu Rändern kannst du im Tutorial "Untersreichen mit HTML//CSS" nachlesen (click!)
Links die Helfen können:
Verschiedenste Schriftformatierungen (SELFHTML)
Farbcodes

Fragen ect.


Kommentare:

  1. Hey. :)
    Nein, das sit gar kein Problem. Freut mich sogar. :D :)
    & Danke! :)
    liebste Grüße Kathi <3

    AntwortenLöschen
  2. Beim mir geht das nicht :o öhm was soll ich beim ".post blockquote { "

    AntwortenLöschen
  3. oh Danke, ich hätte vielleicht besser hinsehen sollen.. peinlich :D

    AntwortenLöschen
  4. Wo genau soll ich den Code denn einfügen? Bei mir kommen nämlich sage und schreibe 13 Ergebnisse, wenn ich ".post" suche (wenn die geschweifte Klammer dabei ist, finde ich gar nix...) ?

    meine Phantasiewelt

    AntwortenLöschen
    Antworten
    1. Bei meiner neuen Vorlage musste ich folgenden Code über Comments einfügen

      .post blockquote {
      margin:1em 5px;
      background: #eee;
      border: 1px solid #bbb;
      padding: 5px;
      font-family: Verdana;
      font-size: 10px;
      color:#999;
      -webkit-border-radius: 6pt;
      -moz-border-radius: 6pt;
      }
      .post blockquote p {
      margin:.75em 0;
      }

      Dann hat alles super geklappt :)

      Löschen
    2. bei mir hat's auch nur auf diese Art geklappt :)

      Löschen
  5. der tutorial funktioniert bei mir nicht - könnt ihr helfen ? :)

    AntwortenLöschen
  6. Besonders toll finde ich es wenn man als Hintergrund ein schlichtes Bild nimmt :) Da muss man statt der Farbe nur background: url(linkzumbild); einfügen.

    AntwortenLöschen
  7. Ich habe bei .post mehrere Ergebnisse aber leider ist keines davon ".post {" und das mit ".post blockquote {" funktioniert auch nicht :/
    Kann es sein das es bei der neuen Vorlage nicht mehr funktioniert?

    Viele liebe Grüße,
    Jasi ♥

    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.