Personalisieren der Seitennavigation (Neue Beiträge/Alte Beiträge)

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Personalisieren der Seitennavigation (Neue Beiträge/Alte Beiträge)

Beitrag von Seelchen am So Apr 01, 2012 10:03 pm

Ja, jetzt ist es ein bisschen später geworden, als eigentlich geplant. Tut mir leid! Aber hier nun für euch das nächste Tutorial, das euch helfen wird, euren Blog weiter euren Wünschen entsprechend zu gestalten!
Laut der Umfrage, die ich vor einer Weile gestartet habe, würdet ihr als erstes gerne wissen, wie ihr die Seitennavigation (Ältere Beiträge / Neuere Beiträge) persönlich gestalten könnt. Und da ich mich eurem Willen beuge (Laughing), geht es auch schon los.

Für das Personalisieren der Ältere Beiträge / Neuere Beiträge Links habt ihr drei Möglichkeiten. Dabei ist die erste von ihnen auch gleichzeitig die einfachste und schnellste. Dafür geht ihr in euer Dashboard und von dort aus zur Vorlage. Bevor wir nun damit beginnen, unseren html-Code anzupassen, rate ich euch zur Sicherheit ein Backup zu machen. Das dauert nur Sekunden.
Ist das erledigt geht ihr auf html bearbeiten und setzt ein Häkchen bei „Widget-Vorlagen komplett anzeigen“.
Mit Hilfe von Strg+F sucht ihr nun nach dieser Stelle im Code: <b:includable id='nextprev'> . Habt ihr sie gefunden, geht es ans Eingemachte!

Unter der gesuchten Stelle im html-Code findet ihr folgende Codes:

Code:
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

Wie ihr sehen könnt befasst sich jeder Code-Abschnitt mit einem anderen Link. Der erste steht für die neuen Beiträge, der zweite für die alten und der letzte Abschnitt kümmert sich um den „Home“ Link.

Eingangs habe ich bereits geschrieben, dass die erste Möglichkeit die Einfachste ist und das ist sie deshalb, weil es hier lediglich darum geht, die Link-Texte zu verändern. Beispiel:

Code:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>VOR ZU DEN AKTUELLEN BEITRÄGEN</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>BLÄTTERN IN DEN ALTEN BEITRÄGEN</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>STARTSEITE</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

und schon haben die Standarttexte ausgedient und wurden durch einen verlinkten Text eurer Wahl ersetzt. Very Happy

Möglichkeit zwei fügt eine Grafik eurer Wahl rechts und links neben die Text-Links der Seitennavigation. Dazu ladet ihr eure Grafiken bei einem Imagehoster hoch und fügt den Directlink wie in folgendem Beispiel ein:

Code:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='http://img812.imageshack.us/img812/7638/rechtsr.png'/><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/><img src='http://i40.tinypic.com/sfcox4.jpg'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Die dritte Möglichkeit ist meine liebste. Hier wird der Linktext vollkommen durch Grafiken eurer Wahl ersetzt! Wie auch schon im Fall von Variante 2 braucht ihr hierfür Bildchen (dieses Mal 3 und nicht zwei), die ihr später an die Stellen von „Neuere Beiträge“, „Ältere Beiträge“ und „Home“ setzt. Hier wieder ein Beispiel:

Code:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='http://img812.imageshack.us/img812/7638/rechtsr.png'/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='http://img6.imageshack.us/img6/3720/linksvg.png'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://img715.imageshack.us/img715/8599/homena.png'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Wenn ihr möchtet könnt ihr die von mir hier eingesetzten Grafiken für euren Blog verwenden. Alternativ könnt ihr euch freie Bilder im Netz suchen, oder selbst welche anfertigen!

Viel Spaß beim ausprobieren! Very Happy
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten