Mel's Helpline

Eine Helpline zum Selbstlernkurs bibliothek 2.009

:o)

mit einem Kommentar

Da bin ich wieder, endlich! Auch an dieser Stelle nochmals ein herzliches Dankeschön für alle Genesungswünsche und all die lieben Worte. Leider hat es  wesentlich länger als erwartet gedauert bis ich die Heimreise antreten konnte. Aber seit gestern hat mich die Welt da draußen und somit auch die Bibliothek 2009 wieder.

Nachdem ich richtig angekommen bin werde ich mich sofort an die Nachlese machen und erforschen, was ihr in den vergangenen Wochen alles auf die Beine gestellt habt! Und natürlich stehe ich damit gerne für Fragen, Diskussionen und gemeinsamen neuen Erkenntnissen zur Verfügung! ;)

Geschrieben von Melanie Klöß

7. Oktober 2009 um 14:23

Veröffentlicht in Allgemeines

Getaggt mit

Pause

mit 4 Kommentaren

Leider muss ich gesundheitsbedingt eine mehrwöchige Pause einlegen.

Plese send good vibes by fofurasfelinas (1)

"Plese send good vibes" by fofurasfelinas (1)

Gespannt freue ich mich jedoch schon auf das, was sich in dieser Zeit bei den Teilnehmern der Bibliothek 2.009 entwickelt haben wird :) .

Habt weiterhin viel Erfolg, neue Ideen, Geistesblitze und natürlich eine ganz große Portion Spaß!!

Bis bald ^.~

Melanie

________
(1) “Plese send good vibes” by fofurasfelinas lizensiert unter einer CC-Lizenz (by-nc-nd)

Geschrieben von Melanie Klöß

12. August 2009 um 22:00

Veröffentlicht in Allgemeines

Getaggt mit ,

Ein LibraryThing-Widget für WordPress.com

mit einem Kommentar

Die Frage lautet:

Wie kann ich das LibraryThing-Widget bei WordPress.com einbauen?

Leider lautet die direkte Antwort erst einmal: Gar nicht. Da das Standardwidget von LibraryThing mittels JavaScript eingebunden wird, kann man es leider nicht bei WordPress.com verwenden. Aus Sicherheitsgründen kann man in einem Text-Widget keinen JavaScript-Code einfügen.

Alternatives LibraryThing Widget

Alternatives LibraryThing Widget

Da dieses Problem jedoch nicht nur bei WordPress.com sondern auch bei anderen großen Plattformen (MySpace, LifeJournal) auftaucht, bietet LibraryThing ein alternatives Widget an. Dieses wird mit Hilfe einer anpassbaren Bildadresse erzeugt.

Moment einmal – anpassbare Bildadresse?

In der URL zum Bild werden verschiedenste Informationen angegeben, die von einem Script bei LibraryThing ausgelesen werden und von diesem verwendet werden um daraus ein Bild zu generieren. Diese Bild kann mit Hilfe der Informationen angepasst werden. Es handelt sich dabei also um ein dynamisch erzeugtes Bild.

Die Bildadresse erzeugen

Die Bildadresse des Widgets beginnt immer mit folgender URL:

http://www.librarything.com/gwidget/widget.php?

  

Nach dem Fragezeichen werden die einzelnen Optionen angehängt. Option und zugehöriger Wert werden mit einem Gleichheitszeichen (‘=’) verknüpft. Mehrere Optionen mit einem kaufmännischen “und” (‘&’) aneinandergekettet. Es entsteht damit eine Adresse, die wie folgt aussieht.

http://www.librarything.com/gwidget/widget.php?option1=wert1&option2=wert2

  

In Tabelle 1 findest du einen Überblick über alle verfügbaren Optionen sowie einen Hinweis auf die Werte, welche diese annehmen können. Verpflichtend müssen keine Optionen angegeben werden. Fehlt eine Option wird automatisch der Standard-Wert gesetzt.

Wenn du das Bildwidget mit deinen Büchern füllen möchtest musst du jedoch unbedingt die Option “view=DeinBenutzername” anhängen, wobei du “DeinBenutzername” mit deinem Benutzernamen ersetzt ;) . Ansosnten werden Bücher aus der Bibliothek von Tim Spalding angezeigt.

Achtung auch bei den Farbcodes. Unbedingt nur die 6 Zeichen angeben, nicht aber die Raute ;) (Falsch: #000000 Richtig: 000000)

Tabelle 1 Liste der verfügbaren Optionen und validen Werte für das LibraryThing-Bild-Widget
Option Wert Beschreibung
view= [Benutzername] legt den Account fest, dessen Daten ausgelesen werden sollen (Standard: timspalding)
type= random,recent Beliebige (random) oder neueste (recent) Bücher anzeigen
tag= [Stichwort] Nur Bücher mit dem Stichwort [tag] werden angezeigt
width= [Zahl] Breite in Pixeln (Standard: 200px)
fsize= [Zahl] Schriftgröße (Standard: 9)
font= arial,arialuni,teletype,

palatino,verdana

Verwendete Schriftart (Standard: verdana)
num= [Zahl] Anzahl der anzuzeigenden Bücher (Standard: 10)
hbold= 0,1 Widgettitel im Fettdruck (1) oder normal (0) (Standard:0)
tbold= 0,1 Buchtitel im Fettdruck (1) oder normal (0) (Standard:0)
top= [Text] Widgettitel (Standard: “Random Books From My Library” bzw. “Random Books From My Library Tagged XYZ”)
ac= [FarbCode] Autor: Textfarbe (Standard: 000000 entspricht schwarz)
bc= [FarbCode] Hintergrundfarbe (Standard ffffff entspricht weiß)
tc= [FarbCode] Buchtitel: Textfarbe (Standard: 0000ff entspricht blau)
hc= [FarbCode] Widgettitel: Textfarbe (Standard: 000000)
x= [Zahl] Oberer & Unterer Abstand des Texts zum Rand in Pixeln (Standard: 5)
y= [Zahl] Seitlicher Abstand des Texts zum Rand in Pixeln (Standard: 5)

  

Wie baue ich das Widget ein?

So weit, so gut ;) . Du hast jetzt eine URL zu einem Bild, welches dir Titel aus deiner LibraryThing-Bibliothek anzeigt, und was nun?

Jetzt kannst du das Bild z.B. in der Seitenleiste deines Blogs einbinden. Am einfachsten geht dies, in dem du ein Text-Widget verwendest.

Mit Hilfe des Text-Widgets eine eigene Navigation erstellen

Mit Hilfe des Text-Widgets (nicht nur) eine eigene Navigation erstellen (Klicke zum Vergrößern)

Gehe hierfür in das Administrationsmenu Darstellung > Widgets. Suche in der Liste mit den “verfügbaren Widgets” nach dem “Text“-Widget und ziehe es auf die “Main Sidebar“. Es öffent sich eine Box mit einer einzeiligen Textzeile und einem größeren Textbereich.

Wenn du möchtest, gebe dem Widget einen Titel (Textzeile). In die Textbox kommt der HTML-Code, welcher dafür sorgt, dass das LibraryThing-Bild angezeigt wird (Ersetze “[Benutzername]” mit deinem Benutzernamen ;) :

<img src="http://www.librarything.com/gwidget/widget.php?view=[Benutzername]&num=5&top=Meine Bücher"
 alt="LibraryThing-Bücherliste" />

  

Schick wäre es doch auch, wenn das Bild auf deinen Account verlinken würde, oder? Hierfür muss das Bild mit dem Link zu deinem Profil wie folgt umschlossen werden:

<a href="http://www.librarything.com/profile/[Benutzername]">
  <img src="http://www.librarything.com/gwidget/widget.php?view=[Benutzername]&num=5&top=Meine Bücher"
   alt="LibraryThing-Bücherliste" />
</a>

  

Geschrieben von Melanie Klöß

7. August 2009 um 20:27

Bildschirmfotos einer Webseite erstellen

Hinterlasse einen Kommentar »

Die Frage lautet:

Wie erstelle ich einen Screenshot einer Webseite?

Zuerst beginne ich mit einer kleinen Einführung, wie man Screenshots unter Windows und Mac OS X mit den Tools, welche bei einer Standard-Installation an Bord sein sollten, erstellt.

Windows

Drücke die Druck (Print)-Taste rechts neben den Funktions-Tasten (F1-F12) um ein Screenshot des kompletten Bildschirms zu erstellen. Drücke Alt + Druck um nur das aktive Fenster abzufotografieren. Das Bildschirmfoto wird von Windows automatisch in der Zwischenablage gespeichert.

Öffne z.B. das Programm Paint. Füge den in der Zwischenablage gespeicherten Screenshot mittels gleichzeitigem Drücken von Strg + V in das Zeichenprogramm ein. Du kannst das Bildschirmfoto zusätzlichbearbeiten (zuschneiden, Kommentare einfügen, Schnurrbärte malen ;) ) wenn du möchtest.

Das fertige Bild muss nun nur noch gespeichert werden. Dies geschieht wie üblich über Datei » Speichern oder gleichzeitiges Drücken von Strg + S. Achte beim Speichern auch auf das Format der Datei. Die Datei sollte z.B. als jpeg oder png gespeichert werden.

Mac OS X

Es gibt zwei Möglichkeiten unter Mac OS X einen Screenshot zu erstellen.

  1. Um ein Foto des kompletten Bildschirms zu erstellen, drücke Apfel + Umschalt + 3, möchtest du nur das aktuelle Fenster fotografieren, drücke Apfel + Umschalt + F4. Desweiteren bietet Mac OS X auch noch die Möglichkeit einen selbst ausgewählten Bereich abzufotografieren. Diese Funktion wird mit einem gleichzeitigen Druck von Apfel + Umschalt + 4 initiiert.
    Anders als Windows legt Mac OS X die geschossenen Bildschirmfotos standardmäßig in einer Datei auf dem Desktop ab.
  2. Alternativ kann man unter Mac OS X auch das mitgelieferte Programm “Bildschirmfoto” verwenden. Es findet sich unter Programme » Dienstprogramme » Bildschirmfoto. Unter dem Menupunkt Foto kannst du die Art des Bildschirmfotos auswählen – sehr nützlich ist auch die “Selbstauslöserfunktion“. Gespeichert wird das Bild nun über Ablage » Sichern oder mit der Tastaturkombination Apfel + S.

Und weil ich gerade darüber stolpert bin und es vielleicht für den ein oder anderen Mac-Nutzer interessant ist:  Eine Anleitung, wie man in Mac OS X Screenshots ohne Schatten aufnehmen kann.

Foto der Webseite erstellen

Jetzt musst du nur noch den Browser und die zu fotografierende Webseite öffnen, die Seite eventuell bis zu dem Punkt scrollen der abfotografiert werden soll und nach den weiter oben stehenden Anleitungen einen Screenshot erstellen.

Tipp: Möchtest du möglichst viel von der Webseite auf deinem Bildschirmfoto speichern, wechsele vorher in den Vollbildmodus oder maximiere das Fenster. Im Internet Explorer und Firefox unter Windows kannst du dies mit dem Druck auf F11 erreichen.

Nachtrag: Gehörst du zu der Menge der Linux-Benutzer? Da es bei diesem “Schlag von Betriebssystem” etliche Distributionen (Varianten von Linux) und auch andere relevante Faktoren (welcher Window-Manager wird verwendet?) gibt, die ein einheitliche Schnellanleitung erschweren, habe ich mich bei dieser Anleitung auf Windows und Mac OS X beschränkt. Solltest du jedoch gar nicht weiter kommen hinterlasse doch einfach einen Kommentar ;)

Geschrieben von Melanie Klöß

3. August 2009 um 22:44

Verlinkter Name beim Kommentieren

Hinterlasse einen Kommentar »

Die Frage lautet:

Was muss ich machen, damit mein Name unter einem Kommentar auf meinen Blog/meine Webseite verlinkt?

Der Name, der beim Kommentieren hinterlassen ist - soll verlinkt sein.

Bild 14.2: Der Name, der beim Kommentieren hinterlassen wird, soll verlinkt sein.

Anleitung:

Öffne über die WordPress-Leiste “Mein Konto” » “Profil bearbeiten“. Scrolle etwas nach unten bis du zu den Kontaktinformationen kommst. Trage nun dort unter Website deine Blogadresse (oder eine andere Homepageadresse), zu der dein Name verlinkt werden soll ein. Anschließend speichere das Profil über  ”Profil aktualisieren“.

Bild 14.1 Trage unter Kontaktinformationen deine Webseite ein (Klicke zum Vergrößern)

Bild 14.1: Trage unter "Kontaktinformationen" » "Website" deine Blogadresse ein (Klicke zum Vergrößern)

Geschrieben von Melanie Klöß

1. August 2009 um 23:17

Veröffentlicht in Anleitungen, WordPress.com

Getaggt mit ,

Einfügen eines Bildes von Flickr – Variante II

mit einem Kommentar

Die Frage lautet:

Wie kann ich ein Bild von Flickr in meinen Artikel einfügen?

Hier beschreibe ich nun die zweite Möglichkeit Bilder von Flickr in einen WordPress-Artikel einzufügen. Alternativ kannst du dir auch Variante I ansehen.

Du hast dir auf Flickr ein Bild ausgesucht, welches unter einer Creative Commons Lizenz veröffentlicht wurde und somit von dir weiterverbreitet werden kann.

  1. Über dem Bild befindet sich eine Reihe mit kleinen grauen Icons. Klicke auf die Lupe und öffne damit die Seite, auf der du dir “Alle Größen” anzeigen lassen kannst.

    Screenshot Flickr Lupe (Klicke zum Vergrößern)

  2. Wähle unter den verfügbaren Größen jene aus, die am ehesten der Größe entspricht, welche du in deinem Blog anzeigen lassen möchtest.Unter dem Bild siehst du auch noch mal groß die Bedinungen (Box CC – Some Rights Reserved und runde Kreise) unter denen das Bild weiterverbreitet werden darf [Im Beispiel: BY - Urheber muss genannt werden; durchgestrichenes Dollarsymbol (NC) - Keine kommerzielle Nutzung; Umgekehrtes C mit Pfeil (SA) - Weitergabe unter gleichen Bedingungen].Kopiere den HTML-Code des Fotos (unterhalb des Bildes unter 1.) z.B. in dem du mit der Maus in das Textfeld klickst, anschließend gleichzeitig STRG+A (alles makieren) und darauffolgend gleichzeitig STRG+C (kopieren) drückst (Der Mac-Benutzer verwendet hier anstelle von STRG die Apfeltaste).
  3. Screenshot Flickr Alle Größen

    Screenshot Flickr Alle Größen (Klicke zum Vergrößern)

  4. Gehe nun zu der WordPress-Administration, in der du gerade den Artikel schreibst. Wechsele in den Reiter HTML, welchen du auf der rechten Seite über dem Textfeld findest (siehe Bild). Füge nun den zuvor kopierten HTML-Code in das Textfeld ein (gleichzeitiges drücken von STRG+V bzw. Apfeltaste+V)

    Screenshot WordPress Von URL einfügen (Klicke zum Vergrößern)

    Screenshot WordPress HTML-Ansicht (Klicke zum Vergrößern)

  5. Wechsele wieder zurück in den Grafischen Modus des Editors und betrachte das Ergebnis. Das Bild ist bei Verwendung des HTML-Codes automatisch mit der zugehörigen Flickr-Seite verlinkt. ;) Darüber brauchen wir uns also keine Gedanken mehr zu machen.

    Screenshot WordPress eingefügtes Bild (Klicke zum Vergrößern)

    Screenshot WordPress eingefügtes Bild (Klicke zum Vergrößern)

  6. Um einen Bildtitel einzufügen und die Ausrichtung des Bildes zu verändern klicke auf das Bild und anschließend auf das erscheindende Bild-Icon.
    Screenshot WordPress Bildeigenschaften öffnen

    Screenshot WordPress Bildeigenschaften öffnen

    Es erscheint nun der “Bild bearbeiten”-Dialog. Wie oben bereits erwähnt ist im Textfeld zu Link-URL bereits der korrekte Verweis zur Flickr-Seite des Bildes angegeben.

    Screenshot WordPress Bild bearbeiten-Dialog (Klicke zum Vergrößern)

    Screenshot WordPress "Bild bearbeiten"-Dialog (Klicke zum Vergrößern)

    Wähle die Ausrichtung aus ud gebe dem Kind einen Namen. Der Bildtitel (roter Rahmen) erscheint übrigens nur dann, wenn du deinen Mauszeiger etwas länger über dem Bild plazierst. Die Bildunterschrift (grüner Rahmen) wird hingegen immer direkt unter dem Bild angezeigt:

    Screenshot WordPress Bildtitel und -unterschrift (Klicke zum Vergrößern)

    Screenshot WordPress Bildtitel und -unterschrift (Klicke zum Vergrößern)

Geschrieben von Melanie Klöß

21. Juli 2009 um 16:12

History of the Internet

Hinterlasse einen Kommentar »

So als Wissenshappen für diese Woche habe ich hier für euch ein sehr interessantes und informatives Video von Picol über die Geschichte und Entwicklung des Internets.

Das ursprünglich englische Video gibt es auch in einer (inoffiziellen?) deutschen Synchronisation.

Geschrieben von Melanie Klöß

21. Juli 2009 um 13:46

Veröffentlicht in Informatives

Getaggt mit , ,

Einfügen eines Bildes von Flickr – Variante I

mit 3 Kommentaren

Die Frage lautet:

Wie kann ich ein Bild von Flickr in meinen Artikel einfügen?

Du hast dir auf Flickr ein Bild ausgesucht, welches unter einer Creative Commons Lizenz veröffentlicht wurde und somit von dir weiterverbreitet werden kann.

  1. Über dem Bild befindet sich eine Reihe mit kleinen grauen Icons. Klicke auf die Lupe und öffne damit die Seite, auf der du dir  “Alle Größen” anzeigen lassen kannst.

    Screenshot Flickr Lupe (Klicke zum Vergrößern)

  2. Wähle unter den verfügbaren Größen jene aus, die am ehesten der Größe entspricht, welche du in deinem Blog anzeigen lassen möchtest.Unter dem Bild siehst du auch noch mal groß die Bedinungen (Box CC – Some Rights Reserved und runde Kreise) unter denen das Bild weiterverbreitet werden darf [Im Beispiel: BY - Urheber muss genannt werden; durchgestrichenes Dollarsymbol (NC) - Keine kommerzielle Nutzung; Umgekehrtes C mit Pfeil (SA) - Weitergabe unter gleichen Bedingungen].
    Kopiere die URL des Fotos (unterhalb des Bildes unter 2.) z.B. in dem du mit der Maus in das Textfeld klickst, anschließend gleichzeitig STRG+A (alles makieren) und darauffolgend gleichzeitig STRG+C (kopieren) drückst (Der Mac-Benutzer verwendet hier anstelle von STRG die Apfeltaste).
  3. Screenshot Flickr Alle Größen

    Screenshot Flickr Alle Größen (Klicke zum Vergrößern)

  4. Gehe nun zu der WordPress-Administration, in der du gerade den Artikel schreibst. Klicke das Symbol mit dem du in das “Bild einfügen“-Fenster gelangst (wie im Kurs, Lektion 2, der Aufgabe für Mutige beschrieben).Öffne den zweiten Reiter, “Von einer URL“.  Füge die zuvor kopierte Bild-URL in das oberste Textfeld, “Bilddatei-URL”, ein.  Gebe dem Kind einen Namen (Hier kannst du z.B. gut den Originaltitel und den Urheber des Bildes angeben ;) ) und wähle die Ausrichtung.Um die Vertragsbedingungen mit Flickr nicht zu verletzten, verknüpfe das Bild mit seiner Flickr-Bildseite.
    Screenshot WordPress Von URL einfügen (Klicke zum Vergrößern)

    Screenshot WordPress "Von URL einfügen" (Klicke zum Vergrößern)

    Anschließend brauchst du nur noch auf “In den Artikel einfügen” klicken um das Bild einzufügen ;) .

Geschrieben von Melanie Klöß

18. Juli 2009 um 16:50

Manuelles Erstellen einer seitlichen Navigationsleiste mittels “Links”-Widget

Hinterlasse einen Kommentar »

Hier folgt nun die Anleitung zu einer zweiten Methode eine Seitennavigation zu erstellen, die neben den einzelnen Seiten auch die Blog-Hauptseite enthält. Nachdem ich am Dienstag beschrieben habe, wie man dies mit einem “Text”-Widget bewerkstelligt, baut die heutige Methode auf das “Links”-Widget auf.

Diese Methode finde ich persönlich etwas umständlicher und es gibt auch einen kleinen Hacken, den ich bisher nur mit einer etwas unschönen Nummerierungstaktik lösen konnte. So oder so ist die Anleitung jedoch für beliebige (alphabetisch darzustellende) Links hilfreich.

Schritt 1: Anlegen einer Linkkategorie

Zuerst musst du in der WordPress-Administration unter Links > Linkkategorien eine neue Kategorie anlegen, unter der später alle in der Seitennavigation auftauchenden Links gespeichert werden:

Lege eine neue Kategorie für die Seitennavigation an (Klicke zum Vergrößern)

Lege eine neue Kategorie für die Seitennavigation an (Klicke zum Vergrößern)

Der “Link Category name“  wird später die Überschrift der seitlichen Box sein. Die Beschreibung ist optional, wird – soweit ich es bisher gesehen habe – nur in der Administration angezeigt.

Wie bei fast Allem gilt: Keine Bange, alles kann nachträglich noch geändert werden. ;)

Schritt 2: Anlegen der Links

Nun gehe in das Administrationsmenu Links > Add New. Lege nun hier nacheinander die Links an, die in der Seitennavigation auftauchen sollen (z.B. Startseite, Über, Photos,…”).

Füge nacheinander alle Links hinzu (Zum Vergrößern klicken)

Füge nacheinander alle Links hinzu (Zum Vergrößern klicken)

Fülle die Felder Name und Web-Adresse mit den entsprechenden Daten aus. Optional kannst du hier auch eine Beschreibung (grüner Kasten) des Links angeben. Was mit ihr geschieht, kannst du später einstellen.

Wichtig ist nun, dass du alle Links in der zuvor extra angelegten Linkkategorie speicherst. Setze hierfür das Häkchen an der entsprechenden Kategorie.

Schritt 3: Anlegen des Widgets

Nachdem du alle Links in die Datenbank eingepflegt hast, begebe dich in den  Administrationsbereich Darstellung > Widgets. Suche nun in der Box “Verfügbare Widgets” nach dem “Links”-Widget und ziehe dieses mit festgehaltener Maustaste auf die “Main Sidebar”.

Anlegen und Einstellen des Links-Widgets (Klicke zum Vergrößern)

Anlegen und Einstellen des "Links"-Widgets (Klicke zum Vergrößern)

Jetzt musst du dort nur noch die richtige Linkkategorie einstellen. Die zuvor extra für die Seitennavigation angelegte Kategorie kannst du in dem Dropdown-Menu auswählen. Unter dem Menu sind vier Checkboxen. Der Linkname sollte angezeigt werden ;) (Häkchen roter Kasten).

Einstellungen des Links-Widgets

Einstellungen des "Links"-Widgets

Darunter befindet sich die Checkbox, “Show Link Description”, mit der du einstellen kannst, ob die Linkbeschreibung permanent (Haken gesetzt) oder nur beim Überfahren des Links mit der Maus (Haken nicht gesetzt) angezeigt wird. Auf die beiden anderen Einstellungen gehe ich jetzt einfach mal nicht ein – das wäre ein Kapitel für sich ;) , was jedoch nicht heißt – dass du es nicht einfach ausprobieren kannst.

Drücke nun auf Speichern und betrachte das Ergebnis auf deinem Blog. Gefällt dir der Ort an dem das Widget auftaucht? Falls nicht – einfach ausprobieren und im Widget-Menu das Widget auf der (u.U. den verschiedenen Sidebars – das ist Theme-abhängig)  Sidebar verschieben, speichern, ansehen, …

Problem: Linkreihenfolge

Beim Ansehen der neuen Seitennavigationsleiste ist es dir wahrscheinlich direkt ins Auge gesprungen:

Alphabetische Reihenfolge des Links-Widgets

Alphabetische Reihenfolge des Links-Widgets

Die Links in der Seitennavigation sind alphabetisch angeordnet. Das mag für beliebige Links gut und schön sein, bei einer Seitennavigation ist eine bestimmte Hierarchie jedoch schon nicht unpraktisch. Was also nun?

Nummerierte Navigation

Nummerierte Navigation

Lösung 1: Nummerierung

Eine kleiner, schneller, schmutziger Trick (“quick’n'dirty hack”) um das Problem zu beheben ist es, wenn du die Links in der gewünschten Reihenfolge durchnummerierst.

Lösung 2: Verwende ein Text-Widget

Oder du greifst auf  ein Text-Widget zurück. Damit kannst du schnell eine Navigation erstellen, wie sie dir gefällt. Wie das geht, wird in “Manuelles Erstellen einer seitlichen Navigationsleiste mittels Text-Widget” beschrieben.

Lösung 3: ???

Kennst du vielleicht noch eine andere Lösung? Immer her damit! :)

Geschrieben von Melanie Klöß

9. Juli 2009 um 22:36

Manuelles Erstellen einer seitlichen Navigationsleiste mittels Text-Widget

mit einem Kommentar

Im folgenden findest du eine kleine Anleitung, wie du mit WordPress deine eigene kleine Seitennavigation erstellst. Hierfür verwende ich das Text-Widget von WordPress, welches du unter Darstellung > Widgets findest.

Mit Hilfe des Text-Widgets eine eigene Navigation erstellen

Mit Hilfe des Text-Widgets eine eigene Navigation erstellen (Klicke zum Vergrößern)

Um die Navigation zu erstellen, wirst du ein wenig HTML verwenden müssen. Habe davor keine Angst – es ist leichter als du vielleicht vermutet hast.

Zuerst begibst du dich nun in der Administration in das Menu Darstellung > Widgets.

Erstellen der Navigation mittels Text-Widget

Unter “Verfügbare Widgets” suchst du den Balken, auf dem “Text” steht und ziehst ihn auf das Feld “Main Sidebar” auf der rechten Seite (Bei manchen Themes gibt es auch mehrere, verschiedene Sidebars – einfach ausprobieren, wo dir diese Navigation am besten gefällt ;) ).

Du erhälst nun eine Box mit zwei Eingabefeldern. In dem oberen, einzeiligen Eingabefeld kannst du den Titel deiner Seitennavigation eingeben (z.B. Navigation, Seitennavigation, …). In das größere Textfeld kommt nun der HTML-Code für deine Navigation.

Mache dir am besten zuvor in einem Texteditor (z.B. Notepad oder Word) eine Liste mit den  zu verlinkenden Seiten deines Blogs, welche sowohl die Adresse (URL = “http://xyz.wordpress.com/seite1″) als auch den zu verlinkenden Text/Namen und einen optionalen Beschreibungstext der Seite enhält (z.B. “Startseite”).

Aus allen Seiten und Adressen musst du nun die Links erstellen. Links in HTML sind wie folgt aufgebaut (wie du vielleicht schon aus den Kommentaren weißt):

<a href="http://xyz.wordpress.com" title="Beschreibungstext klick mich">Name</a>

Du kannst die Beschreibung, title=”Beschreibungstext klick mich”, auch weglassen, sie ist optional. Falls du sie einbindest erscheint sie beim Überfahren des Links mit der Maus in einer kleinen Box.

Damit die Links nicht nur einfach aneinander gereiht werden, musst du jetzt noch Zeilenumbrüche einfügen. Dies erreichst du durch den HTML-Tag (Die Befehle in den eckigen Klammern heißen “Tag”) “<br />“. Diesen stellst du hinter jeden Link, so dass du eine Liste dieser Art bekommst:

<a href="http://xyz.wordpress.com/" title="Gehe zur Startseite des Blogs">Startseite</a> <br />
<a href="http://xyz.wordpress.com/seite2" title="Informationen über meinen Blog">Über</a> <br />
<a href="http://xyz.wordpress.com/seite3" title="Informationen über den Autor">Autor</a> <br />

Diesen Code fügst du in die untere Textbox ein. Nun klickst du auf “Speichern” und schaust dir das Ergebnis in deinem Blog an. :) Natürlich kannst du dort auch Seiten außerhalb des Blogs auf WordPress verlinken, z.B. deine Kontaktseite auf der offizielle Homepage deiner Bibliothek oder dein Profil eines sozialen Netzwerkes (z.B. MeinVZ oder Wer-Kennt-Wen).

Fortgeschrittene Navigation

In manchen Themes siehst du vielleicht einen Unterschied zwischen deinen Links und den Links der voreingestellten Blog-Rolls. Dies liegt daran, dass du deine Links nur mit einem Zeilenumbruch getrennt hast. Die Seitenelement werden normalerweise als Liste ausgegeben.

Hierfür musst du alle Links in einen “<ul>“-Container (ul = unordered list – ungeordnete Liste)  und desweiteren jeden einzelne Link nochmals in einen “<li>“-Container (li = list item – Listenelement) packen. Damit sieht der HTML-Quelltext deiner Navigation wie folgt aus:

<ul>
 <li>
  <a href="http://xyz.wordpress.com/" title="Gehe zur Startseite des Blogs">Startseite</a>
 </li>
 <li>
  <a href="http://xyz.wordpress.com/seite2" title="Informationen über meinen Blog">Über</a>
 </li>
 <li>
  <a href="http://xyz.wordpress.com/seite3" title="Informationen über den Autor">Autor</a>
 </li>
</ul>

Geschrieben von Melanie Klöß

7. Juli 2009 um 17:43

Veröffentlicht in Anleitungen, WordPress.com

Getaggt mit , , ,

Follow

Bekomme jeden neuen Artikel in deinen Posteingang.