So kannst du dir ganz einfach eine kostenlose Blogroll bauen

Von ‱ ‱ 39 Kommentare
Blogroll einbauen mit Feedzy RSS Feeds Lite

Bloggen BlogosphÀre Lieblingsblogs Plugin RSS-Feed Tutorial WordPress

Blogrolls sind eine tolle Möglichkeit, deine Lieblingsblogs zu verlinken: in einer Liste wird jeweils der neueste Blogartikel eines jeden Blogs angezeigt. Wie du eine Blogroll baust, zeige ich dir in diesem Beitrag.

So kann das dann aussehen:

Die Blogroll auf meinem Blog vom-landleben.de
Diese Blogroll hatte ich mal auf meinem Blog vom-landleben.de

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 meines Blogs vom-landleben.de
So sieht der RSS-Feed meines Blogs vom-landleben.de aus

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:

Blogroll in WordPress mit dem Plugin 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:

Blogroll in WordPress mit dem Plugin Feedzy RSS Feeds Lite
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:

RSS-Feed ĂŒber Icon abonnieren

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 https://domain.de/feed der Standard
  • Bei wordpress.com ist es https://domain.wordpress.com/feed
  • Bei Blogger findest du den Feed unter https://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">

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

Verwandte BeitrÀge

39 Kommentare zu „So kannst du dir ganz einfach eine kostenlose Blogroll bauen“

  3. *thea

    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
  4. Paleica

    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
  5. sara von sgkunst

    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
    1. Anne

      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
  6. Sylvi

    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

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

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

  9. Sonja - The Crafting Café

    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
    1. Anne

      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
  11. Linni

    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

  12. Pingback: Linkliebe № 11 - LexasLeben

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

  15. INA

    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
    1. Anne

      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
      1. INA

        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
          1. INA

            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?

  17. Marcus

    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
    1. INA

      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
    2. Anne

      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

  20. Pingback: Ein Plugin fĂŒr mehr #socialnetworking & #bloggerliebe - Himmelsblau.org

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

Kommentar verfassen

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

Nach oben scrollen