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.

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 ;) 

Test für Bilder, Überschriften und Links

Überschrift

Zwischenüberschrift

Untergeordnete Überschrift

Normal


KLICK HIER Das ist ein LINK

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: