{Tutorial} Seitentext in Blog-Posts und Gadgets formatieren und anpassen

Hallo ihr! :)

Hier seht ihr ganz normalen Seitentext.

Hier seht ihr formatierten Seitentext.

Man kann mit der Menüfläche des Posts ja schon viel anfangen, aber es gibt trotzdem Sachen die man dadurch nicht machen kann. Zum Beispiel fehlt das man viele Schriftarten einstellen kann oder der allseits beliebte Textschatten.

In diesem Post erkläre ich euch wie ihr euren Text formatieren könnt wenn ihr wollt und wie ihr das macht. Bitte beachtet das ihr nicht euren ganzen Seitentext formatieren solltet. Nur wenn ihr besondere Sachen, wie Überschriften in Posts formatieren wollt um Übersicht zu schaffen.

Dafür müsst ihe viel im HTML eures Posts arbeiten. Wenn ihr ins HTML wollt, achtet einfach hierdrauf:

{Tutorial} Google-Schriften für Post-Titel, Gadget-Titel und das Post-Datum benutzen!

Hallo ihr Lieben!
Im letzten Tutorial habe ich euch schon erklärt wie ihr Google-Fonts bei euch im Blog installieren könnt. Das installieren bringt euch aber nicht viel, wenn ihr die Schriftarten nicht benutzen könnt. Deshalb erkläre ich euch jetzt wie ihr die Schriftarten bei euch auf dem Blog bei den Post-Titeln, Gadget-Titel usw anwenden könnt.

Ich hoffe ihr wisst noch welche Schriftarten ihr installiert habt? Ja? Dann ist gut. Sonst sucht einfach nochmal in eurem HTML nach </head> und guckt dort nach. Wenn dort zB
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'/>

So, bereit? Es geht los, und ist suuuper einfach! :)

{Tutorial} Google-Fonts in den Blog einfügen - Alte Version

-> ÜBERARBEITETES TUTORIAL <-

Dieses Tutorial ist veraltet, bitte nutzt das Neue, das oben verlinkt ist!

Letztens habe ich euch erklärt wie ihr die Schrift-Art im Posttitel ändern könnt. Leider ist man was Blogger-Schriftarten sehr eingeschränkt, und es gibt auch nicht so viele Schriftarten die man benutzen könnte. 

Allerdings gibt es eine andere Möglichkeit: Ihr könnt Schriftarten von Blogger benutzen. In diesem Tutorial hier erkläre ich euch wie ihr die Google Fonts in euren Blog einfügt. Wie wir sie später verwenden können erkläre ich in einem anderen Tutorial!

Zu allererst müsst ihr in euer CSS. Geht dazu also erst auf Vorlage und dann auf HTML bearbeiten. Dort öffnet ihr dann mit STRG + F die Suchmaschine, und sucht nach:

 </head>

Als nächstes müsst ihr HIER klicken. Euch wird nun eine sehr lange Liste an Schriftarten aufgelistet die ihr benutzen könnt. Wenn ihr eine gefunden habt, die ihr schön findet, und gerne als Post-Titel-, Gadget-Titel- oder als Text-Schrift im Post benutzen wollt (Im Grunde könnt ihr die Schrift dann überall benutzen), klickt hier:

Dann werdet ihr weitergeleitet. Wenn ihr auf der anderen Seite der Schrift seid, scrollt etwas runter, bis ihr folgenden Abschnitt gefunden habt:

markiert und kopiert den kompletten Code via rechtsklick und "kopieren" nun.

 Als nächstes geht ihr wieder auf das andere Fenster in eurem Browser, in dem ihr das HTML offen und den Code gesucht habt. Nun müsst ihr den Code der Schriftart über

</head>

einfügen, sodass es am Ende so aussieht:

Bei dem Code von der Schriftart, also dem Code, den ihr grade über </head> eingefügt habt, habt ihr ja diesen Schnipsel:

<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>

Und hier müsst ihr nun bei dem Schrift-Code ein / hinmachen, sodass der Schriftarten-Code am Ende so aussieht, sonst funktioniert es nicht!:

<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'/>

Und das wars eigentlich schon. Das könnt ihr jetzt so oft mit jeder Schriftart die ihr gerne später benutzen würdet machen.

Wie ihr die Schriftarten am Ende auch benutzt zeige ich euch im nächsten Tutorial! :)

{Tutorial} Ein Favicon hochladen

Hallo ihr Lieben! heute zeige ich euch, wie ihr das Favicon eures Blogs ändern könnt!

Favicons sind übrigens die kleinen Bilder, die im Tab eines Seite oben neben dem Post-Titel steht.

Zu aller erst braucht ihr ein Bild, das hier hochladen könnt. Dieses muss ein Viereck sein. Ich empfehle ja immer, die Bild-Größe 150x150 zu nehmen. Falls euer Bild viel größer ist, könnt ihr es zb mit Photoscape verkleinern.

Was ihr als Bild später nehmt ist euch überlassen, auch, ob das Bild transparent ist oder einen Hintergrund hat. Achtet aber darauf dass das Bild nicht zu viele kleine Details hat! Es ist später stark verkleinert, und es wird nicht schön aussehen wenn da ein Pixel-Klotz ist. Daher: Weniger ist mehr. Und umso einfacher das Bild gehalten ist, umso besser!

{Tutorial} Schrift des Post-Titels mit dem Vorlagendesigner ändern

Heute zeige ich euch eine sehr einfache Version die Schriftart eures Post-Titels zu ändern.

{Tutorial} Footerlinks unter Posttitel (Kommentare, Label, usw...)

Ihr kennt es ja so wie es normal aussieht:

Öde und langweilig. Wenn ihr eure Footerlinks wie oben auf dem Bild unter dem Post-Titel haben möchtest, macht einfach folgende Schritte:

{Skala} #15 - Greenly Flower

HIER DOWNLOADEN

WIE DOWNLOADE & ENTPACKE ICH EINE SKALA?

{Skala} #14 - Flower Heart

HIER DOWNLOADEN

WIE DOWNLOADE & ENTPACKE ICH EINE SKALA?

{Skala} #13 - Red Heart

HIER DOWNLOADEN

WIE DOWNLOADE & ENTPACKE ICH EINE SKALA?

{Header} Watercolor-Banner

 Vor wenigen Wochen habe ich diesen Post schon auf meinem Bücherblog veröffentlich, und veröffentliche ihn hier nochmal der Übersicht willen, und falls ihn jemand auf dem Bücherblog nicht mitbekommen hat :)

(Einfach auf Layout -> Header -> Das Bild hochladen und während es läd auf "Auf xxpx Breite anpassen" gehen, da die Banner unten sehr groß sind und es so auf euren Blog angepasst wird -> Dann auf "Anstelle von Text und Beschrebung" und speichern! :) Wenn ihr den Header mittig haben wollt klickt hier)

Würde mich freuen wenn ihr mir ein Kommentar schreibt, das ihr einen davon benutzt. Muss aber nicht!

{Tutorial} Post-Footer entfernen

Der Post-Footer ist dieses Ding da bei euren Posts:

Und ja, meistens ist der nicht so schön. Nun ein ganz einfaches Tutorial wie ihr den entfernen könnt.

Geht auf Vorlage -> Anpassen -> Erweitert -> CSS hinzufügen und fügt folgendes ein: