html Tutorial :: Graphik als Weiterlesen-Button

Manchmal gibt es Blogbeiträge, die viel Text oder auch viele Bilder enthalten, so, dass dieser Beitrag dann unendlich lang wird. Bis zum nächsten Beitrag scrollt man dann ewig nach unten. Bei solchen Beiträgen ist es oft ratsam eine sogenannten JumpBreak einzufügen. Im Blogbeitrag sieht man bis zu der Stelle, an der der JumpBreak gesetzt wurde den gewohnten Blogtext oder Bilder und danach gibt es einen 'Weiterlesen'-Button. Wenn ihr darauf klickt gelangt ihr dann zum vollen Beitrag.

Der gewöhnliche 'Weiterlesen'-Button, der nur aus einem einfachen Schriftzug mit einem dahinterliegenden Link besteht sieht doch richtig unsexy aus. Ich wollte stattdessen eine eigene Graphik haben, die ich mir im Vorfeld gestaltet habe. Wie ihr nun statt diesem 'Weiterlesen'-Button eine Graphik bekommt zeige ich euch heute: 



1 // Erster Schritt ist, dass ihr zunächst einmal eure eigene Graphik erstellt. Nachdem ich mit Photoshop arbeite habe ich sie dort erstellt. Ich habe mich dabei für eine Graphik entschieden, die genauso breit ist wie mein Postbereich, in dem Fall 630px und 35px hoch. Diese speichert ihr im .gif-Format ab und ladet sie z.B. bei Picasa hoch.  

2 // Nun müssen wir in die Untiefen des html-Codes. Dazu gehen wir unter Vorlage >> HTML bearbeiten

3 // Sucht im html-Code nach folgendem Absatz:

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

4 // Nun ersetzt ihr <data:post.jumpText/> durch folgendes:

<img height='35px' src='URL zu eurer erstellten Graphik' width='630px'/>

Noch ein wenig zur Erklärung:
<img height='35px' = Höhe die euer Button haben soll. In meinem Fall ist er 35px hoch
width='630px' = Breite die euer Button haben soll. In meinem Fall ist er 630px breit
Bei src=' setzt ihr die Graphikadresse ein

Der Absatz des html-Codes sieht nun wie folgt 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'> <img height='35px' src='URL zu eurer erstellten Graphik' width='630px'/>       </a>    </div> </b:if>

5 // Abschließend speichern wir die Vorlage und sehen uns das Ergebnis einmal an.

Nach dem Einfügen des html-Codes schaut mein 'Weiterlesen'-Button dann so aus:

So, wenn ihr den Link nun ausprobiert, werdet ihr feststellen, dass der Sprungpunkt des JumpBreak unglücklich verläuft. Nach dem Draufklicken gelangt ihr an die Stelle, an der der JumpBreak gesetzt wurde. Ein wenig verwirrend, weil man sich eigentlich erwartet, dass man zum Anfang des Blogbeitrages gelangt.

Genau das ändern wir jetzt noch und dann sollte der JumpBreak zufriedenstellend funktionieren:

1 // Wir gehen also wieder in die Untiefen des html-Codes unter Vorlage >> HTML bearbeiten

2 // Wir suchen nun wieder im html-Code nach folgendem Absatz:

<b:if cond='data:post.hasJumpLink'>    <div class='jump-link'>       <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'> <img height='35px' src='URL zu eurer erstellten Graphik' width='630px'/>       </a>    </div> </b:if>

3 // Wir löschen + &quot;#more&quot;. Der Absatz des html-Codes sieht nun wie folgt aus:

<b:if cond='data:post.hasJumpLink'>    <div class='jump-link'>       <a expr:href='data:post.url' expr:title='data:post.title'> <img height='35px' src='URL zu eurer erstellten Graphik' width='630px'/>       </a>    </div> </b:if>

4 // Wir speichern die Vorlage und probieren den 'Weiterlesen'-Button gleich einmal aus. Ihr werdet sehen, dass wir nun automatisch zum Anfang des Blogbeitrages gelangen.