HTML #24: Blogroll auf eigener Seite

Es ist noch gar nicht so schrecklich lange her, dass Claudia von Prinzessinholala mich gefragt hat wie man denn die Blogroll auf eine eigene Seite bekommt. Mit dem Kontaktformular habe ich das ja auch geschafft, eine Blogroll wollte ich schon ganz lange haben (bei mir heißt sie jetzt Blogfreunde) und ich hatte die Hoffnung, dass sich das einfach übertragen lässt. War ja klar, dass das nicht so ist und so musste ich ein bisschen tüfteln und am Ende habe ich dann nochmal richtig schön an allem gezweifelt bis es so weit war, dass ich damit Leben konnte. Wie immer gilt, wenn wir direkt am HTML arbeiten, dann müssen wir vorher einmal alles speichern. Wenn was schief geht, dann können wir es wieder holen. Richtig gut wäre es natürlich, wenn wir einen Testblog haben und da gefahrlos alles probieren können. Wie das mit dem Speichern geht hatte ich in Teil 21 erklärt. Bisher ist mir noch nie etwas passiert, aber sicher ist sicher und es wäre doch ärgerlich, wenn der Blog am Ende nicht mehr funktioniert und alles kaputt ist. Dafür übernehme ich nämlich keine Verantwortung!

Bisher hatte ich noch gar keine Blogroll, dabei finde ich die Idee sich auf diese Weise gegenseitig zu unterstützen und zu verlinken total schön. Ich muss aber gestehen, dass es mir in der Sidebar zu unruhig ist. Bei mir ist dort schon recht viel drin und selbst da überlege ich, wie es luftiger und aufgeräumter gehen könnte ohne wichtige Informationen zu weit hinten zu verstecken. Aus diesem Grund fangen wir mit der Blogroll bei Null an.


Im Layoutmenü fügen wir ein neues Gadget hinzu.


Wir scrollen durch die Liste, bis wir zu der gelben Sprechblase "Blog-Liste" kommen. Einfach anklicken.


So sieht das ganze bei mir dann aus. Den Titel habe ich im weiteren Verlauf gelöscht, da er mich gestört hat. Wie viele Blogs angezeigt werden sollen und in welcher Reihenfolge ist ganz euch überlassen. Da sie ja auf eine eigene Seite kommen dürfen es vielleicht ein paar mehr sein als in der Sidebar. 


Bei mir war die Liste komplett leer. Darum habe ich unten auf den blauen Link "Einen Blog zu Ihrer Blog-Liste hinzufügen" geklickt. Es ploppt ein kleines Fenster auf in dem entweder von jedem Blog die URL eingegeben werden kann (das habe ich gemacht) oder einfach die Blogs ausgewählt werden können, denen man folgt. Für mich kam das nicht in Frage, da ich Blogs nur über Bloglovin folge und mich mit GFC nie anfreunden konnte. Wenn alles eingestellt ist nur noch speichern.


Dann bleibt noch die Frage was genau angezeigt werden soll. Das Symbol ist das "Favicon". Der Titel des letzten Eintrags ist einfach die Überschrift (da ist die Linie verrutscht). Das Snippet ist demnach einfach der Anfang des Posts, also eine Art Leseprobe. Die Miniaturansicht ist das erste Foto im Post. Es bleibt dann für das Datum nur noch die Angabe unter dem Bild wie alt der Eintrag ist. Durch das Platzangebot auf einer eigenen Seite habe ich mich einfach mal für alles entschieden.


Damit später alles richtig angezeigt wird muss das Widget nun unter den Post gezogen werden. Danach können wir speichern.


An der Seite wählen wir nun "Seiten" und danach "Nee Seite" aus.


Als erstes geben wir den Titel der Seite oben ein. Ob das nun Blogroll, Blogfreunde, Lieblingsblogs oder was auch immer ist bleibt euch überlassen. Unter den Optionne stellen wir noch ein, dass wir keine Leserkommentare zulassen wollen. Ist das erledigt, dann können wir die leere Seite veröffentlichen.


Im Layoutmenü bearbeiten wir nun unsere Seitenleiste.


Der Titel unserer Seite wird hier angezeigt. Einfach nur einen kleinen Haken setzen.


Weiter unten im Fenster können wir dann noch die Position festlegen und speichern.


Wir öffnen nun unseren Blog und wählen den neuen Reiter aus. In der Leiste oben steht nun die URL. Diese brauchen wir später noch. Bei mir ist es 
http://www.jakaster.de/p/blogfreunde.html
und bei euch sollte der Link ähnlich aussehen. Erst eure Blog-URL, dann das "p" und danach der Seitenname von gerade.


Nachdem wir unseren Blog gesichert haben (wie oben schon erwähnt!) können wir im Vorlagenmenü "HTML bearbeiten" auswählen.


Neben dem orangen Button klicken wir auf "Weiter zum Widget" und wählen hier "BlogList1" aus. Wenn ihr schon mal mit so einer Liste experimentiert habt, dann kann dort evtl eine andere Nummer stehen, da ist es wichtig, dass ihr die aktuellste nehmt, denn das sollte die von eurem Widget von eben sein.


Vor der Zeile
<b:widget id=’BlogList1′ locked=’false’ title=’blogroll’ type=’BlogList’> 
ist ein kleiner schwerzer Pfeil. Auf diesen klicken wir. Evtl taucht gleich eine Zeile drunter noch ein neuer auf. Auch auf diesen klicken wir dann.


Als nächstes benötigen wir die Zeile
<b:includable id=’main’>
Hinter diese klicken wir und drücken einmal auf die Entertaste, sodass wir eine neue Zeile bekommen. In diese fügen wir das Folgende ein:
<b:if cond='data:blog.url == "[URL]"'>
Wobei wir [URL] durch die URL ersetzen, die wir uns eben kopiert haben.


Durch das Einfügen dieser Zeile haben wir einen Fehler im Code produziert, der uns das Suchen leichter macht. Wir scrollen jetzt langsam nach unten bis wir die Zeilen
</b:includable>
</b:widget>
gefunden haben. Durch den Fehler wurden sie bei mir rot dargestellt.


Vor diese beiden Zeilen fügen wir nun folgendes ein:
</b:if>
Dadurch verschwindet der Fehler und die zwei Zeilen sollten nun grün sein.


Jetzt haben wir es geschafft, dass das Widget nur noch angezeigt wird, wenn wir unsere Blogrollseite aufrufen. Die Lösung ist leider nicht so elegant wie mit dem Kontaktformular aus dem letzten Teil aber ich besser habe ich es nicht hinbekommen und auch das Internet bot da nicht mehr.


So sieht es nun aus. Ein bisschen schöner bekommen wir es aber noch. Weder den Bleistift (den sehen zwar nur wir, aber trotzdem) noch den Link zur Startsete brauchen wir an dieser Stelle. Das alles entfernen wir im nächsten Schritt. Dazu müssen wir weiter am HTML arbeiten.


Wir klicken einmal in den Code und drücken dann "Strg"+F um das Suchfeld zu öffnen. Hier gbeen wir 
]]></b:skin>
ein. Wir klicken hinter unser Suchergebnis und drücken die Entertaste, damit wir wieder eine neue Zeile bekommen, in der wir weiter arbeiten können.


<!-- Blogroll Start -->
<style type='text/css'>
<b:if cond='data:blog.url == "[URL]"'>
.footer{display:none;}
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks, .blog-feeds, .blog-pager,
.post-icons, .date-header{display:none;}
</b:if>
</style>
<!-- Blogroll Ende -->

Den Text oben kopieren wir und fügen ihn in die neue Zeile ein. Dabei müssen wir wieder daran denken, dass wir [URL] durch den Link ersetzten, der zur unserer Seite mit der Blogroll führen soll. Zu Beginn haben wir ihn ja kopiert.

Die Zeichenfolge <!-- [...] --> Ermöglicht es einen Kommentar einzufügen. Dieser wird nicht ausgeführt sondern dient uns zur Orientierung. Ich ärgere mich ein bisschen, dass ich da nicht schon eher dran gedacht habe, denn so sind Änderungen viel leichter zu verfolgen.


Nach dem Speichern sah es bei mir so aus. An sich gar nicht so verkehrt. Die Überschrift stammt von der Seite, die wir angelegt haben und passt so zu den anderen Überschriften (wenn euer Widget einen Namen bekommen hat, dann wird auch dieser angezeigt. Gefällt es euch so besser, dann könnt ihr auch die Überschrift der Seite wieder löschen). Was mich nur gestört hat, ist der Rahmen. Sonst mag ich den recht gerne, weil er meinen Posts einen gewissen Zusammenhalt gibt und sie optisch vom Rest des Blogs trennt. Hier stört es aber, weil dadurch deutlich wird, dass die Blogroll eben nicht Teil der Seite ist sondern eigentlich darunter angezeigt wird. Je nach Vorlage kann es sein, dass ihr dieses Problem nicht habt. Den Rahmen weg zu bekommen hat am längsten gedauert. Ich habe wirklich gezweifelt und überlegt ob ich so eine Liste wirklich so dringend brauche. Am Ende hat es dann doch geklappt und dazu war nur eine Zeile nötig.

<!-- Blogroll Start -->
<style type='text/css'>
<b:if cond='data:blog.url == "http://www.jakaster.de/p/blogfreunde_2.html"'>
.footer{display:none;}
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks, .blog-feeds, .blog-pager,
.post-icons, .date-header{display:none;}
.post-outer {border:none;!important;}
</b:if>
</style>
<!-- Blogroll Ende -->

Der Code um alles optisch etwas schöner zu gestalten muss lediglich um den Befehl erweitert werden, dass kein Postrahmen angezeigt werden soll. "!important" sorgt dann noch dafür, dass in diesem Fall der Code, der für den kompletten Blog angewendet wird überschrieben wird. So klappt es dann auch, dass kein störender Rahmen mehr da ist und ich mit dem Ergebnis gut leben kann. Vielen lieben Dank für den Anstoß liebe Claudia, sonst hätte es wohl noch länger gedauert.


Bei Problemen versuche ich gerne zu helfen. Ebenso bei anderen Fragen rund um den Blog. Versprechen kann ich nichts und vielleicht dauert es auch mal, aber ich gebe mir Mühe.

7 liebe & nette Meinungen

  1. Liebe Rebecca, es ist schon toll was du uns für Möglichkeiten zeigst wie man seinen Blog schön und übersichtlich gestalten kann, vielen vielen Dank dafür. Ich habe schon so viel von dir gelernt und bin total begeistert von dir und deinem Blog, vielen vielen Dank.

    LG

    moni

    AntwortenLöschen
  2. Vielen Dank für diesen super Tipp :)

    Liebe Grüße
    Sarah

    AntwortenLöschen
  3. Super!!!! Viiiiiielen lieben Dank! dann muss ich mich demnächt mal darin vertiefen! ich wünsch dir noch einen wunderschönen sonntag! Alles liebe claudia

    AntwortenLöschen
  4. Danke, liebe Rebecca! Das muss ich mir auch in Ruhe nochmal durchlesen... sieht nicht so einfach aus, aber man braucht ja auch Herausforderungen...
    LG Astrid

    AntwortenLöschen
    Antworten
    1. Hallo Astrid,

      bis der Knoten mal geplatzt war hat es bei mir auch gedauert. Darum halte ich dann ja auch alles fest, damit ich hoffentlich nicht noch mal drüber nachdenken muss sondern nachschlagen kann :D

      Liebe Grüße
      Rebecca

      Löschen
  5. Danke Rebecca,
    so sieht das natürlich viel aufgeräumter aus. Ganz schön viele Schritte, bis die Liste so weit ist, aber ich werde mich durchbeißen. Mal sehen, ob ich das in dieser Woche hinbekomme... immerhin sind Ferien und ich muss der Miss Cia helfen ihren Blog etwas umzugestalten *zwinker* Wie gut, daß ich bei dir immer aufgepasst habe ;)

    Liebe Grüße
    Gusta

    AntwortenLöschen
    Antworten
    1. Hallo Gusta,

      da wir ja über so viel innere Schönheit haben müssen wir eben für die Schönheit vom Blog leiden ;) Das bekommt ihr zwei bestimmt hin und bei Fragen stehe ich gerne zur Verfügung.

      Liebe Grüße
      Rebecca

      Löschen

Vielen lieben Dank, dass du dir die Zeit genommen hast mir einen Kommentar zu schreiben. Ich freue mich sehr.Solltest du eine Frage haben, so lass mir doch bitte eine Mailadresse da, damit ich dir auch antworten kann.

Related Posts Plugin for WordPress, Blogger...