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


29 April 2013

Tutorial: Eigene Schrift in den Blog einbinden

Hallo,
ihr denkt euch sicherlich auch ab und zu, dass Blogger einfach viel zu wenige Schriftarten zur Verfügung stellt, mit der man seinen Blog verschönern kann. Und alle Blogs sehen dann immerzu gleich aus. Dann gibt es oft das Problem, dass man es zwar schafft, eine eigene Schrift einzubinden, die wird dann aber nur vom eigenen PC angezeigt und alle anderen sehen an ihren PC dann eine Ersatzschrift wie Times New Roman oder Arial, was ja nicht Sinn und Zweck der Sache ist.

Wichtig ist, dass man Schriften benutzt, die für das Web freigegeben sind und somit von allen Computern gelesen werden können. Solche Schriften nennt man Webfonts und von denen gibt es mittlerweile eine gute Menge.

Meine persönliche Lieblingsseite für Schriftarten ist GOOGLE FONTS. Mein Tutorial basiert auch auf dieser Seite. Ich finde diese Seite sehr gut, da es dort schon 624 Schriftarten gibt und man verschiedene Beispiele hat, mit denen man sich die Schriften anschauen kann. Es gibt sogar die Möglichkeit, einen eigenen Beispielsatz zu schreiben.

1. Wenn ihr euch auf der Seite eine schöne Schrift ausgesucht habt, klickt dann auf die Schaltfläche --->Quick-use. 

Tutorial: Unterstrich bei Links entfernen

Hallo,
nach einiger Zeit gibt es wieder ein Tutorial für euch, was ich vor Kurzem auch auf meinem HAUPTBLOG verwendet habe. Ich finde es nämlich nicht schön, wenn Links unterstrichen werden, wenn man mit der Maus über sie fährt. Mich stört das einfach. Falls ihr das auch nicht mehr wollt, habe ich einen ganz einfachen Tipp für euch, wie ihr den Unterstrich entfernen könnt.

Geht auf Vorlage > HTML bearbeiten > drückt Strg+F 

Wenn ihr Strg+F gedrückt habt, gebt folgenden Befehl ein:

  text-decoration

Nun solltet ihr drei Beispiele finden, die so aussehen:

a:link {
  text-decoration: none;
  color: $(link.color);
}

a:visited {
  text-decoration: none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration: underline;
  color: $(link.hover.color);
}

Hier gebt ihr nun ebenfalls "none" ein, abspeichern und dann solltet ihr keine Unterstriche mehr haben, wenn ihr mit der Maus über einen Link fahrt. Ganz einfach ;) Ihr könnt das natürlich noch ein wenig umwandeln, indem ihr hier zum Beispiel "underline" statt "none" einfügt, sodass eure Links immer unterstrichen sind, falls ihr mögt.

05 April 2013

Tutorial: Post-Divider einfügen

Hallo,

manche Blogdesigns, wie dieses hier, haben ein kleines Problem: Posts, die am gleichen Tag veröffentlicht werden, gehen nahtlos ineinander über und weisen keine Trennung auf. Dafür gibt es sogenannte Post-Divider, die eine klare Trennung zwischen den verschiedenen Posts darstellen.

Auf COPYPASTELOVE habe ich ein Tutorial dafür gefunden, auf meinem Blog hat es allerdings nicht funktioniert, weswegen ich daran ein wenig rumgebastelt habe. Und rausgekommen ist dabei das:

1. Entwerft einen Divider nach eurem Geschmack mit dem Bildbearbeitungsprogramm nach eurem Geschmack. Ladet danach das Bild irgendwo hoch (am besten Picasa).

2. Geht auf Vorlage > HTML bearbeiten > Widget-Vorlagen komplett anzeigen.

3. Drückt die Tasten Strg. und F gleichzeitig und gebt im Suchfeld .post-footer ein. Das ist sehr wichtig, da bei CopyPasteLove nur .post angegeben wurde und diese Bezeichnung bei einigen Blogs in dieser Form nicht existiert.

