09 November 2013

Tutorial: Zitate individualisieren

Hallo Leute,
ich persönlich finde es ja schade, dass bei den Standadlayouts von Blogger die Zitate so unspektakulär und langweilig aussehen. Also nur leicht eingeschoben sind und sonst nichts. Mit diesem kleinen Trick, den ich euch zeige, könnt ihr vielleicht keine Wunder bewirken, aber die Zitate wenigstens ein klein wenig hervorheben.

Geht auf Vorlage > HTML bearbeiten > klickt einmal mit der Maus auf das HTML-Feld > drückt Strg. und F gleichzeitig > gib in das Suchfeld .post ein.

Der gesuchte Bereich sollte nun so aussehen:

.post {
  margin: 0 0 $(post.margin.bottom) 0;
}

Fügt nun unter die } Klammer folgenden Befehl ein:

.post blockquote {
background:  #000000;
border-left: 2px dotted #000000;
padding: 5px;
font-family: Trebuchet MS;
font-size: 12px;
color: #000000
}

Hier könnt ihr euch eine Farbe für den Hintergrund aussuchen. Eine Seite, wo ihr die Farbcodes finden könnt, habe ich HIER für euch. 

Hier könnt ihr aussuchen, wie breit eure Linie sein soll. Je kleiner die Zahl, desto feiner die Linie. Je höher die Zahl, desto breiter die Linie.

Hier könnt ihr dotted eingeben für eine gepunktete Linie, dashed für eine gestrichelte und solid für eine durchgezogene Linie.

Hier könnt ihr eine Farbe für die Linie aussuchen und einfügen.

Hier gebt ihr die Schriftart ein, die ihr für eure Zitate haben wollt. Beachtet, dass die Schrift eingespeichert sein muss, wenn ihr eine individuelle Schriftart und keine vorgespeicherte Blogger-Schriftart nutzen wollt. Dazu könnt ihr euch mein LETZTES TUTORIAL ansehen.

Hier könnt ihr die Schriftgröße variieren. Am besten nehmt ihr die gleiche Schriftgröße wie für euren gesamten Text.

Hier könnt ihr die Schriftfarbe nochmal ändern.

Nach der Zeile border-left könnt ihr auch die Befehle border-right: 2px dotted #000000, border-bottom: 2px dotted #000000 und border-top 2px dotted #00000 einfügen, dann erscheinen auch rechts, unter- und oberhalb des Zitatekastens Linien.

Dann noch auf Vorschau klicken, abspeichern und dann sollten eure Zitate sich wenigstens ein bisschen vom Rest eurer Texte abheben.

Ich hoffe, das Tutorial war verständlich und konnte helfen!

xoxo KQ


2 Kommentare:

  1. Tolles Tutorial :)
    Leider funktioniert das bei mir nicht da ich zwar viele Ergebnisse habe wenn ich nach ".post" suche aber leider stimmt keines mit einem überein. Wenn ich dann noch eine Klammer ins Suchfeld gebe kommt gar nichts :/
    Kann es sein das es irgendeine neue Version oder so ist, das ist schon das 3 Tutorial das ich sehe und immer muss man das mit .post machen aber das funktioniert leider nicht :(

    Ganz liebe Grüße,
    Jasi ♥

    AntwortenLöschen
    Antworten
    1. Hallo Jasi,
      vielleicht suchst du einfach nur nach "blockquote". Wenn du noch nicht an der richtigen Stelle angelangt bist, musst du immer wieder auf Enter drücken, dann wechselt die Position von einem blockquote zum nächsten. Sollte eigentlich auch bei ".post" funktionieren.
      Vielleicht hilft das ja?
      Liebe Grüße, KQ

      Löschen