In den folgenden Schritten erkläre ich kurz, wie man sogenannte Ankerpunkte verwendet, die ich bereits in meinen Rezensionen benutze.

Gehe direkt zu: Schritt 0Schritt 1Schritt 2Anker gesetztDas war’sKommentieren

Wofür sind die gut? Brauch ich sowas?

Erstmal einmal, brauch sie nicht jeder. Es ist rein optional. Wer sie jedoch benutzt, ermöglicht seinen User dadurch gezielt auf einen Unterpunkt zu gelangen. In meinen Rezensionen z. B. kann kann man direkt zu Geschichte, Mein Fazit, Die AutorIn oder Kommentare gelangen, in dem man unter der Zusammenfassung und Bewertung einen der Links anklickt.

Sie erleichtern, gerade bei sehr langen Seiten, das „Suchen“ nach einer bestimmten Stelle im Fließtext – also eurem Blog-Artikel.

» Beispiel Anker

Schritt 0 – HTML

Bevor wir mit dem Code Einfügen beginnen, benötigt ihr die HTML-Ansicht eurer Seite/Artikel, in dem ihr den Ankerpunkt einfügen möchtet.

[Wordpress] HTML-AnsichtUnter WordPress geht das im jeweiligen Artkel bzw Seite mithilfe des Tabs „Text“ (frühere Versionen hatten da ggf. „Html“ oder „Quelltext“ stehen) auf der rechten oberen Seite des Eingabefeldes. Die Ansicht sollte sich ändern.

[Blogspot] HTML-AnsichtUnter Blogger/Blogspot findet ihr das ganze oben links, wenn ihr auf der „Post anlegen/bearbeiten“ bzw „Seite anlegen/bearbeiten“ Ansicht seid. Hier einfach den Button für HTML anwählen, die Ansicht sollte sich ändern.

Jetzt ist alles vorbereitet – es kann losgehen!

Schritt 1 – Die Ankerpunkte festlegen

Der Code dafür ist recht simpel und sieht so aus:

Erklärung:

An der Stelle, wo Name_des_Ankerpunktes steht, könnt ihr einen beliebigen Namen festlegen. Der Name ist wichtig, damit später auf genau diesen – und keinen anderen – Anker verlinkt wird bzw. gesprungen werden kann. Mithilfe des Attributs name, weiß der Anker nun, wann er sich zu melden hat, sobald ein Link seinen Namen aufruft.

Ist der Teil Hier kann was stehen, muss aber nicht ausgefüllt, wird genau diese Stelle angesteuert und erscheint im Browser am obersten Rand – solltet ihr die Stelle leer lassen (so mache ich es immer), wird quasi eine leere Zeile angesteuert und alles darunter erscheinende ist dann besser lesbar.

Wichtig: Keine doppelten Namen vergeben! Lieber einen eindeutigen Namen.

Beispiel:

Schritt 2 – Die Links einfügen

Nachdem wir eben festgelegt haben, welche Stellen angesteuert werden soll, kommen wir nun zu den eigentlichen Links, die auch genau zu den Stellen gehen sollen. Der HTML Code dazu sieht dem davor recht ähnlich, und ist trotzdem nicht der gleiche.

Erklärung:

Der Unterschied zum Ankerpunkt ist, wie man bei näherer Betrachtung erkennen kann, das Attribut. Ein Link zeichnet sich durch das Kürzel href aus, der bestimmte „Namen“ (oder Webseiten) ansteuern kann – hingegen der Anker nur seinen Namen weiß.

Wichtig: Zwischen dem <a> </a> Tag muss etwas stehen. Das wird später als Link angezeigt, den der User sehen und klicken kann, um zum definierten Ankerpunkt zu kommen.

Für Nutzer von Blogspot wichtig:

Aktualisiert/Speichert eure Seite, bevor ihr zurück in die normale Ansicht wechselte, da Blogspot ansonsten einen fantasy-Link einfügt (und das wollen wir ja nicht).

Beispiel:

Kleiner Tipp am Rand

Diese Ankerpunkte kann man jederzeit überall auf der Seite/Artikel festlegen – Reihenfolge ist nicht wichtig – es ist also egal, ob ihr zuerst einen Anker festlegt und erst unten via Link darauf referenziert, oder andersrum.

Wenn du die User mittels eines solchen Ankerpunktes zurück zum „Kopf“ der Seite schicken willst, geschieht das ohne Namen. Einfach einen Link erstellen, und eine leere Raute.

Beispiel: Gehe zurück zur Auswahl

Wie sehe ich, dass ich einen Ankerpunkt gesetzt habe?

[Wordpress] Ankerpunkt in der TextansichtUnter WordPress werden kleiner Anker angezeigt, die anzeigen, dass sich hier gerade ein (versteckter) Ankerpunkt befindet.

Leider hat Blogger hier kein gutes Interface – was heißt, dass man ständig den HTML-Code überprüfen muss, ob auch wirklich das drin steht, was drinstehen soll.

Das war’s

Das war mein Tutorial. Wenn du Anregungen zur Verbesserung hast, oder Kritik, Lob etc. Hinterlasse hier drunter einen Kommentar, der ggf. auch andere User helfen kann. Fehler kann ich direkt ändern, wenn dir welche auffallen (ebenso wie Tipps).

Danke :)