korsti.de/blog

Favicons als Blogroll mit WordPress-Bordmitteln

favicon-blogroll

Die Umstellung meiner Blogroll hat nur wenige Minuten Arbeit in Anspruch genommen. Dass eine Umstellung von Textlinks nach Favicons so leicht und sogar mit WordPress-Bordmitteln funktioniert, hatte ich nicht gedacht. Zuerst suchte ich ein Plugin, das den Prozess automatisiert, aber Google spuckte mir haufenweise Ergebnisse aus, die die manuelle Methode erklärten.

Und so funktioniert es

Im Adminbereich auf »Blogroll« klicken und einen Link bearbeiten. Jetzt die erweiterten Einstellungen aufklappen und als »Bild-Adresse« die Favicon-URL der Link-Website eingeben. Nur noch abspeichern und fertig. Standardmäßig zeigt WordPress nur noch das Bild an, und nicht den Namen der Website.

Stylesheet-Anspassung

Damit die Blogroll anschaulich wird, sollte sie einheitlich aussehen. Dazu habe ich folgendes Stylesheet verwendet:

/* BLOGROLL */
#linkcat-2 li { float: left; }
#linkcat-2 li img { padding: 2px; width: 16px; height: 16px; border: none; }

float:left; bewirkt, dass die Favicons nicht untereinander, sondern nebeneinander angezeigt werden. Durch padding: 2px; kleben sie nicht eng aneinander und durch border: none; verschwindet der Link-Rahmen. Wichtig ist die Angabe der Größe width: 16px; height: 16px;. Zwar werden Favicons im Browser nur mit 16 × 16 Pixel angezeigt, dennoch können die eingebundenen Grafiken größer sein.

That’s it.

20. Oktober 2007, 18.41 Uhr Kommentar schreiben Trackback

11 Reaktionen zu “Favicons als Blogroll mit WordPress-Bordmitteln”

Trackbacks

Kommentare

  1. Gerd-E. am 24. Oktober 2007 um 10.17 Uhr #

    Eine gute Idee, macht optisch was her und spart Platz ;-)


  2. Manuel H. am 14. Januar 2009 um 23.37 Uhr #

    Könntest Du mir sagen, welche Stylesheet bearbeitet werden muss, bzw. wo finde ich diese dann auch?


  3. Marcel am 15. Januar 2009 um 07.09 Uhr #

    Könntest Du mir sagen, welche Stylesheet bearbeitet werden muss, bzw. wo finde ich diese dann auch?

    Bearbeitet werden muss das Stylesheet in deinem Theme-Ordner (wordpress-verzeichnis/wp-content/themes/theme-verzeichnis/style.css).


  4. Manuel H. am 16. Januar 2009 um 02.11 Uhr #

    Danke Dir für die schnelle Antwort :)

    Nun habe ich noch eine Frage, ich habe derzeit im Blogroll vor jedem Link einen grünen Punkt und weiß nicht, wie ich diesem weg bekomme. Vielleicht weißt Du ja eine Lösung? Wäre wirklich nett von Dir.


  5. Marcel am 16. Januar 2009 um 07.11 Uhr #

    Nun habe ich noch eine Frage, ich habe derzeit im Blogroll vor jedem Link einen grünen Punkt und weiß nicht, wie ich diesem weg bekomme.

    Wenn deine Blogroll-Liste auch die ID #linkcat-2 hat, dann probier’s mit Folgendem:

    #linkcat-2 { list-style-type: none; }

    Das kommt aber ganz auf dein Theme an, und woher der Punkt kommt…


  6. EPICENTER am 2. Juli 2009 um 11.56 Uhr #

    Hallo!
    Vielen Dank für den Tipp, genau so etwas habe ich gesucht, dann kann ich demnächst das Feature wieder aktivieren!
    Gruß Martin


  7. Lesezirkel am 27. Juli 2009 um 12.58 Uhr #

    Hallo,
    ein super Tipp vielen dank dafür!
    lg


  8. Manu am 20. Oktober 2009 um 09.08 Uhr #

    Hi Korsti,
    ich fande gerade deine Anleitung. Was mich daran sehr interessiert ist die Tatsache, dass ich mein Blogroll halt selber gestalten kann. Aber ich für meinen Fall möchte die Favicons gerne größer, was ja Kein Problem darstellt. Allerdings ist es so, dass ich kein normales WordPressTheme benutze, sondern ein spezielles Design. Muss ich die Anpassung, die du im CSS gemacht hast, einfach in mein bestehendes StyleSheet einfügen und verträgt sich das mit dem anderen Design. Ansonsten klasse und nachvollziehbare Anleitung auch für Anfänger. Danke dir für eine Antwort. Manu