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:


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. Fügt hier noch den Code

style='text-align:center'

ein, damit der Button zentriert ist. Kann man machen, muss man nicht. Je nachdem, wie ihr es haben wollt. Ihr könnt statt center natürlich auch right eingeben, dann ist der Button rechtsbündig. Denkt nur dran, dass ihr nach 'jump-link' ein Leerzeichen macht, bevor ihr den Code einfügt.


10. 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



7 Kommentare:

  1. Das ist das, wa sich die ganze Zeit gesicht hab, danke.
    Super Tutorial, war leicht zu verstehen, selbst für mich die keine Ahnung von html hat.

    AntwortenLöschen
  2. Hey Kaugummiqueen,

    ich danke dir sehr für das Tutorial, super einfach und echt gut erklärt. Leider hat sich der "Weiterlesen" Button jetzt bei mir unter "Link Within" geschoben. Wie kann ich die Position beeinflussen?????

    Viele Grüße
    Sabrina http://stichgruen.blogspot.de/

    AntwortenLöschen
  3. Hallo nochmal, ich hatte noch ein viel größeres Problem: Der Button enthielt keinen Link mehr zum weiterlesen meiner Posts... !!???

    AntwortenLöschen
  4. Super, hat funktioniert !!!
    Dein Blog hier ist echt Gold wert ♥

    AntwortenLöschen
  5. Vielen lieben Dank! Endlich habe ich die Funktion auf meinem Blog :)
    Kannst dir das Ergebnis ja mal anschauen hihi :P

    Ganz liebe Grüße, Carofee

    AntwortenLöschen
  6. Hey :)
    Super Tutorial! Dankeschön. :D

    Liebe Grüße, Mell

    AntwortenLöschen
  7. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen