HTML #26: Header und Favicon einfügen

Im Moment hole ich richtig auf, kann das sein. So lange habe ich nicht die Zeit und Ruhe für diese HTML-Reihe gefunden, dabei liegt sie mir doch sehr am Herzen. Es gibt zwar unzählige Tutorials für viele Probleme, aber diese muss man erstmal finden und dann sind sie z.T. noch auf das alte Design von Blogger abgestimmt oder sind sehr knapp gehalten und so oft nur schwer zu verstehen. Damit ich in der nächsten Woche noch einmal richtig was von meiner Liste streichen kann (es kamen so viel Fragen zum Thema zentrieren) müssen wir noch ein bisschen vorarbeit leisten. Darum gibt es heute die Erklärung wie man einen Header (das Bild oben über dem Blog) und ein Favicon (das kleine Symbol oben neben dem Blognahmen in eurem Browser) einrichtet. Für viele sicher ein alter Hut, aber vielleicht für den ein oder anderen doch noch Interessant.



Die Screenshots für das Einfügen eines Favicons hatte ich schon vor Monaten gemacht (im Dezember) und so müssen sie jetzt endlich verarbeitet werden.


Da sah das Layout hier noch herbstlich aus, aber das ändert nichts an der Handhabung. Wie ihr an den roten Kästchen sehen könnt ist mein Favicon (Favoriten Icon) mit meinem Bild identisch, dass neben meinen Kommentaren angezeigt wird. Gezeichnet hatte es mir eine Freundin in der Oberstufe und eine weiter hat es für mich digital überarbeitet und coloriert. Ich mag das Bildchen einfach und da ich es auf allen Sozielmediaplattformen als Profilbild verwende ist auch immer klar, wer dahinter steckt. Auf dem Blog taucht es so direkt aber nicht aus (statt dem Avatar in der Sidebar gibt es inzwischen ja auch ein Foto) und so wollte ich das Bild abrunden.


Im Layoutmenü ist oben eine kleine Box "Favicon". Als Standard wird hier ein oranges "B" für Blogger angezeigt. Finde ich ja nicht so richtig schön, darum hatte ich schon immer ein eigenes. Wir klicken hier also auf "Bearbeiten".


Es öffnet sich ein kleines Fenster. Hier klicken wir auf den grauen Button mit der Aufschrift "Datei auswählen". Auf unserer Festplatte können wir nun die entsprechende Datei aussuchen und auswählen. Wichtig ist, dass die Datei nicht zu groß ist. Das ist auch gar nicht nötig, denn angezeigt wird das Bild später mit 16x16 Pixeln bzw. 32x32 Pixeln. Demnach solltet ihr auch darauf achten, dass es wirklich ein Logo oder Symbol ist und nicht zu viele Details enthält, da diese gar nicht dargestellt werden können. Habt ihr euch für ein Symbol entschieden, so klickt ihr nur noch auf Speichern. Auch das Layout muss noch einmal gespeichert werden und dann sind wir fertig. Manchmal dauert es eine Weile, bis das Symbol übernommen wird (beim Chillibalkon hat es fast eine Woche gedauert).

Als nächstes machen wir mit dem Einfügen des Headers (oder manchmal auch Banner oder Titelbild genannt) weiter. Dazu können wir einfach im Layoutmenü weiter arbeiten.


Hier müsste es eine Zeile geben in der unser Blogname steht. Bei euch gibt es vermutlich nicht die Möglichkeit oberhalb noch ein Gadget einzufügen, darum sollte es die oberste Box sein, die über die gesamte Breite geht. Hier klicken wir auf "Bearbeiten" und es öffnet sich ein neues kleines Fenster.


Hier finden wir den Blogtitel. Dieser wird oben in den einzelnen Tabs des Browsers angezeigt, wenn die Seite als Lesezeichen gespeichert wird usw. Außerdem kann eine Beschreibung für den Blog angegeben werden. Theoretisch reicht schon ein Blogtitel aus, aber es ist ja doch unser Ziel einen hübschen Blog zu haben und da spielt die Optik eben eine entscheidende Rolle. Darum empfiehlt es sich ein Bild einzufügen. Dieses kann auf verschiedene Weisen platzierte werden:

