So kannst du dir ganz einfach eine kostenlose Blogroll bauen

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:

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. 🙂

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:

3. Füge die Feeds deiner Lieblingsblogs hinzu

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

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:

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! 🙂