Linkliste per HTML-Gadget selbst machen

Kann oder will man das Linklisten-Gadget nicht nutzen (aktuell - 29.03.2013 - ist das Linklisten-Gadget unter der normalen Blogger-Oberfläche beispielsweise nicht aktualisierbar), kann man statt dessen ein HTML/JavaScript-Gadget nutzen, um dort eine eigene Liste anzulegen.

Welche HTML-Codes man dafür eingeben muss, beschreibe ich folgend. Ich beschreibe das hier für das HTML/JavaScript-Gadget, das gleiche ist aber auch im HTML-Modus des Text-Gadgets möglich.

---

Will man die Liste nicht weiter gestalten, als nur irgendwie Links untereinander zu setzen, dann kann man eine der ersten beiden folgenden drei Varianten eintragen. Will man die Liste anders gestalten als in der jeweiligen Vorlage Listen in der Sidebar üblicherweise dargestellt werden, kann man vielleicht die dritte hier angegebene Variante nutzen, falls das Style-Beispiel in der genutzten Vorlage so oder ähnlich nicht bereits standardmäßig dargestellt wird. Für diese Variante ist zusätzlich zum HTML auch CSS-Code notwendig, den ich hier nenne.

Post-interne Navigation

• Hinweis zu den unten stehenden Link-Codes
• Variante 1: Links und Zeilenumbrüche
• Variante 2: Links in Listenpunkten einer Liste
• Variante 3: Links in Listenpunkten einer Liste - per CSS formatierte Version

---

Hinweis zu den unten stehenden Link-Codes:

target="_blank" sorgt dafür, dass das Linkziel in einem neuen Tab oder Fenster geöffnet wird. Für Blog-interne Linkziele ist der Zusatz nicht nötig, bei externen Linkzielen aber, kann man nur so sicherstellen, dass die Besucher durch Nutzung des Links das eigene Blog weiterhin parallel geöffnet haben und nicht versehentlich den unmittelbaren Zugriff verlieren.

---

Variante 1:

Links und Zeilenumbrüche

Bild zu Variante 1

Code zu Variante 1

<a href="Blog-interne-Linkziel-Adresse">Anzeigetext 1</a>
<br />
<a href="Blog-interne-Linkziel-Adresse">Anzeigetext 2</a>
<br />
<a href="Blog-externe-Linkziel-Adresse" target="_blank">Anzeigetext 3</a>
<br />
<a href="Blog-externe-Linkziel-Adresse" target="_blank">Anzeigetext 4</a>

Erläuterung zum Code der Variante 1:

Diese Aufzählung ist keine ausdrückliche Liste, aber die Links stehen wegen des Zeilenumbruchs <br /> untereinander.

---

Variante 2:

Links in Listenpunkten einer Liste

Bild zu Variante 2

UL-Style in Vorlage "Simple" (7)

Code zu Variante 2

<ul>
<li><a href="Blog-interne-Linkziel-Adresse">Anzeigetext 1</a></li>
<li><a href="Blog-interne-Linkziel-Adresse">Anzeigetext 2</a></li>
<li><a href="Blog-externe-Linkziel-Adresse" target="_blank">Anzeigetext 3</a></li>
<li><a href="Blog-externe-Linkziel-Adresse" target="_blank">Anzeigetext 4</a></li>
</ul>

Erläuterung zum Code der Variante 2:

Dies ist eine ausdrückliche Liste (ul=Ungeordnete Liste, li=Listenpunkt)
Gestylt wird die Liste automatisch durch die Kommandos, die für Listen in Widgets in der jeweiligen Vorlage vorgegeben sind.

---

Variante 3:

Links in Listenpunkten einer Liste - per CSS formatierte Version

Will man eine Liste, wie sie unter Variante 2 steht, anders stylen als üblich, kann man das unter Blogger-Dashboard > Blog-Menü (Pfeil) /oder/ Blog > Design > Vorlage > Anpassen > Erweitert > CSS hinzufügen tun.

Dazu muss man im Quelltext erstmal nachsehen, welchen Namen (ID) das HTML-Gadget hat. Hat man mehrere HTML-Gadgets, werden die nämlich durchnumeriert. Sagen wir mal, die ID des Gadgets wäre HTML1, dann kann man alle Elemente innerhalb des Gadgets von "CSS hinzufügen" aus steuern, indem man die Kommandos einleitet mit #HTML1.widget.HTML.

Ein Style-Beispiel für eine Linkliste

Will man beispielsweise eine Liste haben , die nach links und rechts gleich viel Abstand hat und deren Listenpunkte nicht mit Punkten eingeleitet werden, aber zwischen sich eine Linie haben, dann kann man die folgenden CSS-Kommandos eingeben:

Bild zu Variante 3 - Style-Beispiel

CSS-Code zu Variante 3 - Style-Beispiel

/* Liste: Nicht eingerückt und ohne Punkte */
#HTML1.widget.HTML ul {
padding:0px;
list-style:none;
}
/* Listenpunkte: Rahmenlinie unten */
#HTML1.widget.HTML li {
border-bottom:1px dotted #efefef;
}
/* Letzter Listenpunkt: Ohne Rahmenlinie unten */
#HTML1.widget.HTML li.no-border {
border-bottom:none;
}

Im HTML-Gadget muss man für dieses Style-Beispiel der Variante 3 allerdings noch den letzten Listenpunkt ändern, nämlich so:

Statt:
<li><a href="Blog-externe-Linkziel-Adresse" target="_blank">Anzeigetext 4</a></li>

muss da stehen:
<li class="no-border"><a href="Blog-externe-Linkziel-Adresse" target="_blank">Anzeigetext 4</a></li>

Dadurch wird verhindert, dass auch unter dem letzten Listenpunkt eine Linie auftaucht, die ja nur zwischen den Links stehen soll. Stellt man einen neuen Listenpunkt ein, den man an's Ende der Liste stellt, dann muss dieser neue Link <li class="no-border"> kriegen und der vorige muss geändert werden in <li>.

Ute Ziemes, sg.utez.de, 29.03.2013