Donnerstag, 15. März 2012

blogspot/blogger: Weiterlesen-Link anpassen

Bei blogger-Templates heißt der Weiterlesenlink "jump-link". In den meisten Templates ist er zu klein und unauffällig, außerdem ist der Text unglücklich ("Weitere Informationen" statt "Weiterlesen"). Es besteht also ein Bedarf an Änderung der Formatierung und an Änderung des Textes. Hier ist die Anleitung:

1. Änderung der Formatierung des Weiterlesenlinks

Zum Formatieren sind folgende CSS-Angaben einzufügen (am besten unter: Vorlagendesigner - Erweitert - CSS hinzufügen; oder aber direkt im Template):

.jump-link {}
.jump-link A  {}

Zum Beispiel:


.jump-link {font-weight:bold; font-size:130%; margin:20px 30px; text-align:right;}
.jump-link A {text-decoration:underline, color:green}

Das ergibt in diesem Beispiel: 130% Schriftgröße, außerdem fett, 20px Abstand oben und unten und 30px Abstand rechts und links (wobei hier nur der rechte Abstand eine Rolle spielt), damit der Text nicht am Rand klebt. Ferner bekommt er eine Unterstreichung, im Gegensatz zu den anderen Links auf der Seite, und die Farbe grün.

Normalerweise sind in den Templates noch keine jump-link-CSS-Angaben enthalten. Wundern Sie sich nicht, wenn Sie keine entsprechenden Angaben finden. Im HTML-Gerüst ist aber diese CSS-Klasse, also  Formatvorlage, vorgesehen, und zwar für den DIV-Container, der den Link umgibt:  <div class="jump-link"></a>Weiterlesen </a></div>.

Die Klasse .jump-link ist hier ein Blockelement (in der Textverarbeitung würde man Absatzformatierung sagen); hier können Sie z.B. die Ausrichtung auf der rechten Seite einstellen, ferner die Abstände zum Text vorher, Text nachher, und rechts und links.

Die Formatierung von Schriftfarbe und Text-Decoration (Unterstreichung) müssen Sie normalerweise extra vornehmen. Zwar würde die Formatierung im jump-link-Div-Container auch allen Text innerhalb des Containers erfassen. Da aber die Links auf der Webseite bezüglich Farbe und Unterstreichung eigens formatiert sind, würden diese Link-Spezialformatierungen die DIV-Container-Formatierung aufheben. Sie müssen also die Links innerhalb des jump-link-Div-Containers gesondert formatieren, zumindest was Farbei und text-decoration betrifft. Daher die zweite Definition

.jump-link  a {}

Beachte das Leerzeichen; auf keinen Fall a.jump-link, das funktioniert nicht. Wenn der Link die Farbe wechseln soll, können Sie eine eigen hover-Farbe definieren, und zwar so:

.jump-link  a:hover {color:red}




2. Änderung des Textes des Weiterlesen-Links

Dazu müssen Sie in den Quelltext selbst eingreifen; der Vorlagendesigner oder die Einstellungen helfen hier nicht. Also Befehl "HTML bearbeiten", Sicherheitsabfrage bestätigen, als erstes Sicherungskopie herunterladen, dann UNBEDINGT das Kästchen (check-box) "Widget-Vorlagen komplett anzeigen" ankreuzen, damit der VOLLSTÄNDIGE Quelltext gezeigt wird.

Dann suchen Sie nach folgender Stelle:

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

Was Sie austauschen müssen ist das Element <data:post:jumpText/>
Ersetzen Sie es z.B. mit "Weiterlesen"



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



Der Weiterlesenlink erscheint natürlich nur, wenn im Text ein "jump-break" eingefügt wurde. Das ist sinnvoll vor allem dort, wo mehr als 1 Bild im Artikel eingebunden ist.

  © Blogger template 'Fly Away' by Ourblogtemplates.com 2008

Back to TOP