Blogging Tipps
Schritt 1)
Als erstes braucht ihr natürlich einen "Read more" Button, den könnt ihr euch via Gimp,PicMonkey oder Paint erstellen. Speichert euren Button entweder als .jpg oder .png Datei ein. Anschließend ladet den Button bei TinyPic oder Picasa hoch.
Schritt 2)
Geht auf Vorlage -> HTML bearbeiten.Wichtig : Speichert euch eine Vorlage eures Layouts zur Sicherheit ab! Was ich euch empfehlen kann : probiert es erst bei einem Testblog aus.
Schritt 3)
Drückt die Tasten Strg + F um das Suchfeld aufzurufen und gebt dort das Wort JumpLink ein, das sollte dann so aussehen :
so sieht dann der gesamte wichtige Bereich aus:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link' >
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Schritt 4)
Den Teil müsst ihr durch folgenden befehl ersetzen :
<img width="120px" height="32px" src="URL Weiterlesen-Button-Bild"/>
URL Weiterlesen-Button-Bild = Link zu eurem Read more Button
Hier könnt ihr die Größe des Read more Buttons selbst bestimmen. Schaut auf "Vorschau der Vorlage anzeigen" nach ob euch die Größe gefällt. Wichtig ist hier das das die angaben zu Breite und höhe die maßen eures Button beträgt,sonst wird die Grafik entweder Pixelig angezeigt oder unscharf angezeigt!
Beispiel : width="250px" height="150px
Schritt 5)
Jetzt nur noch auf "Vorlage speichern" klicken und schon dürftet ihr euren eigenen Read more Button haben! Wichtig : um den Button sehen zu können müssen eure Post (im Post Bereich) mit den JumpBreak versehen werden.
Zusatz, aber kein muss :
Fügt hier noch den Code
ein, damit der Button zentriert ist. Kann man machen, muss man aber nicht. Ihr könnt auch anstelle "center", right oder left eingeben. Je nachdem wie ihr es haben wollt! Denkt daran, dass ihr nach 'jump-link' ein Leerzeichen macht, bevor ihr den Code einfügt.
{HTML} Eigener "Read more" Button bei Blogger einfügen
Ich kann euch eins garantieren, ich kenne mich nicht zu 100% mit dem HTML Code aus, aber in den einen Jahr, seid dem ich blogge, habe ich einiges gelernt, was ich euch heute nach und nach weiter geben möchte! Heute beschäftigen wir uns den sogenannten "Read more" Button! Am Ende des Beitrages habe ich euch zwei Bottons fertig gemacht,den ihr euch natürlich kostenlos Downloaden könnt (zum Download einfach den Download Link folgen)! So nun kommen wir zum Tutorial. Das Tutorial basiert auf Blogger!Schritt 1)
Als erstes braucht ihr natürlich einen "Read more" Button, den könnt ihr euch via Gimp,PicMonkey oder Paint erstellen. Speichert euren Button entweder als .jpg oder .png Datei ein. Anschließend ladet den Button bei TinyPic oder Picasa hoch.
Schritt 2)
Geht auf Vorlage -> HTML bearbeiten.Wichtig : Speichert euch eine Vorlage eures Layouts zur Sicherheit ab! Was ich euch empfehlen kann : probiert es erst bei einem Testblog aus.
Schritt 3)
Drückt die Tasten Strg + F um das Suchfeld aufzurufen und gebt dort das Wort JumpLink ein, das sollte dann so aussehen :
so sieht dann der gesamte wichtige Bereich aus:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link' >
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Schritt 4)
Den Teil müsst ihr durch folgenden befehl ersetzen :
<img width="120px" height="32px" src="URL Weiterlesen-Button-Bild"/>
URL Weiterlesen-Button-Bild = Link zu eurem Read more Button
Hier könnt ihr die Größe des Read more Buttons selbst bestimmen. Schaut auf "Vorschau der Vorlage anzeigen" nach ob euch die Größe gefällt. Wichtig ist hier das das die angaben zu Breite und höhe die maßen eures Button beträgt,sonst wird die Grafik entweder Pixelig angezeigt oder unscharf angezeigt!
Beispiel : width="250px" height="150px
Schritt 5)
Jetzt nur noch auf "Vorlage speichern" klicken und schon dürftet ihr euren eigenen Read more Button haben! Wichtig : um den Button sehen zu können müssen eure Post (im Post Bereich) mit den JumpBreak versehen werden.
Zusatz, aber kein muss :
Fügt hier noch den Code
style='text-align:center'
ein, damit der Button zentriert ist. Kann man machen, muss man aber nicht. Ihr könnt auch anstelle "center", right oder left eingeben. Je nachdem wie ihr es haben wollt! Denkt daran, dass ihr nach 'jump-link' ein Leerzeichen macht, bevor ihr den Code einfügt.
Free Downloads
tolles tutorial, das ich so noch nirgends gesehen habe. werde es morgen mal versuchen, nachzumachen.
AntwortenLöschenDanke :) wenn was nicht klappt sag mir bescheid :) viel spaß
LöschenHej,
AntwortenLöschenzwei kleine Ergänzungen:
- Die Angaben zur Breite und Höhe der Buttongrafik sollten idealerweise den tatsächlichen Abmessungen des Bilds entsprechen. Andernfalls wird die Grafik entweder pixelig / unscharf (wenn sie größer angezeigt werden soll, als sie eigentlich ist) oder du lädst ein größeres Bild, als du eigentlich müsstest, was wiederum zu Lasten der Ladezeit geht.
- Wenn du dem img-Tag noch ein alt="Weiterlesen" mit auf den Weg gibst, funktioniert der Link auch, wenn das Bild aus irgendwelchen Gründen nicht geladen werden kann. :)
Liebe Grüße
Hey! Ich habe eine frage dazu: Bei mir kann man seit monaten auf "read more" klicken. Nun möchte ich aber, dass die beiträge komplett angezeigt werden. ich habe es aber mit den ganzen tutorials nicht geschafft. Oder war zu blöd, um bei google das richtige einzugeben. könntest du vielleicht dazu einen post machen? :)
AntwortenLöschenLiebe Grüße, Alex aus der Lieblingsküche