Tutorial ~ Eigenen, individuellen "Weiterlesen"-Button einfügen

Hallo Leute,

es haben zwar nicht wirklich viele danach gefragt, aber ich dachte, dass ich es euch trotzdem einmal zusammen schreibe und poste. Und zwar möchte ich euch zeigen, wie man den Link, der bei einem JumpBreak in eurem Post erscheint und zum Weiterlesen animieren soll, individuell verändern kann. Wie ihr gleich sehen könnt ist dies gar nicht so schwer und habe ich mir zu 80% selbst zusammen gereimt. Und los geht's:

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:

bzw. so sieht dann der gesamte wichtige Bereich aus:

    
<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
   <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
</b:if>

6. Den Teil müsst ihr löschen und durch diesen Befehl ersetzen:

<img width="120px" height="32px" src="URL Weiterlesen-Button-Bild"/>

7. Der Teil sagt, welche Maße euer Button haben soll. Die 120px und 32px könnt ihr so lassen, aber auch gerne verändern, je nachdem, wie es euch gefällt.

8. Hier setzt ihr die URL von eurem Button ein, indem ihr die Bild-URL von eurem Button kopiert.

9. Wenn ihr damit durch seid, unbedingt nochmal auf "Vorschau" klicken um zu überpüfen, ob es wirklich funktioniert hat und dann erst auf "Vorlage speichern" klicken.

Ich hoffe, dass dieses Tutorial verständlich war und die Anleitung euch geholfen hat. Wenn ihr Verbesserungsvorschläge für mich habt: immer her damit :)