Mittwoch, 3. April 2013

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


Kommentare:

  1. Schönes Tutorial! Sehr verständlich erklärt! :)
    Was mich noch interessieren würde: Wie bekomme ich dieses Bild dann zentriert statt linksbündig? Wäre superlieb wenn du es noch erklären könntest! Dankee :D
    Alles Liebe,
    Mara

    AntwortenLöschen
    Antworten
    1. vor dem /> noch ein style="text-align:center;" einfügen ^-^

      Löschen
    2. Man hilft wo man kann! *Supermanpose* xD

      Löschen
    3. Hallo Mara,
      freut mich, dass das Tutorial dir helfen konnte und auch, dass Sandra so rasch geantwortet hat :D So schnell kann ja keiner gucken ;)
      Liebe Grüße, KQ

      Löschen
  2. Ich hab nicht danach gefragt weil ich es letzte Woche schon mithilfe eines Turorials bei mir eingestellt habe :) Schön erklärt!

    AntwortenLöschen
  3. Das werde ich demnächst mal ausprobieren.
    Vielen Dank :)

    AntwortenLöschen
    Antworten
    1. Hallo Svenja,
      ich habe eben gesehen, dass du es bei dir eingestellt hast :) Sieht sehr hübsch aus!
      Liebe Grüße, KQ

      Löschen
  4. Vielen Dank! Ich werde es auch bald ausprobieren auch wenn ich das mit dem Picasaalbum nicht so ganz verstehe.
    Liebe Grüße

    AntwortenLöschen
  5. Wie cool, danke für das Tutorial! Ich überlege schon länger bei mir einen Jumpbreak einzubauen, aber dieses normale "weiterlesen" fand ich total langweilig. Mal sehen, ob ich jetzt was Gutes hinbekomme, das ich da einbauen kann! :)

    AntwortenLöschen
    Antworten
    1. Hallo Tin,
      ich fand diesen Link zum JumpBreak auch immer so hässlich, aber manchmal sind meine Posts ein bisschen lang oder bei Rezensionen verstecke ich den wichtigen Teil, damit die Leser selber entscheiden können, ob sie meine Meinung und das Fazit lesen wollen, da nutze ich das schon ganz gerne. Ich bin mal gespannt, was du so kreieren wirst :)
      Liebe Grüße, KQ

      Löschen

Hallo lieber Leser,
ich freue mich, dass Du einen Kommentar schreiben möchtest. Ich freue mich über jeden - außer über Werbe- und Spamkommentare. Die werden unkommentiert wieder gelöscht. Möchtest Du, dass ich Deinen Blog besuche, kannst Du gerne Deine Blog-URL dalassen - aber bitte mit einem sinnvollen, kontextbezogenen Kommentar zu meinem Post. Danke :) Und vor allem Danke an meine eifrigen Kommentatoren :)