So kannst du dir ganz einfach eine kostenlose Blogroll bauen

40 Kommentare

Vor kurzem habe ich ja erzählt, dass ich hier jetzt wieder eine Blogroll eingerichtet habe – so wie in den guten alten Zeiten. 😉
Diese Sammlung von Lieblingsblogs hat unglaublich viele positive Rückmeldungen bekommen und auch das Interesse an einem entsprechenden Tutorial zum Nachbauen war groß – here we go! 🙂

Blogroll – Lieblingsblogs auf vom Landleben

Wie funktioniert so eine Blogroll und wie baust du sie?

In der einfachsten Form ist eine Blogroll ja nur eine Auflistung von Links zu deinen Lieblingsblogs. So eine Liste kannst du easy-peasy mit den Bordmitteln von WordPress oder Blogger bauen.

Interessant wird es, wenn du dazu auch den neusten Artikel von jedem Blog anzeigen lassen möchtest. Ich selber mag dieses Feature sehr gerne, weil es die Blogroll einfach „lebendiger“ macht und von jedem Blog mehr Persönlichkeit rüberkommt, als wenn einfach nur sein Name dort steht.

Und wie kommst du an den jeweils letzten Artikel ran? – Indem du den RSS-Feed des Blogs anzapfst. Grob gesagt, ist so ein Feed eine maschinenlesbare Darstellung deines Blogs. Sie sieht nicht schön aus, ist in dem anfangs etwas kryptisch wirkenden XML geschrieben und gar nicht dafür gedacht, dass du selbst sie liest. Feedreader greifen darauf zu – und wir jetzt auch für unsere Blogroll. 🙂

RSS-Feed von vom Landleben

So sieht ein Ausschnitt aus dem RSS-Feed meines Blogs auf (https://vom-landleben.de/feed)

Keine Sorge, wir programmieren uns das in diesem Tutorial jetzt nicht selber. 😉 Stattdessen greifen wir auf ein Plugin zurück und passen das so an, dass es perfekt zu deinem Blog passt.

Für Blogrolls in WordPress gibt ein kostenpflichtiges Plugin namens „Yet Another Blogroll“ – aber ich habe auch eine kostenlose Alternative gefunden. Die nutze ich selbst hier und bin soweit zufrieden damit. 🙂

Das folgende Tutorial richtet sich an selbstgehostete WordPress-Blogs. Wie das mit einer Blogroll bei wordpress.com oder Blogger ausschaut, weiß ich leider nicht.

1. Installiere das Plugin „Feedzy RSS Feeds Lite“

Du findest es im Plugin-Verzeichnis von WordPress: Feedzy RSS Feeds Lite
Natürlich kannst du es auch direkt innerhalb von WordPress installieren, indem du auf Plugins –> Installieren gehst und dort nach „Feedzy RSS Feeds Lite“ suchst.

Nachdem du das Plugin aktiviert hast, findest du links im Menü einen neuen Eintrag namens „Feedzy RSS“. Hier hast du die Möglichkeit, verschiedene Kategorien für deine Feeds anzulegen – ich selber nutze diese Option allerdings nicht.

2. Erstelle eine neue Seite für deine Blogroll

Lege eine neue Seite an und nenne sie beispielsweise „Blogroll“ oder „Lieblingsblogs“.

In der Menüleiste oberhalb des Textbereichs ist ein roter Button von Feedzy hinzugekommen:

Tutorial: Blogroll in WordPress mit Feedzy RSS Feeds Lite

Über den roten Button kannst du einen neuen Feed hinzufügen

3. Füge die Feeds deiner Lieblingsblogs hinzu

Über einen Klick auf besagten Knopf öffnet sich ein PopUp-Fensterchen mit einem Formular:

Tutorial: Blogroll mit Feedzy RSS Feeds Lite – WordPress-Plugin

Im PopUp kannst du die Feeds deiner Lieblingsblogs eintragen und bestimmen, wie die Blogroll aussehen soll

Für meine Blogroll verwende ich die folgenden Einstellungen:

  • Feeds URLs: die URL eine Blogfeeds, bspw. https://vom-landleben.de/feed
    Theoretisch sollte man mehrere Feeds kommasepariert eintragen können. Das hat bei mir leider nicht funktioniert, da dann immer nur der Feed des letzten Blogs angezeigt wurde. Daher hinterlege ich jeden Feed einzeln – darauf gehe ich weiter unten nochmal ein.
  • Anzahl der darzustellenden Elemente: 1
    Das ist die Anzahl der Artikel pro Blog.
  • RSS-Titel darstellen? Ja
    Der Blogtitel.
  • For how long we will cache the feed results: 12 Hours
  • Links können im selben Fenster oder einem neuen Tab geöffnet werden: Auto
  • Titel nach X Zeichen abschneiden: [freilassen]
  • Veröffentlichungsdatum und Autorname anzeigen? Ja
  • Kurzbeschreibung (Zusammenfassung) des Elements anzeigen? Nein
    Gerade bei längeren Blogrolls würde das schnell unübersichtlich werden, finde ich.
  • Kurzbeschreibung (Zusammenfassung) nach X Zeichen abschneiden: [freilassen]
  • Erstes Bild – wenn vorhanden – des Inhalts anzeigen? Nein

Über „Insert Shortcode“ fügst du diesen Eintrag deiner Blogroll hinzu.

Wie gesagt, das war jetzt nur ein Blog. Aus irgendwelchen Gründen funktionierte es zumindest bei mir leider nicht, mehrere URLs auf einmal zu hinterlegen. Daher habe ich diese Einstellungen für jeden einzelnen Blog wiederholt. Um mir dabei aber nicht einen Wolf klicken zu müssen, bin ich in die HTML-Ansicht des Beitrags gewechselt und habe mir die Zeile mit dem entsprechenden Code kopiert, um dort immer nur die URL des Blogs zu ändern:

[ feedzy-rss feeds="https://vom-landleben.de/feed" max="1" feed_title="yes" refresh="12_hours" meta="yes" summary="no" thumb="no" ]

Wie finde ich denn die Feed-URL meiner Lieblingsblogs heraus?

Viele Blogs haben ein RSS-Symbol, über das du an die entsprechende URL kommst:

Icon für den RSS-Feed

Was aber machst du, wenn einer deiner Lieblingsblogs kein entsprechendes Icon besitzt? – Im Zweifelsfall kannst du versuchen, über die Standardadressen an die URL des Feeds heranzukommen.

  • Bei selbstgehosteten WordPress-Blogs ist http://domain.de/feed der Standard
  • Bei wordpress.com ist es http://domain.wordpress.com/feed
  • Bei Blogger findest du den Feed unter http://domain.blogspot.com/feeds/posts/default

Jetzt wird’s hübsch

So weit, so gut. Du hast jetzt erfolgreich eine Liste deiner Lieblingsblogs zusammengestellt… aber so richtig schick und 100%ig passend zu deinem Bloglayout ist die noch nicht, oder?

Kein Problem! 🙂 Schließlich lässt sich das ja mit ein paar Prisen CSS ändern.

Für die folgenden Anpassungen ist es hilfreich, wenn du dich grundlegend mit HTML und CSS auskennst.

Das nötige CSS kannst du entweder in die style.css deines Themes packen oder – sofern dein Theme so etwas anbietet – in den Bereich für „Custom CSS“ schreiben.

Welche HTML-Klassen die einzelnen Bestandteile deiner Blogroll haben, findest du im Browser heraus: mach einen Rechtsklick auf einen Eintrag in der Blogroll, wähle „Untersuchen“ und schon öffnet sich die HTML-Ansicht in einem zusätzlichen Bereich.

Ich gebe dir jetzt einfach mal mein eigenes CSS meiner Blogroll an die Hand – die Farben solltest du natürlich noch an deinen Blog anpassen, ansonsten habe ich alles kommentiert. 🙂


/* ### Lieblingsblogs - Feedzy RSS Feeds Lite ### */

/* Rahmen um jeden Eintrag */
.feedzy-rss { 
   border: 1px solid #ccc; 
   padding: 10px 20px;
   margin-bottom: -20px;
}

/* Abstände und Linie beim jeweils letzten Artikel entfernen */
.feedzy-rss .rss_item { 
   border: 0; 
   padding: 0 !important; 
   margin: 0;
}

/* Icon vor dem jeweils letzten Artikel einfügen */
.feedzy-rss .rss_item:before { 
   content: "\f0f6";
   font-family: FontAwesome; 
   background: none !important; 
   font-size: 24px; 
   color: #666; 
   margin-right: 10px; 
   vertical-align: middle;
}

/* störende Abstände entfernen */
.feedzy-rss .rss_header,.feedzy-rss ul { 
   margin: 0;
}

/* Name des Blogs */
.feedzy-rss h2 { 
   font-size: 20px; 
   margin: 0;
}

/* Beschreibung des Blogs */
.feedzy-rss .rss_description { 
   display: block;
   font-size: 16px;    
   font-weight: normal;
   font-style: italic;
}

/* Überschrift des letzten Beitrags */
.feedzy-rss .rss_item .title {
   font-family: 'Raleway', sans-serif;
}

/* Responsiveness: erst auf größeren Bildschirmen soll der Artikel neben dem Blognamen stehen, ansonsten untereinander */
@media only screen and (min-width: 767px) { 
   .feedzy-rss .rss_header, .feedzy-rss ul { 
      display: inline-block; 
      vertical-align: top; 
      width: 50%; 
   }

   .feedzy-rss .rss_content { 
      margin-left: 34px; 
   }
}

Wichtig: damit das Icon vor dem Artikel auftaucht, musst du Font Awesome einbinden. Sofern du das noch nicht getan hast, brauchst du die folgende Zeile im head-Bereich deines HTMLs (zu finden in der header.php in deinem Theme):

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Hat dir dieser Beitrag gefallen? Dann nimm ihn doch mit auf Pinterest und speichere ihn, damit du ihn später wiederfindest und auch andere Leute ihn entdecken! 🙂

Tutorial: Blogroll für dein WordPress-Blog erstellen

Ich hoffe, dieses Tutorial war hilfreich für dich! 🙂

Dieser Beitrag wurde bereits 40mal kommentiert - was denkst du? Hau in die Tasten! 🙂

Anne Schwarz

Geschrieben von Anne Schwarz

Merry meet! Ich bin 31 Jahre alt und wohne mit meinem Mann, Hund und Katze in einem kleinen Dorf im Bergischen Land. Das ♥ schlägt für die Natur, die Fotografie & das Schreiben. Ich bin viel draußen unterwegs, baue unser eigenes Obst und Gemüse an und tobe mich gern kreativ aus - egal ob mit Papier oder Quellcode. » Magst du mehr erfahren?

40 Kommentare

  1. Ich habe mich schon gefreut, aber dann wieder gemerkt, dass ich ja wordpress.com habe – ich muss dringend umziehen, ich habe schon länger überlegt, eine solche Blogroll einzurichten..trotzdem danke für das Tutorial, irgendwann komm ich dann drauf zurück 😀

    Antworten

    • Mhm, ein selbstgehostetes WordPress ist so viel besser als wordpress.com!
      Viel Erfolg schon mal beim Umziehen! 🙂

      Antworten

  2. der einzige jammer von wordpress.com ist ja, dass man keine externen plugins installieren kann. das finde ich schon immer schade. deine blogroll finde ich auch wirklich super. für mehr miteinander in der blogosphäre. back to the roots 🙂

    Antworten

  3. Hey.
    finde ich super, dass es wieder Blogger gibt, die sich nicht nur selbst den Bauch pinseln.
    Ich habe auch seit einigen Wochen wieder eine Seite mit meinen Lieblingsblogs – zum Teil passend zu meinem Thema aber auch quer durch das Gemüsebeet. Alle Blogger, die ich nach einem Foto gefragt habe, um es auch visuell etwas interessanter zu machen, haben sich riesig gefreut. Ich glaube in der Bloggerwelt fehlt die Liebe 😉

    Ich arbeite mit dem Visual-Composer, weil ich weder Lust noch Zeit habe mich mit dem Schreiben von Websites zu beschäftigen. So eine Baukastenvariante geht eben um einiges schneller 🙂

    Liebe Grüße > sara

    Antworten

    • Hallo sara,

      ah, das ist bei dir ja auch eine schöne Idee – wo finde ich die Seite denn bei dir? Ich liebe es ja, mich durch solche Lieblingsblog-Listen durchzuklicken. 🙂

      Liebe Grüße
      Anne

      Antworten

  4. Hallo Anne,

    Dank Dir für das Tutorial. Jetzt habe ich meine total veraltete, noch manuell erstellte Blogroll wieder auf den Stand gebracht. Sieht richtig schick aus – auch dank Deines CSS-Beispiels. Man muss das Rad ja nicht komplett neu erfinden. 😉

    Lieben Gruß
    Sylvi

    Antworten

  5. Pingback: Der linkische Mittwoch - ° Verenas Welt °° Verenas Welt °

  6. Pingback: angeltearz liest - Aktion | Gebloggt aus dem November 2017

  7. Hallo Anne,

    vielen Dank für das Tutorial!! Ich hab es gleich ausprobiert, und es klappt grundsätzlich. Nur eine doofe Frage: Wie bindest du die Seite in der Sidebar ein? Geht das über das HTML-Widget oder erstellst du ein Menü? (Damit klappt bei mir nämlich leider nicht…)

    🙁

    Ich bin zu doof, fürchte ich. Hast du eine Idee?

    Lieben Dank,
    Sonja

    Antworten

    • Hallo Sonja,

      mh, meinst du den Link zu der Blogroll-Seite, oder magst du die Blogroll selber direkt in deiner Sidebar anzeigen?

      Den Link zur Seite habe ich ganz normal ins Menü integriert. Also über Design –> Menüs, darüber erzeuge ich meine Navigationen. Um dort eine Seite hinzuzufügen, wählst du Links „Seiten –> Alle anzeigen“ aus und suchst dir deine Seite heraus. 🙂

      Feedzy RSS bringt auch ein eigenes Widget mit, über das du Feeds direkt in der Sidebar anzeigen lassen kannst. Hab das gerade mal ausprobiert, das funktioniert genauso wie auf den Seiten (man muss halt im Widget nochmal die URLs der gewünschten Feeds eintragen und einstellen, ob Bilder angezeigt werden sollen usw).

      Hat dir das weitergeholfen?

      Liebe Grüße
      Anne

      Antworten

  8. Hallo Anne,

    danke dir! Ja, ich hätte die Blogroll gern so richtig oldschool in der Sidebar. Ich werde morgen mal gucken, ob ich das hinbekomme. Ansonsten kommt sie halt als Seite ins Menü…

    Dankeschön!

    Lieber Gruß,
    Sonja

    Antworten

  9. Hallo Anne,

    vielen Dank für diesen Beitrag.

    Ich hab den jetzt auch endlich zum Anlass genommen, mich von meiner ollen, veralteten Linkliste zu trennen. Feedzy installiert und damit ging es dann tatsächlich ganz einfach! 🙂

    LG Linni

    Antworten

  10. Pingback: Linkliebe № 11 - LexasLeben

  11. Pingback: It’s Coffeetime #02 » Lifesayshello.com

  12. Hallo Anne,
    ich wollte nur ein Dankeschön da lassen. Dein Tutorial hat mir gut weiter geholfen meine Blogroll etwas aufzuschmücken :>

    Liebe Grüße
    Ting Ting

    Antworten

  13. Super, vielen Dank für das Tutorial!!!
    Ich habe mich schon mal an dem Plugin versucht, eigentlich hätte ich ja gerne unter der „Feedzy-Category“ mehrere URLs eingetragen, aber die Liste spuckt dann nur die einzelnen Items aus, aber nicht den jeweiligen Blog-TITEL und nicht die jeweilige Blog-BESCHREIBUNG aus, so wie in deiner Liste (https://vom-landleben.de/lieblingsblogs/ ).

    Hast du die einzelnen Lieblingsblogs-Feeds dann immer als einzelne Shortcodes untereinander eingebaut, damit du links in der Spalte auch den Blogtitel und die -beschreibung hast?

    Antworten

    • Ja, genau – bei mir hat es leider ebenfalls nicht funktioniert, mehrere Feeds in einen Shortcode einzutragen. Daher habe ich einen Shortcode-Eintrag pro Feed erstellt und die alle untereinander aufgelistet.

      Liebe Grüße
      Anne

      Antworten

      • verstehe, danke. Also an sich funktioniert das mit den mehreren Feeds auf einmal eintragen bei mir schon. Ich habe erst unter Feedzy -> RSS Categories eine Kategorie angelegt, dort in der Maske mehrere Feeds mit Kommata getrennt eingegeben. Ich hab das also NICHT über den Feedzy-Button und dem Popup auf meiner SEITE dann gemacht, da ging es nämlich nicht.

        Und als nächsten Schritt bin ich auf meine SEITE, hab den Feedzy-Button aufgerufen und habe dort dann nur den Slug der Kategorie eingefügt: https://i.imgur.com/cWYTyti.jpg

        Dann spuckt es schon diese Liste aus: https://i.imgur.com/Eia4oUB.jpg und da auch wirklich alle, aber eben leider ohne RSS-Titel und Beschreibung, die sind zwar „vorgesehen“, aber „leer“, wenn man in de Quelltext schaut.

        Ich denke, dann ist dein Vorgehen, jeden Feed-Shortcode einzeln auszugeben, noch am besten, obwohl es über die Feedzy-Kategorien schon einfacher wäre, gerade wenn sich mehrere Feeds sammeln. Vielleicht geht das aber auch nur in der Pro-Version, das hab ich jetzt noch nicht nachgesehen.

        Antworten

        • Mhm, das kann sein… über die Kategorien habe ich das noch gar nicht ausprobiert, weil ich mich so schwer damit tue, Blogs einer bestimmten Kategorie zuzuordnen. ^^

          Antworten

          • ich hab auch nur eine Kategorie „lieblingsblogs“. Ich hab diese eine nur angelegt, um nur einmal übers Backend unkompliziert die Blogs eintragen und ggf. ändern zu können, ohne auf die eigentliche „Seite“ zu gehen.
            Geht das dann bei dir nicht?

  14. Perfekt! Dank deiner Anleitung kann ich dann mal wieder spontan der Held sein und die Frau mit einer funktionierenden Blogroll beglücken – vielen Dank für das Teilen!
    lg,
    /hauke

    Antworten

  15. Basierend auf dem Artikel hier, habe ich mal einen Artikel darüber geschrieben, wie man eine Blogroll noch gestalten kann. Ohne Plugin 😉 und mit einem Vorschaubild des Blogs sowie einem Textauszug.
    Ich hoffe, das dass in Ordnung ist, und nicht als ‚Konkurrenz‘ angesehen wird 😀

    Antworten

    • danke, Marcus – ich versuche mich mal dran, sieht zwar recht umfangreich aus auf den ersten Blick, hoffe ich bekomme das hin. Aber nachdem ich ein Liebhaber vom Code-Snippets-Plugin bin, liebe ich Snippets dafür eh lieber als noch ein weiteres Plugin. Die summieren sich leider bei mir 😉

      Antworten

    • Hallo Marcus,

      na klar, super – da hier hauptsächlich weniger code-affine Menschen mitlesen, hatte ich eine Variante als Plugin vorgestellt, aber deine selbstgeschriebene Lösung mag ich auch sehr. 🙂

      Antworten

  16. Nur um das klar zu sagen – und mich nicht mit fremden Federn zu schmücken: Das ist nur ‚geklaut‘, den Code hatte Tanja zur Verfügung gestellt

    😉

    Antworten

  17. toll, danke für die Anregung und Anleitung! 🙂 Hab das auch gleich auf Pinterest verlinkt und bau das nach, wenn das mit YAB nicht klappt.

    Antworten

  18. Pingback: angeltearz liest - Aktion | Gebloggt aus dem November 2017

  19. Pingback: Ein Plugin für mehr #socialnetworking & #bloggerliebe - Himmelsblau.org

  20. Pingback: Link-Liebe im April 2018 | fraeulein-nebel.org

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich freue mich über jeden ehrlichen Kommentar und gebe mein Bestes, alle Kommentare zeitnah zu beantworten!
Ein Hinweis an die Spam-Fraktion: Ich überprüfe die Kommentare vor dem Freischalten. Wer etwa scheinheilig fragt, ob wir einen Malerbetrieb empfehlen können, nur um selber einen ebensolchen als Link anzugeben - der kann sich seine Mühe sparen.