Cookie-Hinweis Smartphone

28.01.2013

Navigation innerhalb eines Post oder einer Seite

Unter den Dynamischen Ansichten kann das nicht genutzt werden.
Es gibt Themen, die man in einem einzigen Post /auf einer einzigen "Seite" abhandeln kann und die den Post/die "Seite" dabei nicht zu speichcherintensiv beladen. Dennoch kann so ein Post/eine Seite lang geraten und verschiedene Unterpunkte beinhalten. Dann macht eine Navigation innerhalb des Post/der Seite Sinn. Leser möchten vielleicht nur zu einem einzelnen Aspekt des Themas etwas erfahren und sich nicht durch alles durchscrollen. Eine Übersicht mit verlinkten Unterpunkten ist da Gold wert.

Dazu muss man im HTML-Modus des Blogger-Editors Anker setzen und dann diese Anker in der Übersicht verlinken. Anker sind Linkziele innerhalb eines Post/einer Seite. Klickt man auf einen Link, der zu einem Anker führt, dann springt die Ansicht auf diese Stelle des Post/der Seite.


Anker setzen

Anders als sonst üblich muss man bei einem Link-Anker in einem Post oder einer "Seite" eines Blogs nicht nur einen Ankernamen angeben, sondern auch die Post-Adresse bzw. "Seiten"-Adresse.

Also statt nur
<a name="ankername"></a>
muss man
<a href="post-oder-seiten-adresse" name="ankername"></a>
angeben.

Das ist ein Anker in einem Post (Muster):
<a href="http://titel.blogspot.com/jahr/monat/posttitel.html" name="ankername1"></a>
Das ist ein Anker in einer "Seite" (Muster):
<a href="http://titel.blogspot.com/p/seitentitel.html" name="ankername1"></a>

Solche Anker sieht man nur im HTML-Modus des Posts/der Seite, sie sind ansonsten unsichtbar. Man kann sie z.B. über "Untergeordnete Überschriften" setzen, zu denen man springen können soll. Oder wohin auch immer man will.

Link zu einem Anker setzen

... im Verfassen-Modus des Blogger-Editors per Link-Button
Man kann einen Link zu einem Anker im Verfassen-Modus des Blogger-Editors ganz normal mithilfe des Link-Buttons setzen. Dazu muss man nur wissen, wie die Webadresse eines Ankers überhaupt geschrieben wird. Wichtig ist dabei, zu bedenken, dass es zwei verschiedene Links geben muss, nämlich einen, den man innerhalb der Webversion der Vorlage nutzen kann und einen, den man innerhalb der Mobilversion der Vorlage nutzen kann. Ansonsten würde man aus der jeweiligen Vesion in die jeweils andere geraten, wenn man nur eine Linksversion anbietet.

Die Adresse eines Ankers, der sich in einem Post befindet, sieht so aus (Muster):

Webversion:
http://titel.blogspot.com/jahr/monat/posttitel.html#ankername
Mobilversion:
http://titel.blogspot.com/jahr/monat/posttitel.html?m=1#ankername


Die Adresse eines Ankers, der sich auf einer Seite befindet, sieht so aus (Muster):

Webversion:
http://titel.blogspot.com/p/seitentitel.html#ankername
Mobilversion:
http://titel.blogspot.com/p/seitentitel.html?m=1#ankername

... im HTML-Modus des Blogger-Editors
Will man seine Anker jedoch lieber per Hand im HTML-Modus des Blogger-Editors verlinken, dann geht das wie folgt.

Wenn man mit einem Anker verlinkt, der sich in einem Post befindet, muss der Link so aussehen (Muster):

Webversion
<a href="http://titel.blogspot.com/jahr/monat/posttitel.html#ankername>Verankerte Überschrift</a>
Mobilversion
<a href="http://titel.blogspot.com/jahr/monat/posttitel.html?m=1#ankername>Verankerte Überschrift</a>

Wenn man mit einem Anker verlinkt, der sich auf einer Seite befindet, muss der Link so aussehen (Muster):

Webversion
<a href="http://titel.blogspot.com/p/Seitentitel.html#ankername">Verankerte Überschrift</a>
Mobilversion
<a href="http://titel.blogspot.com/p/Seitentitel.html?m=1#ankername">Verankerte Überschrift</a>

Beispiel für die Struktur eines Post mit interner Navigation (HTML-Muster)