4. Der wichtige Bereich sollte nun so aussehen:
.post-footer {
  margin: 0em 0 0;
}
In eurem "margin"-Bereich könnten andere Werte stehen, aber das ist nicht so wichtig.

5. Nun kopiert folgenden Befehl direkt unter den "margin"-Bereich über diese "}" Klammer:
background:url(http://URL von eurem Post-Divider.png oder .jpg);
background-repeat: no-repeat;
background-position: bottom left;
padding-bottom:5.5em; 
Hier gebt ihr die URL von eurem Divider ein.

Dort könnt ihr auch center oder right eingeben, je nachdem wie genau euer Divider positioniert sein soll. Bei mir ist der Divider merkwürdigerweise zentrierter, wenn ich left eingebe und nicht center.

sodass es am Ende so aussieht:
.post-footer {
  margin: 0em 0 0;
background:url(http://URL von eurem Post-Divider.png oder .jpg);
background-repeat: no-repeat;
background-position: bottom left;
padding-bottom:5.5em;
6. Dann natürlich erstmal auf "Vorschau" klicken und wenn ihr zufrieden seid, dann auf "Vorlage speichern".

Ich hoffe, dass euch das Tutorial ein wenig hilft und verständlich ist.



Tutorial: Rahmen und Schatten von Bildern endgültig entfernen

Hallo,

viele Blogger stört es, dass bei vielen Standard-Layouts die hochgeladenen Bilder einen Rahmen und/oder einen Schatten haben. Dies lässt sich bei den Grundeinstellungen meist nicht ändern und sonst nur auf sehr komplizierte Weise manuell.

Wenn ihr aber auf Vorlage > Anpassen > Erweitert > CSS hinzufügen geht, reicht ein einfacher Befehl, den ihr dort eingebt:

.post-body img, .post-body .tr-caption-container, .Profile img,
.Image img, .BlogList .item-thumbnail img {
   border: 0;
     -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
       -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
         box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
   background: transparent !important;
}
Dann nur noch auf Enter drücken und schon sollten alle Rahmen und Schatten von euren Fotos Vergangenheit sein! 

Tutorial: Post-Titel und Datum zentrieren

Hallo!

Wie kann ich einen Post-Titel oder das Datum zentrieren? Das ist ganz einfach.


  1. Geh auf Vorlage > Anpassen > Erweitert > CSS hinzufügen
  2. Dort gibst du dann diesen Befehl ein und aktivierst ihn mit der Eingabetaste:
h2.date-header, h3.post-title { 
       text-align: center; 
}
Schon in der Vorschau kannst du erkennen, dass der kleine Trick geklappt hat. Jetzt nur noch "Auf Blogger anwenden" klicken und schon bist du fertig ;) 

04 April 2013

Test für Bilder, Überschriften und Links

Überschrift


Zwischenüberschrift


Untergeordnete Überschrift


Normal


KLICK HIER Das ist ein LINK


02 April 2013

Tutorial: Eigenen, individuellen Weiterlesen Button einfügen

Hallo,

mein erstes Tutorial zeigt euch, wie man den Weiterlesen-Button, der bei einem JumpBreak erscheint, individuell verändert werden kann und damit nicht so langweilig aussieht. Das ist auch gar nicht so schwierig.

1. Entwerft einen Weiterlesen Button als .png oder .jpg Datei (sprich: ein ganz normales Bild, wie man es bei Paint oder PICMONKEY erstellt) wie es euch gefällt und ladet den Button bei Picasa hoch.

2. Geht auf Vorlage > HTML bearbeiten.

3. Macht bei "Widget-Vorlagen komplett anzeigen" einen Haken.

4. Speichert zur Sicherheit euer Design nochmal ab oder probiert es erst bei einem Testblog aus.

5. Drückt die Tasten Strg + F um das Suchfeld aufzurufen und gebt dort das Wort JumpLink ein. Das sollte dann so aussehen: