How-To Rezensionsindex Part I:
Das klickbare Alphabet

DISCLAIMER: Ich habe keine Ahnung von Webdesign, Programmieren und Co. Alles, was ich habe, ist ein bisschen Übung darin, mit Hilfe von Google und Stackoverflow das zusammen zu basteln, was ich gern auf meiner Website hätte. Vermutlich (sicherlich) geht das in 9 von 10 Fällen einfacher und besser und ich übernehme daher auch absolut keine Garantie für irgendwas von dem, was hier steht!

Vor Kurzem gab es auf Twitter (mal wieder) eine Diskussion, bei der es um Rezensionsindizes ging und darum, dass Blogs mit Index viel attraktiver sind. Dann hat Elena von All meine Träume ihren Rezensionsindex ins Spiel gebracht, bei dem oben, über der Rezensionsliste, ein Alphabet steht und man mit einem Klick zum jeweiligen Buchstaben springen kann. Coole Sache, fanden offenbar auch die anderen Diskussionsteilnehmer, und finde ich auch, sonst hätte ich es wohl nicht so gebastelt (ja, ich weiß, Eigenlob stinkt!). Und einfach ist es auch noch!

Die Indizes auf meiner und Elenas Seite funktionieren automatisch, d.h. sobald ein Beitrag mit den nötigen Angaben veröffentlicht wird, erscheint er automatisch im Index. Das ist perfekt für alle, die grundsätzlich vergessen, ihren Index von Hand zu aktualisieren – mich zum Beispiel! Allerdings ist das, soweit ich weiß, nur auf selbstgehosteten WordPress-Blogs möglich. Wie ihr so einen automatisierten Index erstellen könnt, erkläre ich euch eventuell irgendwann mal in einem zweiten Teil „How-To Rezensionsindex“. Heute geht es aber um das klickbare Alphabet, das jeder, egal ob Blogspot oder WordPress-Blogger, ob selbstgehostet oder nicht, ganz leicht umsetzen kann:

Ein klickbares Alphabet über dem Index

Von A bis Z, gerade wenn der Rezensionsindex etwas länger ist, ist es schön, wenn der Leser mit nur einem Klick zu den einzelnen Buchstaben springen kann, so wie es bei Elenas Index machbar ist. Das ist denkbar einfach, denn innerhalb einer Seite kann man ganz leicht sogenannte Anker setzen und verlinken, sodass man bei einem Klick auf den Link zum entsprechenden Anker hüpft.

Das Schöne? Wirklich jeder kann in wenigen Minuten so eine Übersicht für den eigenen Rezensionsindex erstelllen, es sind keinerlei Programmierkenntnisse erforderlich, keine weiteren Programme, nichts, außer eben einem Rezensionsindex. Dabei ist es egal, ob ihr schon einen bestehenden Index habt oder ihn jetzt erst neu anlegt. Alles, was ihr braucht, ist Zugang zu der Seite, auf der euer Rezensionsindex ist oder sein soll!

Aber genug gelabert! Auf zum Code!

Mit einem Klick zum richtigen Buchstaben

Okay, los geht es wirklich ganz einfach: Ihr ruft die Seite auf, auf der euer Rezensionsindex ist, oder erstellt eine neue Seite, wenn ihr noch keinen Index habt – wie das geht, ist ja hoffentlich allen klar, sonst schaut dafür bitte in den Basic-Tutorials für eure jeweilige Blogging-Software nach! Sobald ihr die Seite habt, müsst ihr eure Rezensionslinks alphabetisch sortieren, falls das noch nicht der Fall ist, und ein Alphabet oben drüber einfügen, das ihr dann verlinken könnt. Wenn ihr wollt, könnt ihr der Übersicht halber auch Buchstaben in der Liste einfügen, gerade wenn eure Liste etwas länger ist, wäre das sinnvoll. Die Alphabet-Übersicht und die Zwischen-Buchstaben könnt ihr formatieren, wie ihr wollt aber je nachdem, wo ihr euer Blog habt, sollte das dann im visuellen Editor ungefähr so aussehen:

Und jetzt geht es an den Code! Zuerst setzt ihr die Anker, die Stellen, zu denen die Seite nachher springen soll, wenn man einen Buchstaben in der Übersicht anklickt. Dazu müsst ihr vom visuellen Editor in den HTML Editor wechseln. Die Schaltflächen heißen je nach Software etwas anders, sind aber immer links (WordPress) oder rechts (Blogger) außen über dem Text-Eingabe-Feld zu finden. Eure Seiten sollten dann ungefähr so außen wie auf den Bildern unten und ihr seid startbereit! Wobei, sicherheitshalber solltet ihr an dieser Stelle eine Kopie eurer Seite stellen: Kopiert einfach den gesamten Text in eine leere Text-Datei z.B. im Windows Editor und speichert sie irgendwo, damit ihr im Notfall nachher alles wieder auf Anfang zurücksetzen könnt. Und dann heißt es copy & paste und das 26x Mal, denn ihr müsst vor jedem Buchstaben einen Anker setzen. Der Code dafür ist folgender winziger Schnipsel:

<a id="/Name des Ankers/"></a>

/Name des Ankers/ müsst ihr dabei natürlich jedes Mal durch einen eindeutigen Namen für den jeweiligen Anker ersetzen – da ihr das Alphabet durch geht, empfiehlt es sich meiner Meinung nach einfach den jeweiligen Buchstaben als Namen zu nehmen, sodass es nachher so aussieht:

&lt;a id=&quot;a&quot;&gt;&lt;/a&gt;A</p>
<p>&lt;a id=&quot;b&quot;&gt;&lt;/a&gt;B</p>
<p>…</p>
<p>&lt;a id=&quot;z&quot;&gt;&lt;/a&gt;Z

Jetzt werden aber viele von euch eine Formatierung für diese Trennbuchstaben benutzen, zum Beispiel die Überschriften-Formatierung, sodass euer Code eher so aussieht:

<br />
&lt;h4&gt;A&lt;/h4&gt;</p>
<p>&lt;h4&gt;B&lt;/h4&gt;</p>
<p>…</p>
<p>&lt;h4&gt;Z&lt;/h4&gt;</p>
<p>

In diesem Fall könnt ihr die Anker-ID direkt in den schon vorhandenen HTML-Code integrieren und euch die Link-Tags sparen:

<br />
&lt;h4 id=&quot;a&quot;&gt;A&lt;/h4&gt;</p>
<p>&lt;h4 id=&quot;b&quot;&gt;B&lt;/h4&gt;</p>
<p>…</p>
<p>&lt;h4 id=&quot;z&quot;&gt;Z&lt;/h4&gt;</p>
<p>

Fehlt nur noch eine Sache: Die alphabetische Übersicht über dem Index mit den einzelnen Ankern verlinken. Wie ihr ja an den Bildern sehen könnt, habe ich ein bisschen mit den verschiedenen Plattformen herumexperimentiert und unglücklicherweise festgestellt, dass Blogger-Nutzer es hier jetzt doch etwas schwerer haben als WordPress-Nutzer, sorry! Wirklich schwierig ist es aber auch auf Blogger nicht, man muss es da halt nur von Hand machen, während es bei WordPress quasi automatisch geht.

Um zu einem Anker innerhalb der selben Seite zu verlinken, braucht ihr keinen vollständigen Link, sondern nur #/Name des Ankers/. Wenn ihr von einer anderen Seite aus zu einem Anker auf einer Rezensionsindexseite verlinken wollt, ist der Link dann https://euerblog.de/rezensionsindex#/Name des Ankers/ – ganz easy. Und dementsprechend easy ist eben auch dieser letzte Schritt für euren eigenen, klickbaren Index!

Also erst WordPress: Egal ob selbstgehostet oder nicht, in WordPress könnt ihr jetzt wieder zurück in den visuellen Editor wechseln. Und dann markiert ihr den ersten Buchstaben in der Alphabet-Übersicht, also vermutlich das A, klickt auf „Link einfügen/bearbeiten“ und gebt als URL einfach nur #a ein. Das wiederholt ihr dann mit allen Buchstaben und, tadaa, FERTIG!

Bleibt noch Blogger: Hier könnt ihr leider nicht einfach über den visuellen Editor arbeiten, es sei denn, ihr gebt jeweils den vollständigen Link ein. Stattdessen könnt ihr aber im HTML Editor bleiben und die Links von Hand einfügen. Dafür nutzt ihr den folgenden Code:

<a href="#a">A</a> • <a href="#b">B</a> … <a href="#z">Z</a>

Und das war es auch schon! Jetzt nur noch speichern und die Seite aktualisieren und ihr könnt mit nur einem Klick zu den einzelnen Buchstaben in eurem Rezensionsindex springen, yay!

Falls ihr Fragen habt oder irgendwas doch nicht richtig funktioniert, lasst mir gerne einen Kommentar da!

How-To Rezensionsindex

11

Zu diesem Post gibt es schon 35 Kommentare - lass doch auch einen da!

    1. Hey Isabel,

      mal schauen, ob und, wenn ja, wann ich das mit einem zweiten Part hinkriege – der wäre nämlich wesentlich umfangreicher 😅 Aber mal schauen, ich wollte eh noch ein paar Sachen an meinem Index ändern, vielleicht nutze ich die Gelegenheit dann auch direkt für einen weiteren Artikel 😊 Könnte aber bis zum Sommer dauern …

      Liebe Grüße
      Rike

    1. Huhu Chrissi!

      Wenn du deinen Rezensionsindex ganz normal von Hand im WordPress oder Blogger Editor bearbeitest, dann dürfte das eigentlich kein Problem sein, habe ja auch extra alle drei Varianten ausprobiert. Es kann halt sein, dass dein Code sehr anders ausgeht, aber Anker und Links müsstest du trotzdem einfügen können. Wenn‘s Probleme gibt, kannst du dich aber auch gerne melden 😊

      Liebe Grüße
      Rike

  1. Danke für die Anleitung, wirkt beim Durchlesen sehr gut verständlich. Das ist so etwas, dass ich bei meinem Blog schon lange mal machen wollte (oder eher musste, weil es ohne einfach viel zu unübersichtlich geworden ist), aber ich konnte mich nie aufraffen nach einer Anleitung zu googlen.

  2. Moin,

    ich bin über das #litnetzwerk auf deinen schönen Blog gestoßen und ich muss sagen, es gefällt mir richtig gut hier!

    Coole Sache! Danke für die tolle Erklärung. Das merk ich mir fürs Wochenende vor!

    Ich wünsche Dir noch einen guten Wochenstart!

    Herzliche Grüße von meinem Lieblingsleseplatz,
    Verena

  3. Hab es gestern auf twitter schon gesehn und innerlich gefeiert *hehe* Danke für die Anleitung. Werde es am Wochenende umsetzen in meiner Bildergalerie, wo ich eh noch die einzelnen Buchstaben neu in Galerien packen muss.

    Da solche Kniffs ja doch recht gefragt sind, müsste ich meine vllt auch mal öffentlich machen. Mach das immer still und heimlich mit meinem Bruder, der da mehr bewandert ist und gute Tipps geben kann, wo ich den Wald vor lauten Buchstaben und Zeichen nicht mehr seh 😛

    1. Oh ja, ich bin selbst ganz erstaunt, wie gut der Artikel angekommen ist, hatte eigentlich gedacht, dass das eine relativ selbstverständliche Sache ist 😅 Wäre also wahrscheinlich wirklich keine schlechte Idee, deine Kniffe mal zu posten 😄

  4. edit: Hab grad gesehn, dass dein Blog nicht das grüne Schloss, sondern ein Warndreieck beinhaltet. Weißt, wie das wegbekommst?
    [hatte ich auch vor kurzem]
    Wenn man es ausliest, sind wohl noch Bilddatein hochgeladen wurde, vor deiner Umstellung zu https. Es betrifft die farbigen Header in deiner Seitenleiste rechts.
    Einmal alle komplett (!) runterschmeißen und neu hochladen. Danach müsste es gehen, sprich du hast ein grünes Schloss *wuhu*

    1. Ja, ich weiß, ich muss noch alle Bilder ersetzen, vergesse das nur immer wieder 😅 Aber Danke für den Hinweis, habe mir jetzt eine Erinnerung gemacht und wenn ich wieder am PC bin, fang ich damit endlich mal an 😬

      1. Ich sehe, du hast was gemacht. Das Schloss ist nun grün *wuhu*

        Werde wohl nächsten Monat mal was dazu rausbringen, was für Ersatz-Plugins ich für Jetpack nun nutze. Auch das scheint für viele interessant zu sein und auf twitter ist immer alles so zwischen Tür und Angel XD

        1. Noch nicht auf allen Seiten, wie gesagt, ich muss dafür einige Bilder neu hochladen – viel zu viele 🙈 Ach, was Plugins und so angeht, gibt es wahrscheinlich bis Mai eh noch jede Menge Neuerungen – wenn WP und Jetpack sich nicht eh selbst an die Vorschriften anpassen, um ihre europäischen Nutzer nicht zu verlieren 🤷

  5. Hallo Rike,
    danke für die tolle Erklärung. Ich bin was den ganzen technischen Kram auf Blogs angeht eine totale Analphabetin und kann so einen Beitrag echt gut gebrauchen. Demnächst werde ich mir mal die Zeit nehmen um dieses Tutorial auf meinem Blog anzuwenden.
    Ich habe mal auf deinem Blog ein bisschen gestöbert und ich finde ihn richtig toll. Ich bleibe mal als Twitterfollowerin da.

    Liebe Grüße
    Elisa

    1. Huhu Elisa,
      freut mich, wenn dir die Anleitung hilft! Und freut mich natürlich noch mehr, dass dir mein Blog gefällt 😀
      Falls es doch Probleme mit dem Tutorial geben sollte, melde dich einfach 😉
      Liebe Grüße
      Rike

  6. Tolle Anleitung!
    Auf den Beitrag für die Coverwall freue ich mich schon, da bin ich selbst nämlich noch nicht so recht dahinter gekommen, wie ich das umsetzen kann. Da hilft dein Input sicher sehr. 🙂

  7. Hallo liebe Rike,
    erstmal danke für das Tutorial! 🙂
    Ich bin dem ganzen Schritt für Schritt gefolgt (Zumindest dachte ich das ;D) und es sieht eigentlich auch alles super aus- nur klappt es nicht, dass man von dem verlinkten ‚N‘ oder anderem Buchstaben zum Anker springt…
    Könnte es daran liegen, dass ich meine Anker so genannt habe:

    <a id="/N/"></a>

    und in die Verlinkung aber nur #n eingetragen habe, obwohl meine Ankerbuchstaben ja eigentlich ein ‚fettes N‘ sind ?
    Oder habe ich irgendwo etwas vergessen? 😀

    Schon einmal danke und liebe Grüße,
    Nora von geschichtenfaenger

    1. Hey Nora,

      ja, ich fürchte, so funktioniert das nicht ^^ Links und Anker können keine fetten oder anders formatierten Zeichen enthalten. Wenn ich mir deinen Quelltext anschaue, steht da auch nur:

      <strong>A</strong>

      IDs und Anker kann ich nirgendwo entdecken 🤔 Warum willst du denn nicht einfach

      <a id="n"></a>

      schreiben?

      Liebe Grüße
      Rike

      1. Huhu 🙂

        Habe gerade mal bei euch reingeschaut und ja, ich weiß, was du meinst. Man springt allerdings nie bis zum Ende, sondern immer bis zum Anfang – das Problem ist nur, wo der Anfang ist 😅
        Denn wenn du z.B. auf I klickst, dann springt die Seite so weit, dass die Stelle, an der der Anker für I gesetzt ist, am ganz oberen Rand des Browserfenster ist. Wenn man aber auf dem Blog eingeloggt ist, schiebt sich da die WP-Adminleiste drüber und auch so schiebt sich euer Menü davor. Siehst du hier auf dem Screenshot-Ausschnitt ganz gut, das V ist ganz am oberen Rand, hinter eurem Menübalken:

        Was man da z.B. machen kann, ist den Anker zu verschieben sodass er höher sitzt als der eigentliche Listenabschnitt – dazu kannst du das ‚a id=“abc“‚ z.B. direkt hinter die Liste des vorherigen Buchstabens setzen, statt an den Anfang der eigenen Liste – macht das Sinn? 😅

        Liebe Grüße
        Rike

  8. Hallo Rike,

    toller Beitrag! Finde es super, wie du mit deinen Beiträgen HTML-Grundlagen vermittelst und damit sicher einigen die Angst davor nimmst. Oder anderen Denkanstöße gibst – wie mir. Ich bin bisher irgendwie nie darauf gekommen, bei meinem Rezensionsindex mit einem „Inhaltsverzeichnis“ zu arbeiten. Aber es ist gleich so viel praktischer und hübsch noch dazu.

    Liebe Grüße
    Sabrina

    #litnetzwerk

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Deine E-Mail-Adresse wird nicht veröffentlicht. Mit dem Absenden des Kommentars stimmst du der Speicherung deiner Daten auf rikerandom.de zu. Mehr Informationen finden sich in der Datenschutzerklärung. Erforderliche Felder sind mit * markiert.