1) Hinter Titel und Beschreibung. Das müsst ihr euch wie eine Art Hintergrundbild für diesen Bereich vorstellen. Vor diesem Hintergrund werden dann der Titel und die Beschreibung angezeigt, die ihr oben eingegeben habt.


2) Anstelle von Titel und Beschreibung. Für diese Version habe ich mich entschieden. Auch bei mir sieht man den Blognamen (seit einer Weile ja nur noch "Jakaster") und die Beschreibung. Diese sind aber direkt in die Bilddatei eingefügt worden und haben nichts mit dem identischen Text in den Textfeldern zutun. Die beste Kontrolle hat man meiner Meinung nach mit dieser Version.


3) Beschreibung nach dem Bild Platzieren. Hier wird unter eurem Bild noch einmal die Blogbeschreibung angezeigt.


Welche Version der persönliche Favorit ist, ist sicher Geschmackssache. Wir müssen nur wissen welche Version wir gewählt haben, damit es in der nächsten Woche weiter gehen kann. Wenn wir uns entschieden haben müssen wir natürlich noch speichern und zwar unsere Auswahl und das Layout. Danach sollte es klappen.

Bei Fragen und Problemen dürft ihr euch gerne melden. Kommentar, Kontaktformular, Brieftaube, Mail, Rauchzeichen...

5 liebe & nette Meinungen

  1. Liebe Rebecca,
    das ist toll, dass du uns immer zeigst, wie der Blog weiter bearbeitet werden kann und dir sooo viel Zeit dafür nimmst! Vielen lieben Dank! Ein Favicon habe ich schon eine ganze Weile und es ist auch keine große Kunst, wenn man erst Mal weiß, wie dieses Bildchen heißt und wo es im Blog versteckt ist. Aber zum Header hätte ich eine Frage. Bislang habe ich ja immer noch keinen....leider.... Du schreibst, dass es als Bilddatei eingefügt wird. Kannst du mir einen Tipp geben, mit welchem Programm man diese Bilddatei am Besten gestaltet und in welcher Größe?
    GLG und vielen Dank vorab! Uli

    AntwortenLöschen
    Antworten
    1. Hallo Uli,

      ganz am Anfang hatte ich mal einen Teil (ich glaube, dass es gleich der erste war), welche Zahlen zu seinem Blog man sich merken sollte. Da ging es auch um die Breite des Blogs. Das ist dann auch die Breite für deinen Header. Die Höhe ist ganz sicher Geschmackssache :)

      Bei den Programmen brauchst du eigentlich irgendein Bildbearbeitungsprogramm, es kommt eben drauf an, was du genau machen möchtest. Klar ist Photoshop da das Optimum, aber als kostenloses Programm ist auch Gimp nicht schlecht. In beides muss man sich eben einfuchsen :)

      Liebe Grüße
      Rebecca

      Löschen
  2. Liebe Rebecca, ach wie schön, ich freue mich immer wieder über deine Post, vor allem wenn du uns wieder etwas neues zeigst. bei dir kann man so viel lernen wie man seinen Blog verschönern kann, vielen vielen Dank für deine Mühe.

    LG

    moni

    AntwortenLöschen
  3. Liebe Rebecca,
    erstmal Danke für deine super Tutorials und ich hoffe noch viel von dir zu lernen.Was ich gern wüsste ist,wie man den Header getrennt vom Rest eingefügt bekommt.Also quasi als eigenes Bild.Weißt du wie ich es meine? :) bei Doppelnaht.blogspot.de sieht man es gut.

    Danke schonmal und Liebe Grüße Jessy

    AntwortenLöschen
    Antworten
    1. Hallo Jessy,

      bei mir kannst du dir das genau so gut ansehen ;) Der Text ist bei mir auch gleich in der Bilddatei gespeichert. Wie das geht ist oben als Punkt 2 "Anstelle von Titel und Beschreibung" erklärt.

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