<h4>Übersicht</h4>
<ul>
<li>Untertitel 1
<a href="http://titel.blogspot.com/jahr/monat/posttitel.html#ankername1">Web</a>
 |
<a href="http://titel.blogspot.com/jahr/monat/posttitel.html?m=1#ankername1">Mobil</a>
</li>
<li>Untertitel 2
<a href="http://titel.blogspot.com/jahr/monat/posttitel.html#ankername2">Web</a>
 |
<a href="http://titel.blogspot.com/jahr/monat/posttitel.html?m=1#ankername2">Mobil</a>
</li>
</ul>
<h4>Inhalt</h4>

<a href="http://titel.blogspot.com/jahr/monat/posttitel.html" name="ankername1"></a>
<h4>
Untertitel 1
</h4>
Text ...

<a href="http://titel.blogspot.com/jahr/monat/posttitel.html" name="ankername2"></a>
<h4>
Untertitel 2
</h4>
Text ...

Beispiel auf herzwarm.de: http://www.herzwarm.de/p/brustkrebs.html Web | Mobil

Bei Änderungen bedenken

Man muss aber daran denken, die Anker und Links anzupassen, wenn man den Post mal zurück auf Entwurf stellt und in einem anderen Monat erneut veröffentlicht und er dadurch eine neue Adresse bekommen hat oder wenn man seinen Inhalt woanders reinsetzt, z.B. von einer "Seite" in einen Post oder umgekehrt. Hat man einen solchen Post im "Seiten"-Gadget verlinkt, dann gilt seine Post-Adresse, keine "Seiten"-Adresse.

Anker machen gelegentlich auch zu anderen Zwecken Sinn

Anker kann man von überall her direkt ansteuern. Ein Anker kann also auch dann an einer Stelle von Interesse sein, wenn man von ganz woanders her exakt auf diese Stelle und nicht auf den gesamten Post/die gesamte Seite verweisen möchte.

Abgrenzung

Grundsätzlich sollte man keine riesigen Posts oder "Seiten" erstellen. Es gibt eine Beschränkung bei Blogger, wieviel KB geöffnet werden. Wenn man einen sehr langen Post bzw. eine sehr lange "Seite" mit allerlei Bildern erstellt, könnte es deshalb sein, dass der Post bzw. die "Seite" niemals angezeigt wird. Soll also sehr viel zu einem Thema rein, dann ist es besser, das Thema auf mehrere Posts aufzuteilen. Die kann man dann einzeln verlinken und außerdem unter ein gemeinsames Label setzen, das man dann verlinkt. Auch dann erscheinen die einzelnen Unterthemen ja untereinander. Durch Manipulation des Zeitstempels kann man die Reihenfolge auch nachträglich noch korrigieren. Um wieder auf den Anfang (und somit wohl auf die Übersicht) des Themas zu kommen muss man dann allerdings auf jedem der Posts oben und unten einen Link zurück zur "Übersicht" setzen. Die Leser kämen zwar auch über den Ursprungslink dort hin, wenn er in ein Gadget gesetzt ist, das angezeigt wird, wer aber beispielsweise über die Googlesuche auf den Post kam, wird die Systematik des Blogs noch nicht erfasst haben.

Ute Ziemes, sg.utez.de,

2 Kommentare:

  1. Stimm so nicht, wenn das ganze nämlich nicht gerade auf einen Link verweisen soll,
    kann man z.B bei Fettgeschriebenem (etwas), kann man die Eigenschaft id nehmen: &ltb id="irgendeintext &gtetwas&lt/b &gt

    AntwortenLöschen
    Antworten
    1. "Stimmt so nicht" ist irreführend. Den Hinweis auf das Attribut "id" finde ich aber gut. Der Post ist ja schon etwas älter und noch weiter davor habe ich ewig getestet mit id. Die Tests ergaben damals, dass Linkanker und "name" darin die zuverlässigere Lösung waren. Seither hat aber Blogger seinen Code und haben alle Browser sich vielmals modernisiert. Außerdem ersetzt HTML5 seit ein paar Monaten offiziell alle anderen Standards und dort gilt "id" als Attribut für eine Sprungmarke. Es liegt also nahe, dass "id" als Sprungmarke mittlerweile tatsächlich verlässlich funktioniert. Da es die bequemere Lösung wäre, wäre es selbstverständlich auch die bessere. Linksprungmarken fand ich eh von jeher bekloppt. Ich werde also nochmal testen und den Post vermutlich aktualisieren.

      Löschen