Mittwoch, 2. September 2015

Saubere Ankerlinks bei blogger setzen

Auf Wunsch überarbeitet. Hoffe so ist es verständlicher.
Falls nicht, unten kommentieren. Bin ein schlechter Gedankenleser :-)

Kommen wir direkt zur Sache.
Der sauberste weg einen Ankerlink in blogger zu setzen ist der, eine id zu setzen.
Wie,wo,was?

Ich möchte folgendes machen:
Ich drücke auf einen Link und dann springe ich zu einer anderen Stelle auf meiner Seite.
Dafür muss ich ins HTML-Modus gehen.

Was ich benötige ist die ganaue Adresse meiner Seite bzw meines Posts.
Um das zu verdeutlichen nehme ich die Adresse dieses Posts.

Die Stelle von wo ich starte kennzeichne ich so:
<a href="http://blogschande.blogspot.de/2015/09/saubere-ankerlinks-bei-blogger-setzen.html#spring">start</a>
Mein Anker heisst bei mir also "#spring"

Die Stelle wo ich hin springen will/mein Ziel, kennzeiche ich wie folgt:
<div id="spring">Ziel</div>

Der Text muss nicht zwingend im div stehen.
Bietet sich aber an,vor allem wenn es eine Überschrift ist.
Praktisches Beispiel hierzu ganz unten unter PS
Das würde natürlich auch gehen
<div id="spring"></div>
Ziel

Das einzige was Ihr tun müsst, ist lediglich Eure Adresse an die Stelle zu setzen, die ich oben rot gekennzeichnet habe. Einfach ersetzen und fertig.

Denkt daran, dass eine id nur einmal auf einer Seite vorkommen darf.
Wenn Ihr noch einen Ankerlink setzen wollt müsst Ihr eben einen anderen Namen vergeben.
Zb:
Die Stelle von wo ich starte zb "spring2" nennen:
<a href="http://blogschande.blogspot.de/2015/09/saubere-ankerlinks-bei-blogger-setzen.html#spring2">start</a>

Die Stelle wo ich hin springen will/mein Ziel, dementsprechend "spring2":
<div id="spring2">Ziel</div>
usw.

Das ganze würde natürlich auch von einer anderen Seite aus funktionieren.
Nehmen wir mal an ich hätte einen Beitrag auf einer anderen Seite geschrieben und würde gerne auf diese bestimmte Stelle des Post hinweisen wollen, so könnte ich zb schreiben.
"Genaue Informationen zum Thema finden Sie
<a href="http://blogschande.blogspot.de/2015/09/saubere-ankerlinks-bei-blogger-setzen.html#spring">hier</a>"
Dann würde mein Besucher genau an dieser Stelle landen, ohne den gesamten Beitrag lesen zu müssen.

Ihr könnt ebenfalls einen span-tag anstatt eines div-tags verwenden.
Also:
<span id="spring"></span>

Unten könnt Ihr einen Link in Aktion sehen.

Es gibt noch zwei andere Möglichkeiten, die jedoch überholt sind, und auf die sich nicht lohnt einzugehen.
Auf Wunsch kann ich das machen, aber die sind beide voll Banane, finde ich.

start























Ziel

PS 
Oft kommt es vor, dass man die Stelle wo man hin springt als Überschrift verwendet.
Diese ist meistens größer formatiert, die Schrift ist fett oder hat eine andere Farbe.
Da bietet sich an diesen div zu formatieren.
Wir nehmen den oben angesprochenen div:
<div id="spring1">Ziel</div>

Jetzt geben wir den div eine class. Zb die class "ueberschrift".
<div id="spring1" class="ueberschrift">Ziel</div>

Unsere CSS dazu:
.ueberschrift {
font-size: 22px;
font-weight: bold;
color: green
}

Hier das Ergebnis:
Ziel
Somit wird jede Überschrift automatisch formatiert.
Im Nachhinein kann ich zudem schnell eine Veränderung für alle divs auf einmal vornehmen.

Kommentare:

  1. Hmhm ... ein dateiinterner Ankerlink wurde doch schon immer auf die id eines Elements gesetzt und nicht auf einen weiteren Link, oder? Die relative Verweisung von einem Link auf einen weiteren Link kann nach meinem Verständnis nicht funktioniert. Das ist kein Blogger Phänomen.

    AntwortenLöschen
    Antworten
    1. früher bist du von a href="#von-hier" nach a name="von-hier" gesprungen. gilt mittlerweile als veraltet.
      das hüpfen von link zu link wurde auch verwendet.ist aber total banane finde ich.
      das springen auf eine id ist, wie du sagst, die beste lösung und hat das altbackene gott sei dank schon lange ersetzt
      was aber bei blogger beschissen ist (und das meinte ich und PATIN-A Ohg), ist die tatsache, dass blogger dir den code wechselt, sobald du in den verfassen-modus wechselst.finde ich fies.
      ich hatte nicht vor diesen Artikel zu teilen,da ich das für einen kumpel gemacht hatte. eventuell sollte ich das tun.was meinst du Oliver??
      allerdings müßte ich ihn etwas präziser schreiben.

      Löschen
    2. Blogger ist in xml geschrieben und benützt eine HTML5 Dokumenttypdefinition - das name Attribut innerhalb eines Ankerelements ist deprecated und wird von modernen Browsern nicht mehr bunterstützt. Mit einer id geht das natürlich auch auf einen Link in Blogger, habe ich gerade ausprobiert.

      Ich gehe nie aus dem Verfassen Modus raus, gibt für mich keinen Grund :D ... aber du hast Recht, das da der Link ist unsinnig. Gibt noch mehr, was da geändert wird, alle <p></p> Tags werden dabei etwa gelöscht.

      Ich würde den Text vielleicht noch mal überarbeiten, weil es für einen 'normalen' Blogger a bisserl missverständlich ist.

      Löschen
    3. obsolete, deprecate = altbacken hier im bergischen :-)
      werde ich überarbeiten,wenn ich zeit habe.
      PATIN-A Ohg hat mich auch schon darauf angesprochen.
      ist aber auch eine gratwanderung.
      machst du zuviel klein klein, wirkt es übertrieben.
      gehst du wiederum von grundvoraussetzungen aus, bleiben einige auf der strecke.
      muss da erstmal ein gefühl für bekommen.
      von daher finde ich das ok, wenn sich leute melden. was viel zu selten vorkommt. leider

      Löschen
    4. mal eine frage zu blogger.und zwar:
      ich erhalte keine benachrichtigung bei kommentaren,wenn ich am pc bin.
      heisst,wenn ich nicht manuell nachschaue,merke ich nix von.
      normal so, oder habe ich da was falsch eingestellt?

      Löschen
    5. Bin kein native speaker, manche Feinheiten entgehen mir im Deutschen, sorry :).
      ----
      Ich würde die Lösung für ein bestimmtes Problem immer so einfach wie nur irgendwie möglich halten. Die meisten Blogger lieben es, wenn sie irgendwo ein Script einfügen können und fertig :D. Ich denke, die meisten Blogger-Nutzer sind mit HTML & CSS eher überfordert und wollen im Grunde keine großen Erklärungen, sie wollen, das es funktioniert. Das ist schwierig zu schreiben, aber du machst das imho schon ganz gut.

      ---

      Du bekommst doch die Kommentare auf den GMail-Account, oder? Da mal nachgeschaut?

      Löschen
    6. ne.nix gmail. anderer anbieter.
      aber weiss bescheid. nur als mail,wenn ich richtig verstehe.
      hatte gehofft da blinkt was (so ähnlich wenn im forum was gepostet wird).

      Löschen